msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

🌐 Update translations via Co-op Translator

Browse Source
pull/1477/head
leestott 1 week ago committed by GitHub
parent b6f6711f73
commit c2dc528cf8
5 changed files with 288 additions and 285 deletions
Show Stats Download Patch File Download Diff File

113
translations/ar/README.md
Unescape View File

@ -1,8 +1,8 @@
<!-- <!--
CO_OP_TRANSLATOR_METADATA: CO_OP_TRANSLATOR_METADATA:
{ {
"original_hash": "ae32f39b259a395c57b209d9e5b8c10b", "original_hash": "5e6642396cc39faad64b67c6cd9af37b",
"translation_date": "2025-08-28T00:19:05+00:00", "translation_date": "2025-08-28T00:40:55+00:00",
"source_file": "README.md", "source_file": "README.md",
"language_code": "ar" "language_code": "ar"
} }
@ -23,20 +23,20 @@ CO_OP_TRANSLATOR_METADATA:
[![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. **قم بعمل Fork للمستودع**: انقر على [![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) 1. **قم بعمل Fork للمستودع**: انقر على [![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` 2. **استنسخ المستودع**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**انضم إلى Discord الخاص بـ Azure AI Foundry وتواصل مع الخبراء والمطورين الآخرين**](https://discord.com/invite/ByRwuEEgH4) 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. استمتع بالاختبارات، والمناقشات، والواجبات العملية. عزز مهاراتك واحتفظ بالمعرفة من خلال منهجنا القائم على المشاريع. ابدأ رحلتك البرمجية اليوم!
#### 🧑‍🎓 _هل أنت طالب؟_ #### 🧑‍🎓 _هل أنت طالب؟_
قم بزيارة [**صفحة مركز الطلاب**](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) حيث ستجد موارد للمبتدئين، وحزم للطلاب، وحتى طرق للحصول على قسيمة شهادة مجانية. هذه الصفحة تستحق الإشارة المرجعية والعودة إليها من وقت لآخر حيث يتم تحديث المحتوى شهريًا.
### 📣 إعلان - _منهج جديد_ حول الذكاء الاصطناعي التوليدي لـ JavaScript تم إطلاقه للتو ### 📣 إعلان - _منهج جديد_ حول الذكاء الاصطناعي التوليدي لـ JavaScript تم إصداره للتو
لا تفوت منهجنا الجديد حول الذكاء الاصطناعي التوليدي! لا تفوت منهجنا الجديد حول الذكاء الاصطناعي التوليدي!
@ -54,33 +54,36 @@ CO_OP_TRANSLATOR_METADATA:
<img src="./images/character.png" width="600px" /> <img src="./images/character.png" width="600px" />
</div> </div>
تتضمن كل درس مهمة لإكمالها، واختبار معرفة، وتحديًا لتعلم موضوعات مثل: تتضمن كل درس:
- التوجيه وهندسة التوجيه - مهمة لإكمالها
- إنشاء تطبيقات نصوص وصور - اختبار معرفة
- تطبيقات البحث - تحدٍ لتعلم مواضيع مثل:
- التوجيه وهندسة التوجيه
- إنشاء تطبيقات نصوص وصور
- تطبيقات البحث
قم بزيارة [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 للمستودع**: انقر على زر "Fork" في الزاوية العلوية اليمنى من هذه الصفحة. 1. **قم بعمل Fork للمستودع**: انقر على زر "Fork" في الزاوية العلوية اليمنى من هذه الصفحة.
2. **انسخ المستودع**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. **استنسخ المستودع**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### تشغيل المنهج في Codespace #### تشغيل المنهج في Codespace
@ -90,11 +93,11 @@ CO_OP_TRANSLATOR_METADATA:
#### تشغيل المنهج محليًا على جهاز الكمبيوتر الخاص بك #### تشغيل المنهج محليًا على جهاز الكمبيوتر الخاص بك
لتشغيل هذا المنهج محليًا على جهاز الكمبيوتر الخاص بك، ستحتاج إلى محرر نصوص، ومتصفح، وأداة سطر أوامر. سيرشدك درسنا الأول، [مقدمة إلى لغات البرمجة والأدوات](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/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** ونسخ الرابط:
<img src="./images/createcodespace.png" alt="Copy your repository URL" style="width:270px;"/> <img src="./images/createcodespace.png" alt="Copy your repository URL" style="width:270px;"/>
@ -104,22 +107,22 @@ CO_OP_TRANSLATOR_METADATA:
git clone <your-repository-url> 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 > * [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) - لمساعدتك في كتابة الكود بشكل أسرع > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - لمساعدتك على كتابة الكود بشكل أسرع
## 📂 كل درس يتضمن: ## 📂 كل درس يتضمن:
- رسم تخطيطي اختياري - رسم توضيحي اختياري
- فيديو تكميلي اختياري - فيديو إضافي اختياري
- اختبار تمهيدي قبل الدرس - اختبار تمهيدي قبل الدرس
- درس مكتوب - درس مكتوب
- بالنسبة للدروس القائمة على المشاريع، إرشادات خطوة بخطوة حول كيفية بناء المشروع - بالنسبة للدروس القائمة على المشاريع، إرشادات خطوة بخطوة حول كيفية بناء المشروع
- اختبارات المعرفة - اختبارات المعرفة
- تحدي - تحدٍ
- قراءة إضافية - قراءة إضافية
- واجب - واجب
- [اختبار ما بعد الدرس](https://ff-quizzes.netlify.app/) - [اختبار ما بعد الدرس](https://ff-quizzes.netlify.app/)
@ -130,30 +133,30 @@ CO_OP_TRANSLATOR_METADATA:
| | اسم المشروع | المفاهيم التي يتم تدريسها | الأهداف التعليمية | رابط الدرس | المؤلف | | | اسم المشروع | المفاهيم التي يتم تدريسها | الأهداف التعليمية | رابط الدرس | المؤلف |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | | :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 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 | | 02 | البداية | أساسيات GitHub، بما في ذلك العمل مع فريق | كيفية استخدام GitHub في مشروعك، وكيفية التعاون مع الآخرين على قاعدة الكود | [مقدمة إلى GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | البداية | الوصولية | تعلم أساسيات الوصولية في الويب | [أساسيات الوصولية](/1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 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 | أنواع البيانات في JavaScript | أساسيات أنواع البيانات في JavaScript | [أنواع البيانات](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | أساسيات JS | الدوال والطرق | تعلم كيفية استخدام الدوال والطرق لإدارة تدفق منطق التطبيق | [الدوال والطرق](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | | 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 | | 06 | أساسيات JS | اتخاذ القرارات باستخدام JS | تعلم كيفية إنشاء شروط في الكود باستخدام طرق اتخاذ القرار | [اتخاذ القرارات](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | أساسيات JS | المصفوفات والحلقات | العمل مع البيانات باستخدام المصفوفات والحلقات في JavaScript | [المصفوفات والحلقات](/2-js-basics/4-arrays-loops/README.md) | Jasmine | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 API، المستخدمة لرسم العناصر على الشاشة | [الرسم على اللوحة](/6-space-game/2-drawing-to-canvas/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 API | [تحريك العناصر](/6-space-game/3-moving-elements-around/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 | | 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 | | 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 | | 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 | | 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 | | 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 |
## 🏫 التعليم ## 🏫 التعليم
@ -166,18 +169,18 @@ CO_OP_TRANSLATOR_METADATA:
> 🎓 يمكنك أخذ الدروس الأولى في هذا المنهج كـ [مسار تعلم](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) على Microsoft Learn! > 🎓 يمكنك أخذ الدروس الأولى في هذا المنهج كـ [مسار تعلم](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)".
> قم بزيارة [مدونة قواعد السلوك](CODE_OF_CONDUCT.md) و[إرشادات المساهمة](CONTRIBUTING.md). نرحب بملاحظاتك البناءة! > قم بزيارة [مدونة قواعد السلوك](CODE_OF_CONDUCT.md) و[إرشادات المساهمة](CONTRIBUTING.md). نرحب بملاحظاتك البناءة!
## 🧭 الوصول دون اتصال ## 🧭 الوصول دون اتصال
يمكنك تشغيل هذا التوثيق دون اتصال باستخدام [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`.
## 📘 PDF ## 📘 PDF
@ -198,8 +201,8 @@ CO_OP_TRANSLATOR_METADATA:
- [الأمن السيبراني للمبتدئين](https://github.com/microsoft/Security-101) - [الأمن السيبراني للمبتدئين](https://github.com/microsoft/Security-101)
- [تطوير الويب للمبتدئين](https://aka.ms/webdev-beginners) - [تطوير الويب للمبتدئين](https://aka.ms/webdev-beginners)
- [إنترنت الأشياء للمبتدئين](https://aka.ms/iot-beginners) - [إنترنت الأشياء للمبتدئين](https://aka.ms/iot-beginners)
- [تطوير XR للمبتدئين](https://github.com/microsoft/xr-development-for-beginners) - [تطوير الواقع الممتد للمبتدئين](https://github.com/microsoft/xr-development-for-beginners)
- [إتقان GitHub Copilot للاستخدام التعاوني](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming) - [إتقان 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) - [إتقان GitHub Copilot لمطوري C#/.NET](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
- [اختر مغامرتك مع Copilot](https://github.com/microsoft/CopilotAdventures) - [اختر مغامرتك مع Copilot](https://github.com/microsoft/CopilotAdventures)
@ -210,4 +213,4 @@ CO_OP_TRANSLATOR_METADATA:
--- ---
**إخلاء المسؤولية**: **إخلاء المسؤولية**:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة. تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.

96
translations/ja/README.md
Unescape View File

@ -1,8 +1,8 @@
<!-- <!--
CO_OP_TRANSLATOR_METADATA: CO_OP_TRANSLATOR_METADATA:
{ {
"original_hash": "ae32f39b259a395c57b209d9e5b8c10b", "original_hash": "5e6642396cc39faad64b67c6cd9af37b",
"translation_date": "2025-08-28T00:22:37+00:00", "translation_date": "2025-08-28T00:45:54+00:00",
"source_file": "README.md", "source_file": "README.md",
"language_code": "ja" "language_code": "ja"
} }
@ -32,15 +32,15 @@ CO_OP_TRANSLATOR_METADATA:
Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ開発の基礎を学びましょう。24のレッスンでは、JavaScript、CSS、HTMLを使った実践的なプロジェクト（テラリウム、ブラウザ拡張機能、宇宙ゲームなど）を通じて学びます。クイズ、ディスカッション、実践課題を通じてスキルを向上させ、プロジェクトベースの学習法で知識の定着を促進します。今すぐコーディングの旅を始めましょう！ Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ開発の基礎を学びましょう。24のレッスンでは、JavaScript、CSS、HTMLを使った実践的なプロジェクト（テラリウム、ブラウザ拡張機能、宇宙ゲームなど）を通じて学びます。クイズ、ディスカッション、実践課題を通じてスキルを向上させ、プロジェクトベースの学習法で知識の定着を促進します。今すぐコーディングの旅を始めましょう！
#### 🧑‍🎓 _学生の皆さんへ_ #### 🧑‍🎓 _学生の方へ_
[**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) を訪問してください。初心者向けリソース、学生向けパック、さらには無料の認定証バウチャーを取得する方法が見つかります。このページはブックマークして、毎月内容が更新されるので定期的にチェックしてください。
### 📣 お知らせ - _新しいカリキュラム_「JavaScript向け生成AI」がリリースされました ### 📣 お知らせ - _新しいカリキュラム_「JavaScript向け生成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) を訪問して学び始めましょう！
<div> <div>
<img src="./images/background.png" width="600px" /> <img src="./images/background.png" width="600px" />
@ -48,7 +48,7 @@ Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ
- 基礎からRAGまでを網羅したレッスン - 基礎からRAGまでを網羅したレッスン
- GenAIとコンパニオンアプリを使って歴史上の人物と対話 - GenAIとコンパニオンアプリを使って歴史上の人物と対話
- 楽しく魅力的なストーリーでタイムトラベル体験！ - 楽しく魅力的なストーリーでタイムトラベル体験
<div> <div>
<img src="./images/character.png" width="600px" /> <img src="./images/character.png" width="600px" />
@ -64,15 +64,15 @@ Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ
- テキストと画像アプリの生成 - テキストと画像アプリの生成
- 検索アプリ - 検索アプリ
[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) を探索し、追加の学習資料を見つけることを強くお勧めします。
@ -89,15 +89,15 @@ Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ
#### Codespaceでカリキュラムを実行する #### Codespaceでカリキュラムを実行する
作成したリポジトリの **Code** ボタンをクリックし、**Open with Codespaces** を選択してください。これにより、作業用の新しいCodespaceが作成されます。 作成したリポジトリのコピーで、**Code** ボタンをクリックし、**Open with Codespaces** を選択してください。これにより、作業用の新しいCodespaceが作成されます。
<img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/> <img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/>
#### ローカルコンピュータでカリキュラムを実行する #### ローカルコンピュータでカリキュラムを実行する
ローカルコンピュータでこのカリキュラムを実行するには、テキストエディタ、ブラウザ、コマンドラインツールが必要です。最初のレッスン[プログラミング言語とツールの紹介](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/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)で、内蔵の[ターミナル](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](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)からダウンロードできます。
1. リポジトリをコンピュータにクローンします。**Code** ボタンをクリックしてURLをコピーしてください: 1. リポジトリをコンピュータにクローンします。**Code** ボタンをクリックしてURLをコピーしてください:
@ -113,7 +113,7 @@ Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ
> 推奨される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内でプレビューするため > * [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) - コードを書くスピードを向上させるため > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - コードを書くスピードを向上させるため
## 📂 各レッスンには以下が含まれます: ## 📂 各レッスンには以下が含まれます:
@ -129,36 +129,36 @@ Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ
- 課題 - 課題
- [レッスン後のクイズ](https://ff-quizzes.netlify.app/) - [レッスン後のクイズ](https://ff-quizzes.netlify.app/)
> **クイズについての注意**: すべてのクイズはQuiz-appフォルダに含まれており、合計48個のクイズが各3問ずつあります。[こちら](https://ff-quizzes.netlify.app/)で利用可能で、ローカルで実行するかAzureにデプロイすることができます。`quiz-app`フォルダ内の指示に従ってください。 > **クイズについての注意**: すべてのクイズはQuiz-appフォルダに含まれており、合計48個のクイズが各3問ずつあります。[こちら](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 | | 02 | 始め方 | GitHubの基本、チームでの作業 | プロジェクトでGitHubを使用する方法、コードベースで他の人と協力する方法 | [GitHubの紹介](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | 始め方 | アクセシビリティ | ウェブアクセシビリティの基本を学ぶ | [アクセシビリティの基本](/1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 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の基本 | JavaScriptのデータ型 | JavaScriptのデータ型の基本 | [データ型](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JSの基本 | 関数とメソッド | アプリケーションのロジックフローを管理するための関数とメソッドについて学ぶ | [関数とメソッド](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | | 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 | | 06 | JSの基本 | JSでの意思決定 | 意思決定方法を使用してコード内で条件を作成する方法を学ぶ | [意思決定](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JSの基本 | 配列とループ | JavaScriptで配列とループを使用してデータを操作する | [配列とループ](/2-js-basics/4-arrays-loops/README.md) | Jasmine | | 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 | | 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 | | 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 | | 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 | | 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要素を構築します | [API、フォーム、ローカルストレージ](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | | 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | フォームの作成、APIの呼び出し、ローカルストレージへの変数保存 | ローカルストレージに保存された変数を使用して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 | | 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 APIについて学びます | [キャンバスへの描画](/6-space-game/2-drawing-to-canvas/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) | 画面上の要素の移動 | デカルト座標とCanvas APIを使用して要素に動きを与える方法を学びます | [要素の移動](/6-space-game/3-moving-elements-around/README.md) | Chris | | 17 | [Space Game](./6-space-game/solution/README.md) | 画面上の要素を移動させる | カートesian座標と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 | | 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 | | 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 | | 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 | | 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 | | 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 |
## 🏫 教育方針 ## 🏫 教育方針
@ -167,31 +167,31 @@ Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ
* プロジェクトベースの学習 * プロジェクトベースの学習
* 頻繁なクイズ * 頻繁なクイズ
このプログラムでは、JavaScript、HTML、CSSの基本を教えるだけでなく、現在のウェブ開発者が使用する最新のツールや技術も学べます。学生は、タイピングゲーム、バーチャルテラリウム、エコフレンドリーなブラウザ拡張機能、スペースインベーダースタイルのゲーム、ビジネス向けのバンキングアプリを構築することで、実践的な経験を積むことができます。シリーズの終わりまでに、学生はウェブ開発の確かな理解を得ることができます。 このプログラムでは、JavaScript、HTML、CSSの基礎だけでなく、現代のウェブ開発者が使用する最新のツールや技術も教えます。学生は、タイピングゲーム、バーチャルテラリウム、エコフレンドリーなブラウザ拡張機能、スペースインベーダー風のゲーム、ビジネス向けのバンキングアプリを構築することで、実践的な経験を積む機会を得られます。このシリーズを終える頃には、ウェブ開発に関する確かな理解を得ることができます。
> 🎓 このカリキュラムの最初のいくつかのレッスンは、Microsoft Learnの[学習パス](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)として受講できます！ > 🎓 このカリキュラムの最初のいくつかのレッスンは、Microsoft Learnの[学習パス](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)"というビデオチュートリアルコレクションのビデオと組み合わせています。このコレクションの一部の著者は、このカリキュラムにも貢献しています。 プロジェクトに沿った内容を確保することで、学生にとって学習プロセスがより魅力的になり、概念の定着が促進されます。また、JavaScriptの基本を紹介するいくつかのスターターレッスンを作成し、"[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"というビデオチュートリアルコレクションのビデオと組み合わせています。このコレクションの一部の著者は、このカリキュラムにも貢献しています。
さらに、授業前の低リスクなクイズは、学生がトピックを学ぶ意図を設定するのに役立ち、授業後の2回目のクイズはさらに定着を促進します。このカリキュラムは柔軟で楽しいものになるよう設計されており、全体または一部を受講することができます。プロジェクトは小さなものから始まり、12週間のサイクルの終わりには徐々に複雑になっていきます。 さらに、授業前の低リスクなクイズは、学生がトピックを学ぶ意図を設定するのに役立ち、授業後の2回目のクイズは概念のさらなる定着を確保します。このカリキュラムは柔軟で楽しいものになるよう設計されており、全体または部分的に受講することができます。プロジェクトは小さなものから始まり、12週間のサイクルの終わりには徐々に複雑になっていきます。
私たちは、JavaScriptフレームワークを導入することを意図的に避け、フレームワークを採用する前に必要なウェブ開発者としての基本スキルに集中しています。このカリキュラムを修了した後の次のステップとして、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.md)と[貢献ガイドライン](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 ## 📘 PDF
すべてのレッスンのPDFは[こちら](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)からダウンロードできます。 すべてのレッスンのPDFは[こちら](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)から入手できます。
## 🎒 その他のコース ## 🎒 その他のコース
私たちのチームは他にもコースを提供しています！ぜひチェックしてください： 私たちのチームは他にもコースを制作しています！以下をご覧ください：
- [Generative AI for Beginners](https://aka.ms/genai-beginners) - [Generative AI for Beginners](https://aka.ms/genai-beginners)
- [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet) - [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
@ -215,4 +215,4 @@ Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ
--- ---
**免責事項**: **免責事項**:
この文書は、AI翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてお考えください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解釈について、当社は責任を負いません。 この文書は、AI翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確さが含まれる可能性があります。元の言語で記載された原文が正式な情報源と見なされるべきです。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤認について、当社は一切の責任を負いません。

138
translations/mo/README.md
Unescape View File

@ -1,8 +1,8 @@
<!-- <!--
CO_OP_TRANSLATOR_METADATA: CO_OP_TRANSLATOR_METADATA:
{ {
"original_hash": "ae32f39b259a395c57b209d9e5b8c10b", "original_hash": "5e6642396cc39faad64b67c6cd9af37b",
"translation_date": "2025-08-28T00:21:29+00:00", "translation_date": "2025-08-28T00:43:28+00:00",
"source_file": "README.md", "source_file": "README.md",
"language_code": "mo" "language_code": "mo"
} }
@ -24,19 +24,19 @@ CO_OP_TRANSLATOR_METADATA:
[![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. **Fork 儲存庫**：點擊 [![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) 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. **Clone 儲存庫**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 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)
# 初學者的網頁開發課程 - 教學大綱 # 初學者的網頁開發課程 - 一套完整的課程
透過 Microsoft Cloud Advocates 提供的 12 週完整課程，學習網頁開發的基礎知識。每個 24 節課程都透過實作專案（如生態瓶、瀏覽器擴充功能和太空遊戲）深入探討 JavaScript、CSS 和 HTML。參與測驗、討論和實際作業，提升技能並加強知識吸收。立即開始您的程式設計旅程吧！ 透過 Microsoft Cloud Advocates 提供的 12 週全面課程，學習網頁開發的基礎知識。每個 24 節課程都透過實作項目（如生態瓶、瀏覽器擴展和太空遊戲）深入探討 JavaScript、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)，您可以找到初學者資源、學生套件，甚至獲得免費證書兌換券的方法。這是您想要收藏並定期查看的頁面，因為我們每月都會更新內容。
### 📣 公告 - _新課程_ 關於 JavaScript 的生成式 AI 已正式推出 ### 📣 公告 - _新的課程_ 關於 JavaScript 的生成式 AI 已經發布
不要錯過我們的生成式 AI 新課程！ 不要錯過我們的生成式 AI 新課程！
@ -48,7 +48,7 @@ CO_OP_TRANSLATOR_METADATA:
- 課程涵蓋從基礎到 RAG 的所有內容。 - 課程涵蓋從基礎到 RAG 的所有內容。
- 使用生成式 AI 和我們的伴侶應用程式與歷史人物互動。 - 使用生成式 AI 和我們的伴侶應用程式與歷史人物互動。
- 有趣且引人入勝的故事情節，您將進行時光旅行！ - 有趣且引人入勝的敘事，您將進行時光旅行！
<div> <div>
<img src="./images/character.png" width="600px" /> <img src="./images/character.png" width="600px" />
@ -57,103 +57,103 @@ CO_OP_TRANSLATOR_METADATA:
每節課都包含作業、知識檢查和挑戰，幫助您學習以下主題： 每節課都包含作業、知識檢查和挑戰，幫助您學習以下主題：
- 提示設計與提示工程 - 提示設計與提示工程
- 文本與圖像應用程式生成 - 文本與圖像應用程式生成
- 搜尋應用程式 - 搜索應用程式
造訪 [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 儲存庫**：點擊頁面右上角的 "Fork" 按鈕。 1. **分叉此倉庫**：點擊頁面右上角的 "Fork" 按鈕。
2. **Clone 儲存庫**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. **克隆此倉庫**：`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### 在 Codespace 中運行課程 #### 在 Codespace 中運行課程
在您建立的儲存庫副本中，點擊 **Code** 按鈕並選擇 **Open with Codespaces**。這將為您建立一個新的 Codespace 以供使用。 在您創建的倉庫副本中，點擊 **Code** 按鈕並選擇 **Open with Codespaces**。這將為您創建一個新的 Codespace 以供使用。
<img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/> <img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/>
#### 在本地電腦上運行課程 #### 在本地電腦上運行課程
要在本地電腦上運行此課程，您需要一個文字編輯器、瀏覽器和命令行工具。我們的第一節課 [程式語言與工具介紹](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/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) 作為編輯器，它還內建了 [終端機](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： 1. 將倉庫克隆到您的電腦。您可以點擊 **Code** 按鈕並複製 URL：
<img src="./images/createcodespace.png" alt="Copy your repository URL" style="width:270px;"/> <img src="./images/createcodespace.png" alt="Copy your repository URL" style="width:270px;"/>
然後，在 [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) 的 [終端](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) 中運行以下命令，將 `<your-repository-url>` 替換為您剛複製的 URL：
```bash ```bash
git clone <your-repository-url> git clone <your-repository-url>
``` ```
2. 在 Visual Studio Code 中打開資料夾。您可以點擊 **檔案** > **打開資料夾**，選擇您剛克隆的資料夾。 2. 在 Visual Studio Code 中打開文件夾。您可以點擊 **文件** > **打開文件夾**，然後選擇您剛克隆的文件夾。
> 推薦的 Visual Studio Code 擴充功能： > 推薦的 Visual Studio Code 擴展：
> >
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 在 Visual Studio Code 中預覽 HTML 頁面 > * [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) - 幫助您更快撰寫程式碼 > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 幫助您更快地編寫程式碼
## 📂 每節課包含： ## 📂 每節課包含：
- 可選的手繪筆記 - 可選的手繪筆記
- 可選的補充影片 - 可選的補充視頻
- 課前暖身測驗 - 課前熱身測驗
- 書面課程 - 書面課程
- 專案型課程的逐步指南 - 對於基於項目的課程，提供逐步指南以完成項目
- 知識檢查 - 知識檢查
- 挑戰 - 挑戰
- 補充閱讀 - 補充閱讀
- 作業 - 作業
- [課後測驗](https://ff-quizzes.netlify.app/) - [課後測驗](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 | | 02 | 開始使用 | GitHub 基礎，包含團隊合作 | 學習如何在項目中使用 GitHub，以及如何與他人協作代碼庫 | [GitHub 基礎](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | 入門課程 | 無障礙設計 | 學習網頁無障礙設計的基礎知識 | [無障礙設計基礎](/1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 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 基礎 | JavaScript 資料類型 | JavaScript 資料類型的基礎知識 | [資料類型](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS 基礎 | 函數與方法 | 學習如何使用函數與方法管理應用程式的邏輯流程 | [函數與方法](/2-js-basics/2-functions-methods/README.md) | Jasmine 和 Christopher | | 05 | JS 基礎 | 函數與方法 | 學習如何使用函數與方法管理應用程式的邏輯流程 | [函數與方法](./2-js-basics/2-functions-methods/README.md) | Jasmine 和 Christopher |
| 06 | JS 基礎 | 使用 JS 做出決策 | 學習如何使用決策方法在程式碼中建立條件 | [做出決策](/2-js-basics/3-making-decisions/README.md) | Jasmine | | 06 | JS 基礎 | 使用 JS 做出決策 | 學習如何使用決策方法在代碼中創建條件 | [做出決策](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS 基礎 | 陣列與迴圈 | 使用 JavaScript 中的陣列與迴圈處理資料 | [陣列與迴圈](/2-js-basics/4-arrays-loops/README.md) | Jasmine | | 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 | | 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 | | 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 | | 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 | | 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 | [API、表單與本地存儲](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | | 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 建立表單、呼叫 API 並將變數儲存在本地儲存中 | 建立瀏覽器擴充功能的 JavaScript 元素，使用儲存在本地儲存中的變數來呼叫 API | [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 | | 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 遊戲開發 | 學習使用類別與組合的繼承，以及發布/訂閱模式，為建立遊戲做準備 | [進階遊戲開發介紹](./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 | | 16 | [Space Game](./6-space-game/solution/README.md) | 繪製到 Canvas | 學習使用 Canvas API，將元素繪製到螢幕上 | [繪製到 Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution/README.md) | 移動螢幕上的元素 | 探索如何使用笛卡爾座標與 Canvas API 讓元素產生移動 | [移動螢幕上的元素](/6-space-game/3-moving-elements-around/README.md) | Chris | | 17 | [Space Game](./6-space-game/solution/README.md) | 在螢幕上移動元素 | 探索如何使用笛卡爾座標與 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 | | 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 | | 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 | | 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 | | 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 | | 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 |
## 🏫 教學理念 ## 🏫 教學理念
@ -162,26 +162,26 @@ CO_OP_TRANSLATOR_METADATA:
* 專案導向學習 * 專案導向學習
* 頻繁的小測驗 * 頻繁的小測驗
本課程教授 JavaScript、HTML 和 CSS 的基礎知識，以及當今網頁開發者使用的最新工具與技術。學生將有機會透過建立打字遊戲、虛擬生態瓶、環保瀏覽器擴充功能、太空侵略者風格的遊戲，以及商業銀行應用程式來獲得實作經驗。完成課程後，學生將對網頁開發有扎實的理解。 這個課程教授 JavaScript、HTML 和 CSS 的基礎知識，以及當今網頁開發者使用的最新工具與技術。學生將有機會透過建立打字遊戲、虛擬生態瓶、環保瀏覽器擴充功能、太空侵略者風格的遊戲，以及商業銀行應用程式來獲得實作經驗。到課程結束時，學生將對網頁開發有扎實的理解。
> 🎓 您可以在 Microsoft Learn 上以 [學習路徑](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) 的形式學習本課程的前幾節課！ > 🎓 你可以在 Microsoft Learn 上以 [學習路徑](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) 的形式學習本課程的前幾節課！
透過確保內容與專案相符，學習過程變得更具吸引力，並能增強學生對概念的記憶。我們還撰寫了幾個 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)"。
> 請參閱我們的 [行為準則](CODE_OF_CONDUCT.md) 和 [貢獻指南](CONTRIBUTING.md)。我們歡迎您的建設性反饋！ > 請參閱我們的 [行為準則](CODE_OF_CONDUCT.md) 和 [貢獻指南](CONTRIBUTING.md)。我們歡迎你的建設性反饋！
## 🧭 離線存取 ## 🧭 離線存取
您可以使用 [Docsify](https://docsify.js.org/#/) 離線運行此文件。Fork 此 repo，並在本地機器上 [安裝 Docsify](https://docsify.js.org/#/quickstart)，然後在此 repo 的根目錄中輸入 `docsify serve`。網站將在本地端的 3000 埠上提供服務：`localhost:3000`。 你可以使用 [Docsify](https://docsify.js.org/#/) 離線運行此文件。Fork 此存儲庫，在本地機器上[安裝 Docsify](https://docsify.js.org/#/quickstart)，然後在此存儲庫的根目錄中輸入 `docsify serve`。網站將在本地的 3000 埠上運行：`localhost:3000`。
## 📘 PDF ## 📘 PDF
所有課程的 PDF 可在 [此處](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) 找到。 所有課程的 PDF 可在[這裡](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)找到。
## 🎒 其他課程 ## 🎒 其他課程
@ -199,15 +199,15 @@ CO_OP_TRANSLATOR_METADATA:
- [網頁開發初學者課程](https://aka.ms/webdev-beginners) - [網頁開發初學者課程](https://aka.ms/webdev-beginners)
- [物聯網初學者課程](https://aka.ms/iot-beginners) - [物聯網初學者課程](https://aka.ms/iot-beginners)
- [XR 開發初學者課程](https://github.com/microsoft/xr-development-for-beginners) - [XR 開發初學者課程](https://github.com/microsoft/xr-development-for-beginners)
- [精通 GitHub Copilot 的智能應用](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming) - [精通 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) - [精通 GitHub Copilot 的 C#/.NET 開發者課程](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
- [選擇您的 Copilot 冒險](https://github.com/microsoft/CopilotAdventures) - [選擇你的 Copilot 冒險](https://github.com/microsoft/CopilotAdventures)
## 授權 ## 授權
此存儲庫採用 MIT 授權。詳情請參閱 [LICENSE](../../LICENSE) 文件。 此存儲庫採用 MIT 授權。更多資訊請參閱 [LICENSE](../../LICENSE) 文件。
--- ---
**免責聲明**： **免責聲明**：
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們努力確保翻譯的準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。 本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋不承擔責任。

140
translations/ru/README.md
Unescape View File

@ -1,8 +1,8 @@
<!-- <!--
CO_OP_TRANSLATOR_METADATA: CO_OP_TRANSLATOR_METADATA:
{ {
"original_hash": "ae32f39b259a395c57b209d9e5b8c10b", "original_hash": "5e6642396cc39faad64b67c6cd9af37b",
"translation_date": "2025-08-28T00:18:04+00:00", "translation_date": "2025-08-28T00:39:56+00:00",
"source_file": "README.md", "source_file": "README.md",
"language_code": "ru" "language_code": "ru"
} }
@ -26,15 +26,15 @@ CO_OP_TRANSLATOR_METADATA:
Следуйте этим шагам, чтобы начать использовать эти ресурсы: Следуйте этим шагам, чтобы начать использовать эти ресурсы:
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) 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` 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)
# Веб-разработка для начинающих — учебный курс # Веб-разработка для начинающих — учебный курс
Изучите основы веб-разработки с нашим 12-недельным курсом от Microsoft Cloud Advocates. Каждое из 24 занятий посвящено JavaScript, CSS и HTML через практические проекты, такие как террариумы, расширения для браузеров и космические игры. Участвуйте в викторинах, обсуждениях и практических заданиях. Улучшите свои навыки и оптимизируйте усвоение знаний благодаря нашей эффективной проектной методике обучения. Начните свой путь в программировании уже сегодня! Изучите основы веб-разработки с помощью нашего 12-недельного курса от Microsoft Cloud Advocates. Каждое из 24 занятий охватывает JavaScript, CSS и HTML через практические проекты, такие как террариумы, расширения для браузера и космические игры. Участвуйте в викторинах, обсуждениях и практических заданиях. Развивайте свои навыки и улучшайте усвоение знаний с помощью нашей эффективной проектной методики. Начните свой путь в программировании уже сегодня!
#### 🧑‍🎓 _Вы студент?_ #### 🧑‍🎓 _Вы студент?_
Посетите [**страницу 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), где вы найдете ресурсы для начинающих, студенческие пакеты и даже способы получить бесплатный ваучер на сертификат. Это страница, которую стоит добавить в закладки и проверять время от времени, так как мы ежемесячно обновляем контент.
### 📣 Объявление — _Новый учебный курс_ по генеративному ИИ для JavaScript уже доступен ### 📣 Объявление — _Новый учебный курс_ по генеративному ИИ для JavaScript уже доступен
@ -48,13 +48,13 @@ CO_OP_TRANSLATOR_METADATA:
- Уроки, охватывающие все от основ до RAG. - Уроки, охватывающие все от основ до RAG.
- Взаимодействуйте с историческими персонажами с помощью GenAI и нашего приложения-компаньона. - Взаимодействуйте с историческими персонажами с помощью GenAI и нашего приложения-компаньона.
- Увлекательный и интересный сюжет, вы будете путешествовать во времени! - Увлекательный и захватывающий сюжет, вы будете путешествовать во времени!
<div> <div>
<img src="./images/character.png" width="600px" /> <img src="./images/character.png" width="600px" />
</div> </div>
Каждый урок включает задание, проверку знаний и вызов, чтобы изучить такие темы, как: Каждый урок включает задание, проверку знаний и вызов, чтобы помочь вам изучить такие темы, как:
- Создание запросов и инженерия запросов - Создание запросов и инженерия запросов
- Генерация приложений для текста и изображений - Генерация приложений для текста и изображений
- Приложения для поиска - Приложения для поиска
@ -63,20 +63,20 @@ 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" в правом верхнем углу этой страницы. 1. **Сделайте форк репозитория**: Нажмите кнопку "Fork" в правом верхнем углу этой страницы.
@ -84,37 +84,37 @@ CO_OP_TRANSLATOR_METADATA:
#### Запуск курса в Codespace #### Запуск курса в Codespace
В вашей копии этого репозитория, которую вы создали, нажмите кнопку **Code** и выберите **Open with Codespaces**. Это создаст новый Codespace для работы. В вашей копии этого репозитория нажмите кнопку **Code** и выберите **Open with Codespaces**. Это создаст новый Codespace для работы.
<img src="./images/createcodespace.png" alt="Создать Codespace" style="width:270px;"/> <img src="./images/createcodespace.png" alt="Создание Codespace" style="width:270px;"/>
#### Запуск курса локально на вашем компьютере #### Запуск курса локально на вашем компьютере
Чтобы запустить курс локально на вашем компьютере, вам понадобится текстовый редактор, браузер и инструмент командной строки. Наш первый урок, [Введение в языки программирования и инструменты](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/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) в качестве редактора, который также имеет встроенный [Терминал](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) в качестве редактора, который также включает встроенный [Терминал](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. Клонируйте ваш репозиторий на компьютер. Для этого нажмите кнопку **Code** и скопируйте URL:
<img src="./images/createcodespace.png" alt="Скопируйте URL вашего репозитория" style="width:270px;"/> <img src="./images/createcodespace.png" alt="Скопируйте URL вашего репозитория" style="width:270px;"/>
Затем откройте [Терминал](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>` на URL, который вы только что скопировали: Затем откройте [Терминал](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>` на скопированный вами URL:
```bash ```bash
git clone <your-repository-url> 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 > * [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) — для ускорения написания кода > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) — чтобы писать код быстрее
## 📂 Каждый урок включает: ## 📂 Каждый урок включает:
- необязательный скетчноут - опциональный скетчноут
- необязательное дополнительное видео - опциональное дополнительное видео
- предварительную викторину - предварительную викторину
- письменный урок - письменный урок
- для проектных уроков — пошаговые инструкции по созданию проекта - для проектных уроков — пошаговые инструкции по созданию проекта
@ -122,92 +122,92 @@ CO_OP_TRANSLATOR_METADATA:
- вызов - вызов
- дополнительное чтение - дополнительное чтение
- задание - задание
- [викторину после урока](https://ff-quizzes.netlify.app/) - [итоговую викторину](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 | | 02 | Начало работы | Основы GitHub, включая работу в команде | Как использовать GitHub в вашем проекте, как сотрудничать с другими разработчиками | [Введение в GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Начало работы | Доступность | Узнайте основы веб-доступности | [Основы доступности](/1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 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 | Типы данных в JavaScript | Основы типов данных в JavaScript | [Типы данных](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Основы JS | Функции и методы | Узнайте о функциях и методах для управления логикой приложения | [Функции и методы](/2-js-basics/2-functions-methods/README.md) | Jasmine и Christopher | | 05 | Основы JS | Функции и методы | Изучите функции и методы для управления логикой приложения | [Функции и методы](./2-js-basics/2-functions-methods/README.md) | Jasmine и Christopher |
| 06 | Основы JS | Принятие решений с помощью JS | Узнайте, как создавать условия в вашем коде с использованием методов принятия решений | [Принятие решений](/2-js-basics/3-making-decisions/README.md) | Jasmine | | 06 | Основы JS | Принятие решений в JS | Узнайте, как создавать условия в вашем коде с помощью методов принятия решений | [Принятие решений](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Основы JS | Массивы и циклы | Работа с данными с использованием массивов и циклов в JavaScript | [Массивы и циклы](/2-js-basics/4-arrays-loops/README.md) | Jasmine | | 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 | | 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 | | 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 | | 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 | | 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, используя переменные, сохраненные в локальном хранилище | [API, формы и локальное хранилище](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | | 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Создание формы, вызов API и сохранение переменных в локальном хранилище | Напишите элементы JavaScript для вашего расширения браузера, чтобы вызывать API, используя переменные, сохраненные в локальном хранилище | [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 | | 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 | Узнайте об API Canvas, который используется для рисования элементов на экране | [Рисование на Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris | | 16 | [Space Game](./6-space-game/solution/README.md) | Рисование на Canvas | Узнайте об API Canvas, который используется для рисования элементов на экране | [Рисование на Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution/README.md) | Перемещение элементов по экрану | Узнайте, как элементы могут двигаться, используя декартовы координаты и API Canvas | [Перемещение элементов](/6-space-game/3-moving-elements-around/README.md) | Chris | | 17 | [Space Game](./6-space-game/solution/README.md) | Перемещение элементов по экрану | Узнайте, как элементы могут двигаться, используя декартовы координаты и API 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 | | 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 | | 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 | | 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 | | 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 | | 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 |
## 🏫 Педагогика ## 🏫 Педагогика
Наша учебная программа основана на двух ключевых педагогических принципах: Наша учебная программа разработана с учетом двух ключевых педагогических принципов:
* обучение через проекты * обучение на основе проектов
* частые викторины * частые викторины
Программа охватывает основы JavaScript, HTML и CSS, а также новейшие инструменты и методы, используемые современными веб-разработчиками. Студенты получат практический опыт, создавая игру на набор текста, виртуальный террариум, экологичное расширение для браузера, игру в стиле "космических захватчиков" и банковское приложение для бизнеса. К концу курса студенты получат прочное понимание веб-разработки. Программа обучает основам JavaScript, HTML и CSS, а также последним инструментам и техникам, которые используют современные веб-разработчики. Студенты получат возможность развить практические навыки, создавая игру на скорость печати, виртуальный террариум, экологичное расширение для браузера, игру в стиле "космических захватчиков" и банковское приложение для бизнеса. К концу курса студенты получат прочное понимание веб-разработки.
> 🎓 Вы можете пройти первые несколько уроков этой программы как [Учебный путь](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn! > 🎓 Вы можете пройти первые несколько уроков этой программы в формате [Учебного пути](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn!
Благодаря тому, что содержание связано с проектами, процесс становится более увлекательным для студентов, а усвоение концепций усиливается. Мы также написали несколько вводных уроков по основам JavaScript, которые сопровождаются видео из серии "[Beginners Series to: 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 через другую серию видео: "[Beginner Series to: 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)".
> Ознакомьтесь с нашими [Правилами поведения](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:3000`. Вы можете запустить эту документацию оффлайн, используя [Docsify](https://docsify.js.org/#/). Форкните этот репозиторий, [установите Docsify](https://docsify.js.org/#/quickstart) на вашем локальном компьютере, а затем в корневой папке этого репозитория введите `docsify serve`. Веб-сайт будет доступен на порту 3000 вашего локального хоста: `localhost:3000`.
## 📘 PDF ## 📘 PDF
PDF-версия всех уроков доступна [здесь](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). PDF со всеми уроками можно найти [здесь](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Другие курсы ## 🎒 Другие курсы
Наша команда создает и другие курсы! Ознакомьтесь с ними: Наша команда создает и другие курсы! Ознакомьтесь с:
- [Искусственный интеллект для начинающих](https://aka.ms/genai-beginners) - [Генеративный ИИ для начинающих](https://aka.ms/genai-beginners)
- [Искусственный интеллект для начинающих .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet) - [Генеративный ИИ для начинающих .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
- [Искусственный интеллект с JavaScript](https://github.com/microsoft/generative-ai-with-javascript) - [Генеративный ИИ с JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
- [Искусственный интеллект с Java](https://github.com/microsoft/Generative-AI-for-beginners-java) - [Генеративный ИИ с Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
- [Искусственный интеллект для начинающих](https://aka.ms/ai-beginners) - [ИИ для начинающих](https://aka.ms/ai-beginners)
- [Наука о данных для начинающих](https://aka.ms/datascience-beginners) - [Наука о данных для начинающих](https://aka.ms/datascience-beginners)
- [Машинное обучение для начинающих](https://aka.ms/ml-beginners) - [Машинное обучение для начинающих](https://aka.ms/ml-beginners)
- [Кибербезопасность для начинающих](https://github.com/microsoft/Security-101) - [Кибербезопасность для начинающих](https://github.com/microsoft/Security-101)
- [Веб-разработка для начинающих](https://aka.ms/webdev-beginners) - [Веб-разработка для начинающих](https://aka.ms/webdev-beginners)
- [Интернет вещей для начинающих](https://aka.ms/iot-beginners) - [IoT для начинающих](https://aka.ms/iot-beginners)
- [Разработка XR для начинающих](https://github.com/microsoft/xr-development-for-beginners) - [Разработка XR для начинающих](https://github.com/microsoft/xr-development-for-beginners)
- [Освоение GitHub Copilot для парного программирования](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming) - [Освоение 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) - [Освоение GitHub Copilot для разработчиков C#/.NET](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
- [Выберите свое приключение с Copilot](https://github.com/microsoft/CopilotAdventures) - [Выберите свое приключение с Copilot](https://github.com/microsoft/CopilotAdventures)
## Лицензия ## Лицензия
Этот репозиторий лицензирован по лицензии MIT. Подробнее см. в файле [LICENSE](../../LICENSE). Этот репозиторий лицензирован под лицензией MIT. Подробнее см. в файле [LICENSE](../../LICENSE).
--- ---
**Отказ от ответственности**: **Отказ от ответственности**:
Этот документ был переведен с помощью сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода. Этот документ был переведен с помощью сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Хотя мы стремимся к точности, пожалуйста, учитывайте, что автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его исходном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода.

86
translations/ur/README.md
Unescape View File

@ -1,8 +1,8 @@
<!-- <!--
CO_OP_TRANSLATOR_METADATA: CO_OP_TRANSLATOR_METADATA:
{ {
"original_hash": "ae32f39b259a395c57b209d9e5b8c10b", "original_hash": "5e6642396cc39faad64b67c6cd9af37b",
"translation_date": "2025-08-28T00:20:14+00:00", "translation_date": "2025-08-28T00:42:14+00:00",
"source_file": "README.md", "source_file": "README.md",
"language_code": "ur" "language_code": "ur"
} }
@ -24,17 +24,17 @@ CO_OP_TRANSLATOR_METADATA:
[![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 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) 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` 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)
# ویب ڈویلپمنٹ برائے ابتدائی - ایک نصاب # ویب ڈویلپمنٹ برائے ابتدائی - ایک نصاب
مائیکروسافٹ کلاؤڈ ایڈووکیٹس کے 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 پر جاری کر دیا گیا ہے
@ -46,7 +46,7 @@ CO_OP_TRANSLATOR_METADATA:
<img src="./images/background.png" width="600px" /> <img src="./images/background.png" width="600px" />
</div> </div>
- بنیادی باتوں سے لے کر RAG تک کے اسباق۔ - اسباق جو بنیادی باتوں سے لے کر RAG تک سب کچھ شامل کرتے ہیں۔
- GenAI اور ہماری ساتھی ایپ کے ذریعے تاریخی کرداروں کے ساتھ بات چیت کریں۔ - GenAI اور ہماری ساتھی ایپ کے ذریعے تاریخی کرداروں کے ساتھ بات چیت کریں۔
- ایک دلچسپ اور پرلطف کہانی، آپ وقت میں سفر کریں گے! - ایک دلچسپ اور پرلطف کہانی، آپ وقت میں سفر کریں گے!
@ -54,7 +54,7 @@ CO_OP_TRANSLATOR_METADATA:
<img src="./images/character.png" width="600px" /> <img src="./images/character.png" width="600px" />
</div> </div>
ہر سبق میں شامل ہیں: ہر سبق میں شامل ہے:
- ایک اسائنمنٹ مکمل کریں - ایک اسائنمنٹ مکمل کریں
- علم کی جانچ - علم کی جانچ
- ایک چیلنج - ایک چیلنج
@ -69,15 +69,15 @@ 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 اکاؤنٹ میں نصاب کی ایک کاپی کے ساتھ ایک نئی ریپوزٹری بنائے گا۔
@ -88,13 +88,13 @@ CO_OP_TRANSLATOR_METADATA:
#### نصاب کو Codespace میں چلانا #### نصاب کو Codespace میں چلانا
اس ریپوزٹری کی اپنی کاپی میں جو آپ نے بنائی ہے، **Code** بٹن پر کلک کریں اور **Open with Codespaces** کو منتخب کریں۔ یہ آپ کے لیے کام کرنے کے لیے ایک نیا Codespace بنائے گا۔ اس ریپوزٹری کی اپنی کاپی میں جو آپ نے بنائی، **Code** بٹن پر کلک کریں اور **Open with Codespaces** کو منتخب کریں۔ یہ آپ کے لیے کام کرنے کے لیے ایک نیا Codespace بنائے گا۔
<img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/> <img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/>
#### نصاب کو اپنے کمپیوٹر پر مقامی طور پر چلانا #### نصاب کو اپنے کمپیوٹر پر مقامی طور پر چلانا
اس نصاب کو اپنے کمپیوٹر پر مقامی طور پر چلانے کے لیے، آپ کو ایک ٹیکسٹ ایڈیٹر، ایک براؤزر، اور ایک کمانڈ لائن ٹول کی ضرورت ہوگی۔ ہمارا پہلا سبق، [پروگرامنگ لینگویجز اور ٹولز کا تعارف](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/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 ڈاؤن لوڈ کر سکتے ہیں۔
@ -115,7 +115,7 @@ CO_OP_TRANSLATOR_METADATA:
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code کے اندر HTML صفحات کا پیش نظارہ کرنے کے لیے > * [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) - کوڈ تیزی سے لکھنے میں مدد کے لیے > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - کوڈ تیزی سے لکھنے میں مدد کے لیے
## 📂 ہر سبق میں شامل ہیں: ## 📂 ہر سبق میں شامل ہے:
- اختیاری اسکیچ نوٹ - اختیاری اسکیچ نوٹ
- اختیاری اضافی ویڈیو - اختیاری اضافی ویڈیو
@ -128,36 +128,36 @@ CO_OP_TRANSLATOR_METADATA:
- اسائنمنٹ - اسائنمنٹ
- [پوسٹ سبق کوئز](https://ff-quizzes.netlify.app/) - [پوسٹ سبق کوئز](https://ff-quizzes.netlify.app/)
> **کوئزز کے بارے میں نوٹ**: تمام کوئزز Quiz-app فولڈر میں موجود ہیں، کل 48 کوئزز، ہر ایک میں تین سوالات۔ یہ [یہاں](https://ff-quizzes.netlify.app/) دستیاب ہیں۔ Quiz-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) | فلور | | 02 | شروعات | GitHub کی بنیادی باتیں، ٹیم کے ساتھ کام کرنا | اپنے پروجیکٹ میں GitHub کا استعمال کیسے کریں، دوسروں کے ساتھ کوڈ بیس پر تعاون کیسے کریں | [GitHub کا تعارف](./1-getting-started-lessons/2-github-basics/README.md) | فلور |
| 03 | شروعات | رسائی | ویب رسائی کی بنیادی باتیں سیکھیں | [رسائی کے بنیادی اصول](/1-getting-started-lessons/3-accessibility/README.md) | کرسٹوفر | | 03 | شروعات | رسائی | ویب رسائی کی بنیادی باتیں سیکھیں | [رسائی کے بنیادی اصول](./1-getting-started-lessons/3-accessibility/README.md) | کرسٹوفر |
| 04 | جاوا اسکرپٹ کی بنیادی باتیں | جاوا اسکرپٹ ڈیٹا کی اقسام | جاوا اسکرپٹ ڈیٹا کی اقسام کی بنیادی باتیں | [ڈیٹا کی اقسام](/2-js-basics/1-data-types/README.md) | جیسمن | | 04 | جاوا اسکرپٹ کی بنیادی باتیں | جاوا اسکرپٹ ڈیٹا کی اقسام | جاوا اسکرپٹ ڈیٹا کی اقسام کی بنیادی باتیں | [ڈیٹا کی اقسام](./2-js-basics/1-data-types/README.md) | جیسمن |
| 05 | جاوا اسکرپٹ کی بنیادی باتیں | فنکشنز اور میتھڈز | ایپلیکیشن کے لاجک فلو کو منظم کرنے کے لیے فنکشنز اور میتھڈز کے بارے میں سیکھیں | [فنکشنز اور میتھڈز](/2-js-basics/2-functions-methods/README.md) | جیسمن اور کرسٹوفر | | 05 | جاوا اسکرپٹ کی بنیادی باتیں | فنکشنز اور میتھڈز | ایپلیکیشن کے لاجک فلو کو منظم کرنے کے لیے فنکشنز اور میتھڈز کے بارے میں سیکھیں | [فنکشنز اور میتھڈز](./2-js-basics/2-functions-methods/README.md) | جیسمن اور کرسٹوفر |
| 06 | جاوا اسکرپٹ کی بنیادی باتیں | جاوا اسکرپٹ کے ساتھ فیصلے کرنا | فیصلہ سازی کے طریقوں کا استعمال کرتے ہوئے اپنے کوڈ میں حالات کیسے بنائیں | [فیصلے کرنا](/2-js-basics/3-making-decisions/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) | جیسمن | | 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) | جین | | 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) | جین | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 |
## 🏫 تدریسی اصول ## 🏫 تدریسی اصول
@ -168,20 +168,20 @@ CO_OP_TRANSLATOR_METADATA:
یہ پروگرام جاوا اسکرپٹ، 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) کے طور پر لے سکتے ہیں!
پروجیکٹس کے ساتھ مواد کو ہم آہنگ کرنے سے طلباء کے لیے عمل زیادہ دلچسپ بنایا جاتا ہے اور تصورات کی یادداشت کو بڑھایا جاتا ہے۔ ہم نے جاوا اسکرپٹ کے بنیادی اصولوں کے بارے میں کئی ابتدائی اسباق بھی لکھے ہیں تاکہ تصورات کو متعارف کرایا جا سکے، جنہیں "[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) رہنما اصول دیکھیں۔ ہم آپ کی تعمیری رائے کا خیر مقدم کرتے ہیں! > ہمارے [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`۔
## 📘 پی ڈی ایف ## 📘 پی ڈی ایف

Write Preview
Loading…
Cancel
Save