3. [**انضم إلى Discord الخاص بـ Azure AI Foundry وتواصل مع الخبراء والمطورين الآخرين**](https://discord.com/invite/ByRwuEEgH4)
# تطوير الويب للمبتدئين - منهج دراسي
تعلم أساسيات تطوير الويب من خلال دورة شاملة لمدة 12 أسبوعًا مقدمة من Microsoft Cloud Advocates. تحتوي كل واحدة من الدروس الـ 24 على مشاريع عملية مثل بناء حدائق افتراضية، وإضافات للمتصفح، وألعاب فضائية باستخدام JavaScript وCSS وHTML. استمتع بالاختبارات، والمناقشات، والواجبات العملية. عزز مهاراتك واحتفظ بالمعرفة من خلال منهجنا القائم على المشاريع. ابدأ رحلتك البرمجية اليوم!
تعلم أساسيات تطوير الويب من خلال دورة شاملة لمدة 12 أسبوعًا مقدمة من Microsoft Cloud Advocates. تحتوي كل واحدة من الدروس الـ 24 على مشاريع عملية مثل بناء حدائق افتراضية، وإضافات للمتصفح، وألعاب فضائية باستخدام JavaScript وCSS وHTML. استمتع بالاختبارات، والنقاشات، والواجبات العملية. عزز مهاراتك واحتفظ بالمعرفة من خلال منهجنا القائم على المشاريع. ابدأ رحلتك في البرمجة اليوم!
> **المعلمين**، لقد قمنا [بتضمين بعض الاقتراحات](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) للحصول على مواد دراسية إضافية.
### 📋 إعداد بيئتك
هذا المنهج يحتوي على بيئة تطوير جاهزة! عند البدء، يمكنك اختيار تشغيل المنهج في [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 الخاص بك يحتوي على نسخة من المنهج.
اتبع هذه الخطوات:
1. **قم بعمل Fork للمستودع**: انقر على زر "Fork" في الزاوية العلوية اليمنى من هذه الصفحة.
#### تشغيل المنهج محليًا على جهاز الكمبيوتر الخاص بك
لتشغيل هذا المنهج محليًا على جهاز الكمبيوتر الخاص بك، ستحتاج إلى محرر نصوص، ومتصفح، وأداة سطر أوامر. سيرشدك درسنا الأول، [مقدمة إلى لغات البرمجة والأدوات](../../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).
1. استنسخ مستودعك إلى جهاز الكمبيوتر الخاص بك. يمكنك القيام بذلك بالنقر على زر **Code** ونسخ الرابط:
1. استنسخ المستودع الخاص بك إلى جهاز الكمبيوتر. يمكنك القيام بذلك بالنقر على زر **Code** ونسخ الرابط:
<imgsrc="./images/createcodespace.png"alt="Copy your repository URL"style="width:270px;"/>
[!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>` بالرابط الذي نسخته للتو:
@ -107,9 +100,9 @@ CO_OP_TRANSLATOR_METADATA:
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:
>
> * [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) - لمساعدتك على كتابة الكود بشكل أسرع
@ -117,7 +110,7 @@ CO_OP_TRANSLATOR_METADATA:
## 📂 كل درس يتضمن:
- رسم توضيحي اختياري
- فيديو إضافي اختياري
- فيديو تكميلي اختياري
- اختبار تمهيدي قبل الدرس
- درس مكتوب
- بالنسبة للدروس القائمة على المشاريع، إرشادات خطوة بخطوة حول كيفية بناء المشروع
@ -127,13 +120,13 @@ CO_OP_TRANSLATOR_METADATA:
- واجب
- [اختبار ما بعد الدرس](https://ff-quizzes.netlify.app/)
> **ملاحظة حول الاختبارات**: جميع الاختبارات موجودة في مجلد Quiz-app، بإجمالي 48 اختبارًا يحتوي كل منها على ثلاثة أسئلة. وهي متاحة [هنا](https://ff-quizzes.netlify.app/) ويمكن تشغيل تطبيق الاختبارات محليًا أو نشره على Azure؛ اتبع التعليمات في مجلد `quiz-app`.
> **ملاحظة حول الاختبارات**: جميع الاختبارات موجودة في مجلد Quiz-app، بإجمالي 48 اختبارًا يحتوي كل منها على ثلاثة أسئلة. وهي متاحة [هنا](https://ff-quizzes.netlify.app/) ويمكن تشغيل تطبيق الاختبار محليًا أو نشره على Azure؛ اتبع التعليمات في مجلد `quiz-app`.
## 🗃️ الدروس
| | اسم المشروع | المفاهيم التي يتم تدريسها | الأهداف التعليمية | رابط الدرس | المؤلف |
| 01 | البداية | مقدمة إلى البرمجة وأدوات العمل | تعلم الأساسيات التي تقوم عليها معظم لغات البرمجة والتعرف على البرامج التي تساعد المطورين المحترفين في عملهم | [مقدمة إلى لغات البرمجة وأدوات العمل](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 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 |
@ -142,45 +135,45 @@ CO_OP_TRANSLATOR_METADATA:
| 07 | أساسيات JS | المصفوفات والحلقات | العمل مع البيانات باستخدام المصفوفات والحلقات في JavaScript | [المصفوفات والحلقات](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [الحديقة الافتراضية](./3-terrarium/solution/README.md) | HTML في الممارسة | بناء HTML لإنشاء حديقة افتراضية على الإنترنت، مع التركيز على بناء التخطيط | [مقدمة إلى HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [الحديقة الافتراضية](./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 باستخدام المتغيرات المخزنة في التخزين المحلي | [واجهات برمجة التطبيقات، النماذج، والتخزين المحلي](./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 |
| 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، المستخدمة لرسم العناصر على الشاشة | [الرسم على اللوحة](./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 |
| 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 |
| 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 |
## 🏫 التعليم
تم تصميم منهجنا بمبدأين رئيسيين في التعليم:
تم تصميم منهجنا بمبدأين تربويين رئيسيين:
* التعلم القائم على المشاريع
* الاختبارات المتكررة
يعلم البرنامج أساسيات JavaScript وHTML وCSS، بالإضافة إلى أحدث الأدوات والتقنيات التي يستخدمها مطورو الويب اليوم. سيحصل الطلاب على فرصة لتطوير خبرة عملية من خلال بناء لعبة كتابة، تيراريوم افتراضي، إضافة متصفح صديقة للبيئة، لعبة بأسلوب Space Invader، وتطبيق مصرفي للشركات. بحلول نهاية السلسلة، سيكون لدى الطلاب فهم قوي لتطوير الويب.
يعلم البرنامج أساسيات JavaScript وHTML وCSS، بالإضافة إلى أحدث الأدوات والتقنيات التي يستخدمها مطورو الويب اليوم. سيحصل الطلاب على فرصة لتطوير خبرة عملية من خلال بناء لعبة كتابة، تيراريوم افتراضي، إضافة متصفح صديقة للبيئة، لعبة بأسلوب غزو الفضاء، وتطبيق مصرفي للأعمال. بحلول نهاية السلسلة، سيكون لدى الطلاب فهم قوي لتطوير الويب.
> 🎓 يمكنك أخذ الدروس الأولى في هذا المنهج كـ [مسار تعلم](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)".
بينما تجنبنا عمدًا تقديم أطر عمل JavaScript للتركيز على المهارات الأساسية المطلوبة كمطور ويب قبل اعتماد إطار عمل، فإن الخطوة التالية الجيدة لإكمال هذا المنهج ستكون تعلم Node.js عبر مجموعة أخرى من الفيديوهات: "[سلسلة المبتدئين: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
يمكنك تشغيل هذا التوثيق دون اتصال باستخدام [Docsify](https://docsify.js.org/#/). قم بعمل Fork لهذا المستودع، [قم بتثبيت Docsify](https://docsify.js.org/#/quickstart) على جهازك المحلي، ثم في المجلد الجذر لهذا المستودع، اكتب `docsify serve`. سيتم تقديم الموقع على المنفذ 3000 على localhost: `localhost:3000`.
يمكنك تشغيل هذا التوثيق دون اتصال باستخدام [Docsify](https://docsify.js.org/#/). قم بعمل Fork لهذا المستودع، [قم بتثبيت Docsify](https://docsify.js.org/#/quickstart) على جهازك المحلي، ثم في المجلد الجذر لهذا المستودع، اكتب `docsify serve`. سيتم تشغيل الموقع على المنفذ 3000 على localhost الخاص بك: `localhost:3000`.
- [اختر مغامرتك مع Copilot](https://github.com/microsoft/CopilotAdventures)
- [اختر مغامرتك الخاصة مع Copilot](https://github.com/microsoft/CopilotAdventures)
## الترخيص
هذا المستودع مرخص بموجب ترخيص MIT. راجع ملف [LICENSE](../../LICENSE) لمزيد من المعلومات.
هذا المستودع مرخص بموجب ترخيص MIT. راجع ملف [الترخيص](../../LICENSE) لمزيد من المعلومات.
---
**إخلاء المسؤولية**:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://discord.com/invite/ByRwuEEgH4)
Sundin ang mga hakbang na ito upang makapagsimula sa paggamit ng mga resources na ito:
1. **I-Fork ang Repository**: I-click ang [](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 makipagkilala sa mga eksperto at kapwa developer**](https://discord.com/invite/ByRwuEEgH4)
# Web Development para sa mga Baguhan - Isang Kurikulum
Matutunan ang mga pangunahing kaalaman sa web development gamit ang aming 12-linggong komprehensibong kurso mula sa Microsoft Cloud Advocates. Ang bawat isa sa 24 na aralin ay sumasaklaw sa JavaScript, CSS, at HTML sa pamamagitan ng mga praktikal na proyekto tulad ng terrariums, browser extensions, at space games. Makilahok sa mga pagsusulit, talakayan, at mga praktikal na gawain. Paunlarin ang iyong kakayahan at pagbutihin ang iyong kaalaman gamit ang aming epektibong project-based na pamamaraan. Simulan ang iyong coding journey ngayon!
Matutunan ang mga pangunahing kaalaman sa web development gamit ang aming 12-linggong komprehensibong kurso mula sa Microsoft Cloud Advocates. Ang bawat isa sa 24 na aralin ay sumasaklaw 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 gawain. Paunlarin ang iyong kakayahan at pagbutihin ang iyong kaalaman gamit ang aming epektibong project-based na pamamaraan. Simulan ang iyong coding journey ngayon!
#### 🧑🎓 _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 maging mga paraan para makakuha ng libreng certificate voucher. Ito ang pahinang dapat mong i-bookmark at balikan paminsan-minsan dahil pinapalitan namin ang nilalaman 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, Student packs, at maging mga paraan upang makakuha ng libreng certificate voucher. Ito ang pahinang dapat mong i-bookmark at balikan paminsan-minsan dahil pinapalitan namin ang nilalaman buwan-buwan.
### 📣 Anunsyo - _Bagong Kurikulum_ sa Generative AI para sa JavaScript ay inilabas na
Huwag palampasin ang aming bagong Generative AI kurikulum!
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 makapagsimula!
Ang bawat aralin 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 tapusin, isang knowledge check, at isang hamon upang gabayan ka sa pag-aaral ng mga paksa tulad ng:
- Prompting at prompt engineering
- Paggawa ng text at image apps
- 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 makapagsimula!
## 🌱 Pagsisimula
@ -64,32 +67,32 @@ Upang mapahusay ang inyong karanasan sa pag-aaral, makipag-ugnayan sa inyong mga
Upang higit pang mapalawak ang inyong 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.
### 📋 Pagsasaayos ng iyong kapaligiran
### 📋 Pagsasaayos ng iyong environment
Ang kurikulum na ito ay may handang development environment! Sa pagsisimula, maaari kang pumili 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 handang development environment! Habang nagsisimula ka, 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 mai-save ang iyong trabaho, inirerekomenda na gumawa ka ng sariling kopya ng repository na ito. Magagawa mo ito sa pamamagitan ng pag-click sa **Use this template** na button sa itaas ng pahina. Ito ay lilikha 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.
2. **I-clone ang Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
1. **I-Fork ang Repository**: I-click ang "Fork" button sa kanang-itaas na bahagi ng pahinang ito.
2. **I-Clone ang Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Pagpapatakbo ng kurikulum sa isang Codespace
Sa iyong kopya ng repository na iyong ginawa, i-click ang **Code** button at piliin ang **Open with Codespaces**. Ito ay lilikha ng bagong Codespace para sa iyo upang magtrabaho.
#### 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 aralin, [Introduction to Programming Languages and Tools of the Trade](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), ay gagabay sa iyo 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 ng iba't ibang opsyon para sa bawat isa sa mga tool na ito upang makapili ka ng angkop 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:
<imgsrc="./images/createcodespace.png"alt="Copy your repository URL"style="width:270px;"/>
[!CodeSpace](./images/createcodespace.png)
Pagkatapos, buksan ang [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) sa loob ng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) at patakbuhin ang sumusunod na command, palitan ang `<your-repository-url>` ng URL na iyong kinopya:
@ -107,79 +110,79 @@ Ang aming rekomendasyon ay gamitin ang [Visual Studio Code](https://code.visuals
## 📂 Ang bawat aralin ay naglalaman ng:
- opsyonal na sketchnote
- opsyonal na karagdagang video
- opsyonal na supplemental video
- pre-lesson warmup quiz
- nakasulat na aralin
- para sa mga project-based na aralin, step-by-step na gabay kung paano buuin ang proyekto
> **Tungkol sa mga pagsusulit**: Ang lahat ng pagsusulit ay nasa Quiz-app folder, kabuuang 48 na pagsusulit na may tig-tatlong tanong bawat isa. Ang mga ito ay naka-link mula sa loob ng mga aralin at maaaring patakbuhin nang lokal o i-deploy sa Azure; sundin ang mga tagubilin sa `quiz-app` folder. Unti-unti itong nilolokalisa.
> **Tungkol sa mga pagsusulit**: Ang lahat ng pagsusulit ay nasa Quiz-app folder, kabuuang 48 na pagsusulit na may tig-tatlong tanong bawat isa. Available ang mga ito [dito](https://ff-quizzes.netlify.app/) at maaaring patakbuhin ang quiz app lokal o i-deploy sa Azure; sundin ang mga tagubilin sa `quiz-app` folder.
## 🗃️ Mga Aralin
| | Pangalan ng Proyekto | Mga Konseptong Itinuturo | Mga Layunin sa Pagkatuto | Naka-link na Aralin | May-akda |
| | Pangalan ng Proyekto | Mga Konseptong Itinuturo | Mga Layunin sa Pagkatuto | Nakakonektang Aralin | May-akda |
| 01 | Pagsisimula | Panimula sa Programming at Mga Tools na Ginagamit | Matutunan ang mga pangunahing pundasyon ng karamihan sa mga programming language at tungkol sa software na tumutulong sa mga propesyonal na developer | [Panimula sa Programming Languages at Tools na Ginagamit](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Pagsisimula | Mga Pangunahing Kaalaman sa GitHub, kabilang ang pagtatrabaho 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 | JS Basics | 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 | JS Basics | Mga Function at Method | Matutunan ang tungkol sa mga function at method upang pamahalaan ang daloy ng lohika ng isang application | [Mga Function at Method](/2-js-basics/2-functions-methods/README.md) | Jasmine at Christopher |
| 06 | JS Basics | Paggawa ng Desisyon gamit ang JS | Matutunan kung paano lumikha ng mga kondisyon sa iyong code gamit ang mga paraan ng paggawa ng desisyon | [Paggawa ng Desisyon](/2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | 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 | Buuin ang HTML upang 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 | Buuin ang CSS upang i-style ang online terrarium, na nakatuon sa mga pangunahing kaalaman ng 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 upang gawing functional ang terrarium bilang isang drag/drop interface, 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 upang 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 | Alamin kung paano gumagana ang mga browser, ang kanilang kasaysayan, at kung paano magsimula ng mga unang elemento ng browser extension | [About Browsers](/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 upang tumawag sa API gamit ang mga variable na nakaimbak sa local storage | [APIs, Forms, and 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 upang pamahalaan ang icon ng extension; alamin ang tungkol sa pagganap ng web at ilang mga optimization | [Background Tasks and Performance](/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 | Alamin ang tungkol sa Inheritance gamit ang parehong Classes at Composition at ang Pub/Sub pattern bilang paghahanda sa pagbuo ng laro | [Introduction to Advanced Game Development](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution/README.md) | Pag-drawing sa canvas | Alamin ang tungkol sa Canvas API, na ginagamit upang mag-drawing ng mga elemento sa screen | [Drawing to 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 magkakaroon ng galaw ang mga elemento gamit ang cartesian coordinates at ang Canvas API | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution/README.md) | Pagtukoy ng banggaan | Gawing magbanggaan at mag-react ang mga elemento sa isa't isa gamit ang keypresses at magbigay ng cooldown function para sa pagganap ng laro | [Collision Detection](/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 batay sa status at pagganap ng laro | [Keeping 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 | Alamin ang tungkol sa pagtatapos at pag-restart ng laro, kabilang ang paglilinis ng mga assets at pag-reset ng mga halaga ng variable | [The Ending Condition](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution/README.md) | Mga HTML Template at Routes sa Web App | Alamin kung paano gumawa ng scaffold ng arkitektura ng isang multipage website gamit ang routing at HTML templates | [HTML Templates and Routes](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution/README.md) | Pagbuo ng Login at Registration Form | Alamin ang tungkol sa pagbuo ng mga form at paghawak ng mga validation routine | [Forms](/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, kung 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 | Alamin kung paano pinapanatili ng iyong app ang estado at kung paano ito pamahalaan sa programmatically | [State Management](/7-bank-project/4-state-management/README.md) | Yohan |
## 🏫 Pedagogy
Ang aming kurikulum ay idinisenyo gamit ang dalawang pangunahing prinsipyo ng pedagogical:
* pag-aaral na nakabatay sa proyekto
| 01 | Pagsisimula | Panimula sa Programming at Mga Tools na Ginagamit | Matutunan ang mga pangunahing kaalaman sa likod 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 Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Pagsisimula | Mga Pangunahing Kaalaman sa GitHub, kabilang ang pagtatrabaho bilang 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 | JS Basics | 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 | JS Basics | Mga Function at Method | Matutunan ang tungkol sa mga function at method upang pamahalaan ang daloy ng logic ng isang application | [Mga Function at Method](./2-js-basics/2-functions-methods/README.md) | Jasmine at Christopher |
| 06 | JS Basics | Paggawa ng Desisyon gamit ang JS | Matutunan kung paano gumawa ng mga kondisyon sa iyong code gamit ang mga paraan ng paggawa ng desisyon | [Paggawa ng Desisyon](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | 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 | Buuin ang HTML upang 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 | Buuin ang CSS upang 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) | JavaScript Closures, DOM manipulation | Gumawa ng JavaScript upang magamit ang terrarium bilang isang drag/drop interface, na nakatuon sa closures at DOM manipulation | [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 keyboard events upang magmaneho 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) | Paggamit ng Mga Browser | Matutunan kung paano gumagana ang mga browser, ang kanilang kasaysayan, at kung paano magsimula ng mga unang elemento ng browser extension | [About Browsers](./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 | Gumawa ng mga elemento ng JavaScript ng iyong browser extension upang tumawag sa API gamit ang mga variable na nakaimbak sa local storage | [APIs, Forms, and 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, web performance | Gamitin ang mga background process ng browser upang pamahalaan ang icon ng extension; matutunan ang tungkol sa web performance at ilang mga optimization | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Mas Advanced na Game Development 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 | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Pag-drawing sa canvas | Matutunan ang Canvas API, na ginagamit upang mag-drawing ng mga elemento sa screen | [Drawing to 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 magkakaroon ng galaw ang mga elemento gamit ang cartesian coordinates at ang Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Pagtukoy ng banggaan | Gawing magbanggaan at mag-react ang mga elemento sa isa't isa gamit ang keypresses at magbigay ng cooldown function para sa performance ng laro | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Pagkuha ng score | Gumawa ng mga kalkulasyon batay sa status at performance ng laro | [Keeping 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 kung paano tapusin at i-restart ang laro, kabilang ang paglilinis ng mga assets at pag-reset ng mga halaga ng variable | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML Templates at Routes sa Web App | Matutunan kung paano gumawa ng scaffold ng multipage website architecture gamit ang routing at HTML templates | [HTML Templates and Routes](./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 paggawa ng mga form at paghawak ng mga validation routine | [Forms](./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, kung 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 at kung paano ito pamahalaan sa programatikong paraan | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
## 🏫 Pedagohiya
Ang aming kurikulum ay idinisenyo gamit ang dalawang pangunahing prinsipyo ng pedagohiya:
* project-based learning
* madalas na pagsusulit
Itinuturo ng programa ang mga pangunahing kaalaman ng JavaScript, HTML, at CSS, pati na rin ang mga pinakabagong tools at teknolohiya na ginagamit ng mga web developer ngayon. Magkakaroon ang mga estudyante ng pagkakataon na magkaroon ng hands-on na karanasan sa pamamagitan ng paggawa ng typing game, virtual terrarium, eco-friendly browser extension, space-invader-style game, at banking app para sa mga negosyo. Sa pagtatapos ng serye, magkakaroon ang mga estudyante ng matibay na kaalaman sa web development.
Itinuturo ng programa ang mga pundasyon ng JavaScript, HTML, at CSS, pati na rin ang mga pinakabagong tools at teknik na ginagamit ng mga web developer ngayon. Magkakaroon ng pagkakataon ang mga mag-aaral na magkaroon ng praktikal 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 ang mga mag-aaral ng matibay na kaalaman sa web development.
> 🎓 Maaari mong kunin ang mga 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 ilang unang mga 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, mas nagiging masigla ang proseso para sa mga estudyante at mas tumatatak ang mga konsepto. Nagsulat din kami ng ilang mga panimulang aralin sa mga pangunahing kaalaman ng JavaScript upang ipakilala ang mga konsepto, na sinamahan ng 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, na ang ilan sa mga may-akda ay nag-ambag sa kurikulum na ito.
Sa pamamagitan ng pagtiyak na ang nilalaman ay nakaayon sa mga proyekto, nagiging mas nakakaengganyo ang proseso para sa mga mag-aaral at mas tumatatak ang mga konsepto. Nagsulat din kami ng ilang panimulang aralin sa mga batayan ng JavaScript upang ipakilala ang mga konsepto, na ipinares sa 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, na ang ilan sa mga may-akda ay nag-ambag sa kurikulum na ito.
Bukod dito, ang isang mababang-panganib na pagsusulit bago ang klase ay nagtatakda ng intensyon ng estudyante patungo sa pag-aaral ng isang paksa, habang ang pangalawang pagsusulit pagkatapos ng klase ay nagtitiyak ng karagdagang pagkatuto. 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.
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 nagtitiyak ng karagdagang pagkatuto. 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 cycle.
Bagama't 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)".
Habang sinadya naming iwasan ang pagpapakilala ng mga JavaScript framework upang magtuon sa mga pangunahing kasanayan na kinakailangan bilang isang web developer bago gumamit 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 konstruktibong feedback!
> Bisitahin ang aming [Code of Conduct](CODE_OF_CONDUCT.md) at [Contributing](CONTRIBUTING.md) na mga alituntunin. Malugod naming tinatanggap ang inyong mga konstruktibong puna!
## 🧭 Offline access
## 🧭 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 magsisilbi sa port 3000 sa iyong localhost: `localhost:3000`.
## 📘 PDF
Ang PDF ng lahat ng mga aralin ay matatagpuan [dito](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Makikita ang PDF ng lahat ng mga aralin [dito](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Iba Pang Kurso
Ang aming team ay gumagawa ng iba pang mga kurso! Tingnan ang:
Ang aming koponan ay gumagawa ng iba pang mga kurso! Tingnan ang:
- [Generative AI for Beginners](https://aka.ms/genai-beginners)
- [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
@ -203,4 +206,4 @@ Ang repository na ito ay lisensyado sa ilalim ng MIT license. Tingnan ang [LICEN
---
**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, 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 maaaring magmula sa paggamit ng pagsasaling ito.
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, 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.
[](https://discord.com/invite/ByRwuEEgH4)
ان وسائل کو استعمال کرنے کے لیے درج ذیل مراحل پر عمل کریں:
1. **ریپوزٹری کو فورک کریں**: [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) پر کلک کریں
1. **ریپوزٹری کو فورک کریں**: یہاں کلک کریں [](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)
# ویب ڈویلپمنٹ برائے ابتدائی - ایک نصاب
مائیکروسافٹ کلاؤڈ ایڈووکیٹس کے 12 ہفتوں کے جامع کورس کے ساتھ ویب ڈویلپمنٹ کی بنیادی باتیں سیکھیں۔ 24 اسباق میں جاوا اسکرپٹ، CSS، اور HTML کو عملی منصوبوں جیسے ٹیراریئمز، براؤزر ایکسٹینشنز، اور اسپیس گیمز کے ذریعے سکھایا گیا ہے۔ کوئزز، مباحثے، اور عملی اسائنمنٹس کے ذریعے اپنی مہارت کو بہتر بنائیں اور اپنے علم کو مضبوط کریں۔ آج ہی اپنے کوڈنگ کے سفر کا آغاز کریں!
مائیکروسافٹ کلاؤڈ ایڈووکیٹس کے 12 ہفتوں کے جامع کورس کے ساتھ ویب ڈویلپمنٹ کی بنیادی باتیں سیکھیں۔ 24 اسباق میں جاوا اسکرپٹ، CSS، اور HTML کو عملی منصوبوں جیسے ٹیراریئمز، براؤزر ایکسٹینشنز، اور اسپیس گیمز کے ذریعے سکھایا گیا ہے۔ کوئزز، مباحثے، اور عملی اسائنمنٹس کے ذریعے اپنی مہارت کو بہتر بنائیں اور علم کو مؤثر طریقے سے برقرار رکھیں۔ آج ہی اپنے کوڈنگ کے سفر کا آغاز کریں!
#### 🧑🎓 _کیا آپ طالب علم ہیں؟_
[**اسٹوڈنٹ ہب صفحہ**](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) پر جائیں جہاں آپ کو ابتدائی وسائل، اسٹوڈنٹ پیکس، اور مفت سرٹیفکیٹ واؤچر حاصل کرنے کے طریقے ملیں گے۔ یہ وہ صفحہ ہے جسے آپ بک مارک کرنا چاہیں گے اور وقتاً فوقتاً چیک کریں گے کیونکہ ہم ہر ماہ مواد کو تبدیل کرتے ہیں۔
### 📣 اعلان - جاوا اسکرپٹ کے لیے _نیا نصاب_ جنریٹیو 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) پر جائیں اور شروع کریں!
## 🌱 شروعات کریں
## 🌱 شروعات کرنا
> **اساتذہ**، ہم نے [کچھ تجاویز شامل کی ہیں](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) میں جہاں ہمارے ماڈریٹرز کی ٹیم آپ کے سوالات کے جوابات دینے کے لیے دستیاب ہوگی۔
اپنی تعلیم کو مزید آگے بڑھانے کے لیے، ہم [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 اکاؤنٹ میں نصاب کی ایک کاپی کے ساتھ ایک نئی ریپوزٹری بنائے گا۔
@ -88,21 +85,21 @@ CO_OP_TRANSLATOR_METADATA:
#### نصاب کو Codespace میں چلانا
اس ریپوزٹری کی اپنی کاپی میں جو آپ نے بنائی، **Code** بٹن پر کلک کریں اور **Open with Codespaces** کو منتخب کریں۔ یہ آپ کے لیے کام کرنے کے لیے ایک نیا Codespace بنائے گا۔
اس ریپوزٹری کی اپنی کاپی میں جو آپ نے بنائی ہے، **Code** بٹن پر کلک کریں اور **Open with Codespaces** کو منتخب کریں۔ یہ آپ کے کام کے لیے ایک نیا Codespace بنائے گا۔
اس نصاب کو اپنے کمپیوٹر پر مقامی طور پر چلانے کے لیے، آپ کو ایک ٹیکسٹ ایڈیٹر، ایک براؤزر، اور ایک کمانڈ لائن ٹول کی ضرورت ہوگی۔ ہمارا پہلا سبق، [پروگرامنگ لینگویجز اور ٹولز کا تعارف](../../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) کو اپنے ایڈیٹر کے طور پر استعمال کریں، جس میں ایک بلٹ ان [ٹرمینل](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 کو کاپی کرکے کر سکتے ہیں:
<imgsrc="./images/createcodespace.png"alt="Copy your repository URL"style="width:270px;"/>
[!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) کے اندر [ٹرمینل](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) کھولیں اور درج ذیل کمانڈ چلائیں، `<your-repository-url>` کو اس URL سے تبدیل کریں جو آپ نے ابھی کاپی کیا ہے:
```bash
git clone <your-repository-url>
@ -121,43 +118,43 @@ CO_OP_TRANSLATOR_METADATA:
- اختیاری اضافی ویڈیو
- پری سبق وارم اپ کوئز
- تحریری سبق
- پروجیکٹ پر مبنی اسباق کے لیے، پروجیکٹ بنانے کے لیے مرحلہ وار رہنما
- پروجیکٹ پر مبنی اسباق کے لیے، پروجیکٹ بنانے کے لیے مرحلہ وار گائیڈز
- علم کی جانچ
- ایک چیلنج
- اضافی مطالعہ
- اسائنمنٹ
- [پوسٹ سبق کوئز](https://ff-quizzes.netlify.app/)
> **کوئزز کے بارے میں نوٹ**: تمام کوئزز Quiz-app فولڈر میں موجود ہیں، کل 48 کوئزز، ہر ایک میں تین سوالات۔ یہ [یہاں](https://ff-quizzes.netlify.app/) دستیاب ہیں۔ کوئز ایپ کو مقامی طور پر چلایا جا سکتا ہے یا Azure پر تعینات کیا جا سکتا ہے؛ `quiz-app` فولڈر میں ہدایات پر عمل کریں۔
> **کوئزز کے بارے میں ایک نوٹ**: تمام کوئزز Quiz-app فولڈر میں موجود ہیں، کل 48 کوئزز، ہر ایک میں تین سوالات ہیں۔ وہ [یہاں](https://ff-quizzes.netlify.app/) دستیاب ہیں۔ کوئز ایپ کو مقامی طور پر چلایا جا سکتا ہے یا Azure پر تعینات کیا جا سکتا ہے؛ `quiz-app` فولڈر میں ہدایات پر عمل کریں۔
## 🗃️ اسباق
| | پروجیکٹ کا نام | سکھائے گئے تصورات | سیکھنے کے مقاصد | منسلک سبق | مصنف |
| 01 | شروعات | پروگرامنگ اور ٹولز کا تعارف | زیادہ تر پروگرامنگ زبانوں کے بنیادی اصول اور وہ سافٹ ویئر سیکھیں جو پیشہ ور ڈویلپرز اپنے کام کے لیے استعمال کرتے ہیں | [پروگرامنگ لینگویجز اور ٹولز کا تعارف](./1-getting-started-lessons/1-intro-to-programming-languages/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) | فلور |
| 04 | جاوا اسکرپٹ کی بنیادی باتیں | جاوا اسکرپٹ ڈیٹا کی اقسام | جاوا اسکرپٹ ڈیٹا کی اقسام کی بنیادی باتیں | [ڈیٹا کی اقسام](./2-js-basics/1-data-types/README.md) | جیسمن |
| 05 | جاوا اسکرپٹ کی بنیادی باتیں | فنکشنز اور میتھڈز | ایپلیکیشن کے لاجک فلو کو منظم کرنے کے لیے فنکشنز اور میتھڈز کے بارے میں سیکھیں | [فنکشنز اور میتھڈز](./2-js-basics/2-functions-methods/README.md) | جیسمن اور کرسٹوفر |
| 06 | جاوا اسکرپٹ کی بنیادی باتیں | جاوا اسکرپٹ کے ساتھ فیصلے کرنا | اپنے کوڈ میں حالات پیدا کرنے کے لیے فیصلہ سازی کے طریقے سیکھیں | [فیصلے کرنا](./2-js-basics/3-making-decisions/README.md) | جیسمن |
| 07 | جاوا اسکرپٹ کی بنیادی باتیں | Arrays اور Loops | جاوا اسکرپٹ میں ڈیٹا کے ساتھ کام کرنے کے لیے Arrays اور Loops کا استعمال کریں | [Arrays اور Loops](./2-js-basics/4-arrays-loops/README.md) | جیسمن |
| 06 | جاوا اسکرپٹ کی بنیادی باتیں | جاوا اسکرپٹ کے ساتھ فیصلے کرنا | فیصلہ سازی کے طریقوں کا استعمال کرتے ہوئے اپنے کوڈ میں حالات کیسے بنائیں | [فیصلے کرنا](./2-js-basics/3-making-decisions/README.md) | جیسمن |
| 07 | جاوا اسکرپٹ کی بنیادی باتیں | Arrays اور Loops | جاوا اسکرپٹ میں Arrays اور Loops کا استعمال کرتے ہوئے ڈیٹا کے ساتھ کام کریں | [Arrays اور Loops](./2-js-basics/4-arrays-loops/README.md) | جیسمن |
| 08 | [ٹیراریئم](./3-terrarium/solution/README.md) | HTML کی مشق | ایک آن لائن ٹیراریئم بنانے کے لیے HTML بنائیں، لے آؤٹ بنانے پر توجہ مرکوز کریں | [HTML کا تعارف](./3-terrarium/1-intro-to-html/README.md) | جین |
| 09 | [ٹیراریئم](./3-terrarium/solution/README.md) | CSS کی مشق | آن لائن ٹیراریئم کو اسٹائل کرنے کے لیے CSS بنائیں، CSS کی بنیادی باتوں پر توجہ مرکوز کریں بشمول صفحہ کو ریسپانسیو بنانا | [CSS کا تعارف](./3-terrarium/2-intro-to-css/README.md) | جین |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | جاوا اسکرپٹ کلوزرز، ڈی او ایم مینپولیشن | جاوا اسکرپٹ کو اس طرح بنائیں کہ ٹیریریم ڈریگ/ڈراپ انٹرفیس کے طور پر کام کرے، کلوزرز اور ڈی او ایم مینپولیشن پر توجہ مرکوز کرتے ہوئے | [جاوا اسکرپٹ کلوزرز، ڈی او ایم مینپولیشن](./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 |
| 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 |
| 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 |
| 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 |
## 🏫 تدریسی اصول
@ -172,16 +169,16 @@ CO_OP_TRANSLATOR_METADATA:
پروجیکٹس کے ساتھ مواد کو ہم آہنگ کرنے سے طلباء کے لیے عمل زیادہ دلچسپ ہو جاتا ہے اور تصورات کو یاد رکھنے کی صلاحیت میں اضافہ ہوتا ہے۔ ہم نے جاوا اسکرپٹ کے بنیادی اصولوں کو متعارف کرانے کے لیے کئی ابتدائی اسباق لکھے ہیں، جنہیں "[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`.
leestott
1 week ago
committed by
GitHub