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

Merge pull request #1475 from microsoft/update-translations

Browse Source 
🌐 Update translations via Co-op Translator
pull/1476/head
Lee Stott 3 weeks ago committed by GitHub
parent 1c27de100e 37b9e9527f
commit 493c7274b6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 399 additions and 355 deletions
Show Stats Download Patch File Download Diff File

121
translations/ar/README.md
Unescape View File

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b672130244189715ac084c3259f6ab58",
"translation_date": "2025-08-25T20:43:01+00:00",
"original_hash": "ae32f39b259a395c57b209d9e5b8c10b",
"translation_date": "2025-08-28T00:07:49+00:00",
"source_file": "README.md",
"language_code": "ar"
}
@ -21,13 +21,20 @@ CO_OP_TRANSLATOR_METADATA:
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[![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)
2. **استنسخ المستودع**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
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 تم إطلاقه للتو
@ -40,56 +47,56 @@ CO_OP_TRANSLATOR_METADATA:
</div>
- دروس تغطي كل شيء من الأساسيات إلى RAG.
- تفاعل مع شخصيات تاريخية باستخدام الذكاء الاصطناعي التوليدي وتطبيقنا المرافق.
- قصة ممتعة وجذابة، ستسافر عبر الزمن!
- تفاعل مع شخصيات تاريخية باستخدام GenAI وتطبيقنا المرافق.
- سرد ممتع وجذاب، ستسافر عبر الزمن!
<div>
<img src="./images/character.png" width="600px" />
</div>
كل درس يتضمن مهمة لإكمالها، اختبار معرفة، وتحديًا لتوجيهك في تعلم مواضيع مثل:
- إنشاء التعليمات وتطويرها
- إنشاء تطبيقات النصوص والصور
تتضمن كل درس مهمة لإكمالها، اختبار معرفة، وتحديًا لتعلم مواضيع مثل:
- التوجيه وهندسة التوجيه
- إنشاء تطبيقات نصوص وصور
- تطبيقات البحث
قم بزيارة [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) للحصول على مواد دراسية إضافية.
### 📋 إعداد بيئتك
هذا المنهج الدراسي يحتوي على بيئة تطوير جاهزة! عند البدء، يمكنك اختيار تشغيل المنهج الدراسي في [Codespace](https://github.com/features/codespaces/) (_بيئة تعتمد على المتصفح، لا تحتاج إلى تثبيت_)، أو محليًا على جهاز الكمبيوتر الخاص بك باستخدام محرر نصوص مثل [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
هذا المنهج يحتوي على بيئة تطوير جاهزة للاستخدام! عند البدء، يمكنك اختيار تشغيل المنهج في [Codespace](https://github.com/features/codespaces/) (_بيئة مستندة إلى المتصفح، لا حاجة للتثبيت_)، أو محليًا على جهاز الكمبيوتر الخاص بك باستخدام محرر نصوص مثل [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### إنشاء مستودعك
للحفاظ على عملك بسهولة، يُوصى بإنشاء نسخة خاصة بك من هذا المستودع. يمكنك القيام بذلك بالنقر على زر **Use this template** في أعلى الصفحة. سيؤدي ذلك إلى إنشاء مستودع جديد في حساب GitHub الخاص بك يحتوي على نسخة من المنهج الدراسي.
#### إنشاء مستودعك الخاص
لحفظ عملك بسهولة، يُوصى بإنشاء نسخة خاصة بك من هذا المستودع. يمكنك القيام بذلك بالنقر على زر **Use this template** في أعلى الصفحة. سيؤدي ذلك إلى إنشاء مستودع جديد في حساب GitHub الخاص بك يحتوي على نسخة من المنهج.
اتبع هذه الخطوات:
1. **نسخ المستودع**: انقر على زر "Fork" في الزاوية العلوية اليمنى من هذه الصفحة.
2. **استنساخ المستودع**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
1. **قم بعمل Fork للمستودع**: انقر على زر "Fork" في الزاوية العلوية اليمنى من هذه الصفحة.
2. **استنسخ المستودع**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### تشغيل المنهج الدراسي في Codespace
#### تشغيل المنهج في Codespace
في نسختك من هذا المستودع الذي أنشأته، انقر على زر **Code** واختر **Open with Codespaces**. سيؤدي ذلك إلى إنشاء Codespace جديد للعمل فيه.
في نسختك من هذا المستودع التي أنشأتها، انقر على زر **Code** وحدد **Open with Codespaces**. سيؤدي ذلك إلى إنشاء Codespace جديد للعمل فيه.
<img src="./images/createcodespace.png" alt="إنشاء 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)، سيشرح لك الخيارات المختلفة لكل من هذه الأدوات لتختار ما يناسبك.
لتشغيل هذا المنهج محليًا على جهاز الكمبيوتر الخاص بك، ستحتاج إلى محرر نصوص، متصفح، وأداة سطر أوامر. سيرشدك درسنا الأول، [مقدمة إلى لغات البرمجة وأدوات العمل](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/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** ونسخ الرابط:
<img src="./images/createcodespace.png" alt="نسخ رابط المستودع الخاص بك" style="width:270px;"/>
<img src="./images/createcodespace.png" alt="Copy your repository URL" style="width:270px;"/>
ثم افتح [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) داخل [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) وقم بتشغيل الأمر التالي، مع استبدال `<your-repository-url>` بالرابط الذي نسخته للتو:
@ -97,73 +104,73 @@ CO_OP_TRANSLATOR_METADATA:
git clone <your-repository-url>
```
2. افتح المجلد في Visual Studio Code. يمكنك القيام بذلك بالنقر على **File** > **Open Folder** واختيار المجلد الذي استنسخته للتو.
2. افتح المجلد في Visual Studio Code. يمكنك القيام بذلك بالنقر على **File** > **Open Folder** وتحديد المجلد الذي قمت باستنساخه للتو.
> الإضافات الموصى بها لـ Visual Studio Code:
>
> * [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/)
> **ملاحظة حول الاختبارات**: جميع الاختبارات موجودة في مجلد Quiz-app، 48 اختبارًا إجماليًا يحتوي كل منها على ثلاثة أسئلة. يتم ربطها من داخل الدروس ويمكن تشغيل تطبيق الاختبار محليًا أو نشره على 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 |
| 02 | البدء | أساسيات GitHub، بما في ذلك العمل مع فريق | كيفية استخدام GitHub في مشروعك، وكيفية التعاون مع الآخرين على قاعدة الكود | [مقدمة إلى GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | البدء | إمكانية الوصول | تعلم أساسيات إمكانية الوصول على الويب | [أساسيات إمكانية الوصول](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 01 | البداية | مقدمة إلى البرمجة وأدوات العمل | تعلم الأساسيات التي تقوم عليها معظم لغات البرمجة والبرامج التي تساعد المطورين المحترفين في أداء وظائفهم | [مقدمة إلى لغات البرمجة وأدوات العمل](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | البداية | أساسيات GitHub، بما في ذلك العمل مع فريق | كيفية استخدام GitHub في مشروعك، وكيفية التعاون مع الآخرين على قاعدة الكود | [مقدمة إلى GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | البداية | الوصولية | تعلم أساسيات الوصولية في الويب | [أساسيات الوصولية](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | أساسيات JS | أنواع البيانات في JavaScript | أساسيات أنواع البيانات في JavaScript | [أنواع البيانات](/2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | أساسيات JS | الوظائف والأساليب | تعلم كيفية استخدام الوظائف والأساليب لإدارة تدفق منطق التطبيق | [الوظائف والأساليب](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | أساسيات JS | اتخاذ القرارات باستخدام JS | تعلم كيفية إنشاء شروط في الكود باستخدام طرق اتخاذ القرارات | [اتخاذ القرارات](/2-js-basics/3-making-decisions/README.md) | Jasmine |
| 05 | أساسيات JS | الدوال والطرق | تعلم كيفية استخدام الدوال والطرق لإدارة تدفق منطق التطبيق | [الدوال والطرق](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | أساسيات JS | اتخاذ القرارات باستخدام JS | تعلم كيفية إنشاء شروط في الكود باستخدام طرق اتخاذ القرار | [اتخاذ القرارات](/2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | أساسيات JS | المصفوفات والحلقات | العمل مع البيانات باستخدام المصفوفات والحلقات في JavaScript | [المصفوفات والحلقات](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [الحديقة المصغرة](/3-terrarium/solution/README.md) | HTML في الممارسة | بناء HTML لإنشاء حديقة مصغرة على الإنترنت، مع التركيز على بناء التخطيط | [مقدمة إلى HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [الحديقة المصغرة](/3-terrarium/solution/README.md) | CSS في الممارسة | بناء CSS لتنسيق الحديقة المصغرة على الإنترنت، مع التركيز على أساسيات CSS بما في ذلك جعل الصفحة متجاوبة | [مقدمة إلى CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [الحديقة المصغرة](/3-terrarium/solution/README.md) | إغلاق JavaScript، التلاعب بـ DOM | بناء JavaScript لجعل الحديقة المصغرة تعمل كواجهة سحب/إفلات، مع التركيز على الإغلاق والتلاعب بـ DOM | [إغلاق JavaScript، التلاعب بـ DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [لعبة الكتابة](/4-typing-game/solution/README.md) | بناء لعبة كتابة | تعلم كيفية استخدام أحداث لوحة المفاتيح لتحريك منطق تطبيق JavaScript الخاص بك | [البرمجة القائمة على الأحداث](/4-typing-game/typing-game/README.md) | Christopher |
| 08 | [التيراريوم](/3-terrarium/solution/README.md) | HTML في الممارسة | بناء HTML لإنشاء تيراريوم عبر الإنترنت، مع التركيز على بناء التخطيط | [مقدمة إلى HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [التيراريوم](/3-terrarium/solution/README.md) | CSS في الممارسة | بناء CSS لتنسيق التيراريوم عبر الإنترنت، مع التركيز على أساسيات CSS بما في ذلك جعل الصفحة متجاوبة | [مقدمة إلى CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](/3-terrarium/solution/README.md) | إغلاق JavaScript، التفاعل مع DOM | قم ببناء JavaScript لجعل التيراريوم يعمل كواجهة سحب وإفلات، مع التركيز على الإغلاق والتفاعل مع DOM | [إغلاق JavaScript، التفاعل مع DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](/4-typing-game/solution/README.md) | بناء لعبة كتابة | تعلم كيفية استخدام أحداث لوحة المفاتيح لتوجيه منطق تطبيق JavaScript الخاص بك | [البرمجة القائمة على الأحداث](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | العمل مع المتصفحات | تعلم كيفية عمل المتصفحات، تاريخها، وكيفية إنشاء العناصر الأولى لإضافة المتصفح | [حول المتصفحات](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | بناء نموذج، استدعاء API وتخزين المتغيرات في التخزين المحلي | قم ببناء عناصر JavaScript لإضافة المتصفح لاستدعاء API باستخدام المتغيرات المخزنة في التخزين المحلي | [APIs، النماذج، والتخزين المحلي](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | العمليات الخلفية في المتصفح، أداء الويب | استخدم العمليات الخلفية للمتصفح لإدارة أيقونة الإضافة؛ تعلم عن أداء الويب وبعض التحسينات لتحقيق ذلك | [المهام الخلفية والأداء](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution/README.md) | تطوير الألعاب المتقدم باستخدام JavaScript | تعلم عن الوراثة باستخدام الفئات والتركيب ونمط Pub/Sub، كتحضير لبناء لعبة | [مقدمة لتطوير الألعاب المتقدم](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution/README.md) | الرسم على اللوحة | تعلم عن واجهة برمجة التطبيقات Canvas API، المستخدمة لرسم العناصر على الشاشة | [الرسم على اللوحة](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution/README.md) | تحريك العناصر على الشاشة | اكتشف كيف يمكن للعناصر أن تتحرك باستخدام الإحداثيات الكارتيسية وواجهة برمجة التطبيقات 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 |
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | العمليات الخلفية في المتصفح، أداء الويب | استخدم العمليات الخلفية للمتصفح لإدارة أيقونة الإضافة؛ تعلم عن أداء الويب وبعض التحسينات لجعله أفضل | [المهام الخلفية والأداء](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution/README.md) | تطوير ألعاب أكثر تقدمًا باستخدام JavaScript | تعلم عن الوراثة باستخدام الفئات والتكوين ونمط Pub/Sub، كتحضير لبناء لعبة | [مقدمة لتطوير الألعاب المتقدمة](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution/README.md) | الرسم على اللوحة | تعلم عن واجهة برمجة التطبيقات Canvas، المستخدمة لرسم العناصر على الشاشة | [الرسم على اللوحة](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution/README.md) | تحريك العناصر على الشاشة | اكتشف كيف يمكن للعناصر أن تتحرك باستخدام الإحداثيات الكارتيسية وواجهة برمجة التطبيقات Canvas | [تحريك العناصر](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution/README.md) | اكتشاف التصادم | اجعل العناصر تصطدم وتتفاعل مع بعضها باستخدام ضغطات المفاتيح وقدم وظيفة تبريد لضمان أداء اللعبة | [اكتشاف التصادم](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution/README.md) | تسجيل النقاط | قم بإجراء حسابات رياضية بناءً على حالة اللعبة وأدائها | [تسجيل النقاط](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution/README.md) | إنهاء اللعبة وإعادة تشغيلها | تعلم عن إنهاء اللعبة وإعادة تشغيلها، بما في ذلك تنظيف الموارد وإعادة تعيين قيم المتغيرات | [شرط النهاية](/6-space-game/6-end-condition/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution/README.md) | إنهاء وإعادة تشغيل اللعبة | تعلم عن إنهاء اللعبة وإعادة تشغيلها، بما في ذلك تنظيف الموارد وإعادة تعيين قيم المتغيرات | [حالة النهاية](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution/README.md) | قوالب HTML والمسارات في تطبيق ويب | تعلم كيفية إنشاء هيكل موقع ويب متعدد الصفحات باستخدام التوجيه وقوالب HTML | [قوالب HTML والمسارات](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution/README.md) | بناء نموذج تسجيل الدخول والتسجيل | تعلم عن بناء النماذج ومعالجة إجراءات التحقق | [النماذج](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution/README.md) | طرق جلب البيانات واستخدامها | كيف تتدفق البيانات داخل وخارج التطبيق، وكيفية جلبها، تخزينها، والتخلص منها | [البيانات](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution/README.md) | مفاهيم إدارة الحالة | تعلم كيف يحتفظ التطبيق بالحالة وكيفية إدارتها برمجياً | [إدارة الحالة](/7-bank-project/4-state-management/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution/README.md) | طرق جلب البيانات واستخدامها | كيف تتدفق البيانات داخل وخارج التطبيق الخاص بك، وكيفية جلبها، تخزينها، والتخلص منها | [البيانات](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution/README.md) | مفاهيم إدارة الحالة | تعلم كيف يحتفظ تطبيقك بالحالة وكيفية إدارتها برمجيًا | [إدارة الحالة](/7-bank-project/4-state-management/README.md) | Yohan |
## 🏫 التربية
## 🏫 التعليم
تم تصميم منهجنا بناءً على مبدأين تربويين رئيسيين:
* التعلم القائم على المشاريع
* الاختبارات المتكررة
يعلم البرنامج أساسيات JavaScript وHTML وCSS، بالإضافة إلى أحدث الأدوات والتقنيات التي يستخدمها مطورو الويب اليوم. سيحصل الطلاب على فرصة لتطوير خبرة عملية من خلال بناء لعبة كتابة، تيراريوم افتراضي، إضافة متصفح صديقة للبيئة، لعبة بأسلوب غزو الفضاء، وتطبيق مصرفي للشركات. بحلول نهاية السلسلة، سيكون لدى الطلاب فهم قوي لتطوير الويب.
يُعلم البرنامج أساسيات JavaScript وHTML وCSS، بالإضافة إلى أحدث الأدوات والتقنيات التي يستخدمها مطورو الويب اليوم. سيحصل الطلاب على فرصة لتطوير خبرة عملية من خلال بناء لعبة كتابة، تيراريوم افتراضي، إضافة متصفح صديقة للبيئة، لعبة بأسلوب غزو الفضاء، وتطبيق مصرفي للشركات. بحلول نهاية السلسلة، سيكون لدى الطلاب فهم قوي لتطوير الويب.
> 🎓 يمكنك أخذ الدروس الأولى في هذا المنهج كـ [مسار تعلم](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) على Microsoft Learn!
من خلال ضمان توافق المحتوى مع المشاريع، تصبح العملية أكثر جاذبية للطلاب ويتم تعزيز الاحتفاظ بالمفاهيم. كما كتبنا عدة دروس تمهيدية في أساسيات JavaScript لتقديم المفاهيم، مقترنة بفيديو من مجموعة "[سلسلة المبتدئين: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" من الفيديوهات التعليمية، التي ساهم بعض مؤلفيها في هذا المنهج.
بالإضافة إلى ذلك، يحدد اختبار منخفض المخاطر قبل الفصل نية الطالب نحو تعلم موضوع معين، بينما يضمن اختبار ثانٍ بعد الفصل تعزيز الاحتفاظ بالمعلومات. تم تصميم هذا المنهج ليكون مرناً وممتعاً ويمكن أخذه كاملاً أو جزئياً. تبدأ المشاريع صغيرة وتصبح أكثر تعقيداً بحلول نهاية دورة الـ 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). نرحب بملاحظاتك البناءة!
@ -192,13 +199,15 @@ CO_OP_TRANSLATOR_METADATA:
- [تطوير الويب للمبتدئين](https://aka.ms/webdev-beginners)
- [إنترنت الأشياء للمبتدئين](https://aka.ms/iot-beginners)
- [تطوير الواقع الممتد للمبتدئين](https://github.com/microsoft/xr-development-for-beginners)
- [إتقان GitHub Copilot للاستخدام الذكي](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
- [إتقان GitHub Copilot للاستخدام التفاعلي](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
- [إتقان GitHub Copilot لمطوري C#/.NET](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
- [اختر مغامرتك مع Copilot](https://github.com/microsoft/CopilotAdventures)
- [اختر مغامرتك الخاصة مع Copilot](https://github.com/microsoft/CopilotAdventures)
## الترخيص
هذا المستودع مرخص بموجب ترخيص MIT. انظر ملف [LICENSE](../../LICENSE) لمزيد من المعلومات.
---
**إخلاء المسؤولية**:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية هو المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.

217
translations/ja/README.md
Unescape View File

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b672130244189715ac084c3259f6ab58",
"translation_date": "2025-08-23T22:16:20+00:00",
"original_hash": "ae32f39b259a395c57b209d9e5b8c10b",
"translation_date": "2025-08-28T00:11:18+00:00",
"source_file": "README.md",
"language_code": "ja"
}
@ -21,137 +21,144 @@ CO_OP_TRANSLATOR_METADATA:
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
# 初心者向けウェブ開発 - カリキュラム
[![Microsoft Azure AI Foundry Discord](https://dcbadge.limes.pink/api/server/ByRwuEEgH4)](https://discord.com/invite/ByRwuEEgH4)
Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ開発の基礎を学びましょう。24のレッスンでは、JavaScript、CSS、HTMLを使った実践的なプロジェクト（テラリウム、ブラウザ拡張機能、宇宙ゲームなど）を通じて学びます。クイズ、ディスカッション、実践課題を通じてスキルを向上させ、プロジェクトベースの学習法で知識の定着を最適化します。今すぐコーディングの旅を始めましょう！
これらのリソースを使い始めるための手順:
1. **リポジトリをフォークする**: [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) をクリックしてください。
2. **リポジトリをクローンする**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Azure AI Foundry Discordに参加して、専門家や他の開発者と交流する**](https://discord.com/invite/ByRwuEEgH4)
#### 🧑‍🎓 _学生の皆さんへ_
# 初心者向けウェブ開発 - カリキュラム
[**Student Hubページ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)を訪れてください。初心者向けリソース、学生向けパック、さらには無料の認定証バウチャーを取得する方法が見つかります。このページはブックマークして、毎月内容が更新されるので定期的にチェックしてください。
Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ開発の基礎を学びましょう。24のレッスンでは、JavaScript、CSS、HTMLを使った実践的なプロジェクト（テラリウム、ブラウザ拡張機能、宇宙ゲームなど）を通じて学びます。クイズ、ディスカッション、実践課題を通じてスキルを向上させ、プロジェクトベースの学習法で知識の定着を最大化します。今すぐコーディングの旅を始めましょう！
### 📣 お知らせ - _新しいカリキュラム_「JavaScript向け生成AI」がリリースされました
#### 🧑‍🎓 _学生の方へ_
新しい生成AIカリキュラムをお見逃しなく！
[**Student Hubページ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) を訪問してください。初心者向けリソース、学生向けパック、さらには無料の証明書バウチャーを取得する方法が見つかります。このページはブックマークして、毎月内容が更新されるので定期的にチェックしてください。
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)を訪れて学びを始めましょう！
### 📣 お知らせ - _新しいカリキュラム_「JavaScript向け生成AI」がリリースされました
<div>
<img src="./images/background.png" width="600px" />
</div>
新しい生成AIカリキュラムをお見逃しなく！
- 基礎からRAGまでを網羅したレッスン
- 生成AIとコンパニオンアプリを使って歴史上の人物と対話
- 楽しく魅力的なストーリーでタイムトラベル体験！
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) を訪問して始めましょう！
<div>
<img src="./images/character.png" width="600px" />
</div>
<div>
<img src="./images/background.png" width="600px" />
</div>
各レッスンには以下が含まれます：
- 課題
- 知識チェック
- チャレンジ
- 基礎からRAGまでを網羅したレッスン
- GenAIとコンパニオンアプリを使って歴史上の人物と対話
- 楽しく魅力的なストーリーでタイムトラベルを体験！
以下のトピックを学びます：
- プロンプトとプロンプトエンジニアリング
- テキストと画像アプリの生成
- 検索アプリ
<div>
<img src="./images/character.png" width="600px" />
</div>
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)を訪れて学びを始めましょう！
各レッスンには以下が含まれます:
- 課題
- 知識チェック
- チャレンジ
## 🌱 学習を始める
以下のトピックを学びます:
- プロンプトとプロンプトエンジニアリング
- テキストと画像アプリの生成
- 検索アプリ
> **教師の皆さん**、このカリキュラムの使用方法について[いくつかの提案](for-teachers.md)を含めています。ぜひ[ディスカッションフォーラム](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)でフィードバックをお寄せください！
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) を訪問して始めましょう！
**[学習者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**の皆さん、各レッスンでは事前クイズから始め、講義資料を読み、さまざまな活動を完了し、事後クイズで理解度を確認してください。
## 🌱 始め方
学習体験を向上させるために、仲間と一緒にプロジェクトに取り組むことをお勧めします！ディスカッションは[ディスカッションフォーラム](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)で歓迎されており、モデレーターが質問に答えるために待機しています。
> **教師の方へ**: このカリキュラムの使用方法について[いくつかの提案](for-teachers.md)を含めています。ぜひ[ディスカッションフォーラム](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)でフィードバックをお寄せください！
さらに学びを深めるために、[Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)で追加の学習資料を探索することを強くお勧めします。
**[学習者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)** の方は、各レッスンで事前クイズから始め、講義資料を読み、さまざまなアクティビティを完了し、事後クイズで理解を確認してください。
### 📋 環境のセットアップ
学習体験を向上させるために、仲間と一緒にプロジェクトに取り組むことをお勧めします！ディスカッションは[ディスカッションフォーラム](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)で歓迎されており、モデレーターが質問に答えるために待機しています。
このカリキュラムにはすぐに使える開発環境が用意されています！開始時に、[Codespace](https://github.com/features/codespaces/)（ブラウザベースでインストール不要の環境）を使用するか、ローカルのコンピュータで[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)などのテキストエディタを使用して実行することができます。
さらに学びを深めるために、[Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)で追加の学習資料を探索することを強くお勧めします。
#### リポジトリを作成する
作業内容を簡単に保存するために、このリポジトリのコピーを作成することをお勧めします。ページ上部の**Use this template**ボタンをクリックすると、カリキュラムのコピーがあなたのGitHubアカウントに新しいリポジトリとして作成されます。
### 📋 環境のセットアップ
以下の手順に従ってください：
1. **リポジトリをフォークする**: ページ右上の「Fork」ボタンをクリックします。
2. **リポジトリをクローンする**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
このカリキュラムにはすぐに使える開発環境が用意されています！始める際には、[Codespace](https://github.com/features/codespaces/)（ブラウザベースでインストール不要の環境）を使用するか、ローカルのコンピュータで[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)などのテキストエディタを使用して実行することができます。
#### Codespaceでカリキュラムを実行する
#### リポジトリを作成する
作業内容を簡単に保存するために、このリポジトリのコピーを作成することをお勧めします。ページ上部の **Use this template** ボタンをクリックすると、カリキュラムのコピーがあなたのGitHubアカウントに新しいリポジトリとして作成されます。
作成したリポジトリのコピーで、**Code**ボタンをクリックし、**Open with Codespaces**を選択します。これにより、作業用の新しいCodespaceが作成されます。
手順:
1. **リポジトリをフォークする**: ページ右上の「Fork」ボタンをクリックしてください。
2. **リポジトリをクローンする**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
<img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/>
#### Codespaceでカリキュラムを実行する
#### ローカルコンピュータでカリキュラムを実行する
作成したリポジトリのコピーで、**Code** ボタンをクリックし、**Open with Codespaces** を選択します。これにより、作業用の新しいCodespaceが作成されます。
ローカルコンピュータでこのカリキュラムを実行するには、テキストエディタ、ブラウザ、コマンドラインツールが必要です。最初のレッスン[プログラミング言語とツールの紹介](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages)では、これらのツールのさまざまなオプションを紹介し、最適なものを選択する方法を説明します。
<img src="./images/createcodespace.png" alt="Create codespace" 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)も利用できます。[こちら](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)からVisual Studio Codeをダウンロードできます。
#### ローカルコンピュータでカリキュラムを実行する
1. リポジトリをコンピュータにクローンします。**Code**ボタンをクリックしてURLをコピーします：
ローカルコンピュータでこのカリキュラムを実行するには、テキストエディタ、ブラウザ、コマンドラインツールが必要です。最初のレッスン[プログラミング言語とツールの紹介](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages)では、これらのツールのさまざまなオプションを紹介し、最適なものを選択する方法を説明します。
<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)も利用できます。[こちら](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)を開き、コピーしたURLを`<your-repository-url>`に置き換えて以下のコマンドを実行します：
1. リポジトリをコンピュータにクローンします。**Code** ボタンをクリックしてURLをコピーしてください:
<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)を開き、コピーしたURLを `<your-repository-url>` に置き換えて以下のコマンドを実行してください:
```bash
git clone <your-repository-url>
```
2. Visual Studio Codeでフォルダを開きます。**File** > **Open Folder**をクリックし、クローンしたフォルダを選択します。
> 推奨されるVisual Studio Code拡張機能:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTMLページをVisual Studio Code内でプレビューするため
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - コードを書く速度を向上させるため
## 📂 各レッスンには以下が含まれます：
- スケッチノート（オプション）
- 補足動画（オプション）
- レッスン前のウォームアップクイズ
- 書き起こしレッスン
- プロジェクトベースのレッスンでは、プロジェクト構築のステップバイステップガイド
- 知識チェック
- チャレンジ
- 補足資料
- 課題
- レッスン後のクイズ
> **クイズについての注意**: すべてのクイズはQuiz-appフォルダに含まれており、合計48個のクイズが各3問ずつあります。レッスン内からリンクされており、Quiz-appはローカルで実行するかAzureにデプロイできます。`quiz-app`フォルダ内の指示に従ってください。クイズは徐々にローカライズされています。
## 🗃️ レッスン
| | プロジェクト名 | 教えられる概念 | 学習目標 | リンクされたレッスン | 著者 |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | 始めるにあたって | プログラミングとツールの基本的な紹介 | ほとんどのプログラミング言語の基本的な基盤と、プロの開発者が仕事をするのに役立つソフトウェアについて学ぶ | [プログラミング言語とツールの紹介](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | 始めるにあたって | GitHubの基本、チームでの作業 | プロジェクトでGitHubを使用する方法、コードベースで他の人と協力する方法 | [GitHubの基本](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | 始めるにあたって | アクセシビリティ | ウェブアクセシビリティの基本を学ぶ | [アクセシビリティの基本](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JSの基本 | JavaScriptのデータ型 | JavaScriptのデータ型の基本 | [データ型](/2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JSの基本 | 関数とメソッド | アプリケーションのロジックフローを管理するための関数とメソッドについて学ぶ | [関数とメソッド](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JSの基本 | JSでの意思決定 | 意思決定方法を使用してコード内に条件を作成する方法を学ぶ | [意思決定](/2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JSの基本 | 配列とループ | JavaScriptで配列とループを使用してデータを操作する | [配列とループ](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [テラリウム](/3-terrarium/solution/README.md) | HTMLの実践 | レイアウトを構築することに焦点を当ててオンラインテラリウムを作成するためのHTMLを構築する | [HTMLの紹介](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [テラリウム](/3-terrarium/solution/README.md) | CSSの実践 | ページをレスポンシブにすることを含むCSSの基本に焦点を当ててオンラインテラリウムをスタイル設定するためのCSSを構築する | [CSSの紹介](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [テラリウム](/3-terrarium/solution/README.md) | JavaScriptのクロージャとDOM操作 | クロージャとDOM操作に焦点を当ててドラッグ＆ドロップインターフェースとしてテラリウムを機能させるためのJavaScriptを構築する | [JavaScriptのクロージャとDOM操作](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [タイピングゲーム](/4-typing-game/solution/README.md) | タイピングゲームを構築 | キーボードイベントを使用してJavaScriptアプリのロジックを駆動する方法を学ぶ | [イベント駆動型プログラミング](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | ブラウザの操作 | ブラウザの仕組み、その歴史、そしてブラウザ拡張機能の最初の要素を構築する方法を学びます | [ブラウザについて](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | フォームの作成、APIの呼び出し、ローカルストレージへの変数の保存 | JavaScriptを使ってブラウザ拡張機能の要素を構築し、ローカルストレージに保存された変数を使用してAPIを呼び出します | [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 |
```
2. Visual Studio Codeでフォルダを開きます。**File** > **Open Folder** をクリックし、クローンしたフォルダを選択してください。
> 推奨されるVisual Studio Code拡張機能:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code内でHTMLページをプレビューするため
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - コードを効率的に書くため
## 📂 各レッスンには以下が含まれます:
- スケッチノート（オプション）
- 補足動画（オプション）
- レッスン前のウォームアップクイズ
- 書かれたレッスン内容
- プロジェクトベースのレッスンでは、プロジェクトを構築するためのステップバイステップガイド
- 知識チェック
- チャレンジ
- 補足資料
- 課題
- [レッスン後のクイズ](https://ff-quizzes.netlify.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 |
| 02 | 始め方 | GitHubの基本、チームでの作業 | プロジェクトでGitHubを使用する方法、コードベースで他の人と協力する方法 | [GitHubの紹介](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | 始め方 | アクセシビリティ | ウェブアクセシビリティの基本を学ぶ | [アクセシビリティの基本](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JSの基本 | JavaScriptのデータ型 | JavaScriptのデータ型の基本を学ぶ | [データ型](/2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JSの基本 | 関数とメソッド | アプリケーションのロジックフローを管理するための関数とメソッドについて学ぶ | [関数とメソッド](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JSの基本 | JSでの意思決定 | 意思決定方法を使用してコード内で条件を作成する方法を学ぶ | [意思決定](/2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JSの基本 | 配列とループ | JavaScriptで配列とループを使用してデータを操作する | [配列とループ](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [テラリウム](/3-terrarium/solution/README.md) | HTMLの実践 | オンラインテラリウムを作成するためのHTMLを構築し、レイアウトの構築に焦点を当てる | [HTMLの紹介](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [テラリウム](/3-terrarium/solution/README.md) | CSSの実践 | オンラインテラリウムをスタイル設定するためのCSSを構築し、レスポンシブデザインを含むCSSの基本に焦点を当てる | [CSSの紹介](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](/3-terrarium/solution/README.md) | JavaScriptのクロージャとDOM操作 | JavaScriptを使ってドラッグ＆ドロップのインターフェースとしてテラリウムを機能させるコードを作成し、クロージャとDOM操作に焦点を当てます | [JavaScriptのクロージャとDOM操作](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](/4-typing-game/solution/README.md) | タイピングゲームを作る | キーボードイベントを使用してJavaScriptアプリのロジックを駆動する方法を学びます | [イベント駆動型プログラミング](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | ブラウザの仕組みを学ぶ | ブラウザの仕組みや歴史を学び、ブラウザ拡張機能の最初の要素を構築する方法を学びます | [ブラウザについて](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | フォームの作成、APIの呼び出し、ローカルストレージへの変数保存 | ローカルストレージに保存された変数を使用してAPIを呼び出すブラウザ拡張機能のJavaScript要素を構築します | [API、フォーム、ローカルストレージ](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | ブラウザのバックグラウンドプロセスとウェブパフォーマンス | ブラウザのバックグラウンドプロセスを使用して拡張機能のアイコンを管理する方法を学び、ウェブパフォーマンスと最適化について学びます | [バックグラウンドタスクとパフォーマンス](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution/README.md) | JavaScriptを使ったより高度なゲーム開発 | クラスとコンポジションの両方を使用した継承やPub/Subパターンについて学び、ゲーム構築の準備をします | [高度なゲーム開発の紹介](/6-space-game/1-introduction/README.md) | Chris |
| 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 |
| 18 | [Space Game](/6-space-game/solution/README.md) | 衝突検出 | キー入力を使用して要素が衝突し反応するようにし、ゲームのパフォーマンスを確保するためのクールダウン機能を提供します | [衝突検出](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution/README.md) | スコアの記録 | ゲームの状態とパフォーマンスに基づいて数学的計算を行います | [スコアの記録](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution/README.md) | ゲームの終了と再開 | アセットのクリーンアップや変数値のリセットを含む、ゲームの終了と再開について学びます | [終了条件](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution/README.md) | ウェブアプリにおけるHTMLテンプレートとルート | ルーティングとHTMLテンプレートを使用して、マルチページウェブサイトのアーキテクチャの基盤を作成する方法を学びます | [HTMLテンプレートとルート](/7-bank-project/1-template-route/README.md) | Yohan |
| 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 |
| 19 | [Space Game](/6-space-game/solution/README.md) | スコアの管理 | ゲームの状態とパフォーマンスに基づいて数学的計算を行います | [スコアの管理](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution/README.md) | ゲームの終了と再スタート | アセットのクリーンアップや変数値のリセットを含む、ゲームの終了と再スタートについて学びます | [終了条件](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution/README.md) | ウェブアプリにおけるHTMLテンプレートとルート | マルチページウェブサイトのアーキテクチャをルーティングとHTMLテンプレートを使用して構築する方法を学びます | [HTMLテンプレートとルート](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution/README.md) | ログインと登録フォームの作成 | フォームの作成とバリデーションルーチンの処理について学びます | [フォーム](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution/README.md) | データの取得と使用方法 | アプリ内でデータがどのように流れ、取得、保存、破棄されるかを学びます | [データ](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution/README.md) | 状態管理の概念 | アプリが状態を保持する方法と、それをプログラム的に管理する方法を学びます | [状態管理](/7-bank-project/4-state-management/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution/README.md) | 状態管理の概念 | アプリが状態を保持する方法と、それをプログラムで管理する方法を学びます | [状態管理](/7-bank-project/4-state-management/README.md) | Yohan |
## 🏫 教育方針
@ -160,22 +167,22 @@ 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)として受講できます！
プロジェクトに沿った内容を確保することで、学生にとって学習プロセスがより魅力的になり、概念の定着が促進されます。また、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
@ -184,7 +191,7 @@ JavaScriptフレームワークの導入を意図的に避け、フレームワ
## 🎒 その他のコース
私たちのチームは他にもコースを提供しています！以下をご覧ください：
私たちのチームは他にもコースを制作しています！以下をご覧ください：
- [Generative AI for Beginners](https://aka.ms/genai-beginners)
- [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
@ -205,5 +212,7 @@ JavaScriptフレームワークの導入を意図的に避け、フレームワ
このリポジトリは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) を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてご参照ください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解釈について、当社は責任を負いません。

171
translations/mo/README.md
Unescape View File

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b672130244189715ac084c3259f6ab58",
"translation_date": "2025-08-25T20:45:24+00:00",
"original_hash": "ae32f39b259a395c57b209d9e5b8c10b",
"translation_date": "2025-08-28T00:10:21+00:00",
"source_file": "README.md",
"language_code": "mo"
}
@ -21,17 +21,24 @@ CO_OP_TRANSLATOR_METADATA:
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
# 初學者網頁開發課程 - 教學大綱
[![Microsoft Azure AI Foundry Discord](https://dcbadge.limes.pink/api/server/ByRwuEEgH4)](https://discord.com/invite/ByRwuEEgH4)
透過微軟雲端倡導者提供的 12 週完整課程，學習網頁開發的基礎知識。課程包含 24 篇課程，透過實作專案如生態瓶、瀏覽器擴充功能及太空遊戲，深入學習 JavaScript、CSS 和 HTML。課程還包含測驗、討論及實際作業，幫助您提升技能並加強知識吸收。立即開始您的程式設計旅程吧！
按照以下步驟開始使用這些資源：
1. **分叉此倉庫**：點擊 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **克隆此倉庫**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**加入 Azure AI Foundry Discord，與專家和其他開發者交流**](https://discord.com/invite/ByRwuEEgH4)
# 初學者的網頁開發課程 - 一套完整的課程
透過 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 新課程！
造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！
@ -41,136 +48,136 @@ CO_OP_TRANSLATOR_METADATA:
- 課程涵蓋從基礎到 RAG 的所有內容。
- 使用生成式 AI 和我們的伴侶應用程式與歷史人物互動。
- 有趣且引人入勝的故事情節，您將進行時光旅行！
- 有趣且引人入勝的敘事，您將進行時光旅行！
<div>
<img src="./images/character.png" width="600px" />
</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 帳戶中建立一個包含課程副本的新儲存庫。
#### 創建您的倉庫
為了方便保存您的工作，建議您創建此倉庫的副本。您可以點擊頁面頂部的 **使用此模板** 按鈕，這將在您的 GitHub 帳戶中創建一個包含課程副本的新倉庫。
請按照以下步驟操作：
1. **分叉儲存庫**：點擊頁面右上角的 "Fork" 按鈕。
2. **複製儲存庫**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
按照以下步驟：
1. **分叉此倉庫**：點擊頁面右上角的 "Fork" 按鈕。
2. **克隆此倉庫**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### 在 Codespace 中執行課程
#### 在 Codespace 中運行課程
在您建立的儲存庫副本中，點擊 **Code** 按鈕並選擇 **Open with Codespaces**。這將為您建立一個新的 Codespace 以供使用。
在您創建的倉庫副本中，點擊 **Code** 按鈕並選擇 **Open with Codespaces**。這將為您創建一個新的 Codespace 以供使用。
<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) 將引導您了解各種工具選項，幫助您選擇最適合您的工具。
要在本地電腦上運行此課程，您需要一個文本編輯器、瀏覽器和命令行工具。我們的第一節課程 [程式語言與工具介紹](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/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;"/>
然後，在 [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
git clone <your-repository-url>
```
2. 在 Visual Studio Code 中開啟資料夾。您可以點擊 **File** > **Open Folder**，選擇您剛複製的資料夾。
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 頁面
> * [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/)
> **關於測驗的說明**：所有測驗都包含在 Quiz-app 資料夾中，共有 48 個測驗，每個測驗包含三個問題。測驗可在本地執行或部署到 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 |
| 02 | 開始使用 | GitHub 基礎及團隊合作 | 學習如何在專案中使用 GitHub，如何與他人協作程式碼基礎 | [GitHub 基礎](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | 開始使用 | 無障礙設計 | 學習網頁無障礙設計的基礎 | [無障礙設計基礎](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS 基礎 | JavaScript 資料型別 | JavaScript 資料型別的基礎 | [資料型別](/2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS 基礎 | 函數及方法 | 學習如何使用函數及方法管理應用程式的邏輯流程 | [函數及方法](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS 基礎 | 使用 JS 做出決策 | 學習如何使用決策方法在程式碼中建立條件 | [做出決策](/2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS 基礎 | 陣列及迴圈 | 使用 JavaScript 中的陣列及迴圈處理資料 | [陣列及迴圈](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [生態瓶](/3-terrarium/solution/README.md) | HTML 實作 | 建立 HTML 以創建線上生態瓶，專注於建立網頁佈局 | [HTML 介紹](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [生態瓶](/3-terrarium/solution/README.md) | CSS 實作 | 建立 CSS 以設計線上生態瓶，專注於 CSS 基礎及使網頁具備響應式設計 | [CSS 介紹](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [生態瓶](/3-terrarium/solution/README.md) | JavaScript 閉包及 DOM 操作 | 建立 JavaScript 使生態瓶具備拖放功能，專注於閉包及 DOM 操作 | [JavaScript 閉包及 DOM 操作](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [打字遊戲](/4-typing-game/solution/README.md) | 建立打字遊戲 | 學習如何使用鍵盤事件驅動 JavaScript 應用程式的邏輯 | [事件驅動程式設計](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | 瀏覽器操作 | 學習瀏覽器的運作方式、歷史，以及如何搭建瀏覽器擴展的初始元素 | [關於瀏覽器](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | 建立表單、調用 API 並將變數存儲於本地存儲中 | 建立瀏覽器擴展的 JavaScript 元素，使用存儲於本地存儲中的變數來調用 API | [API、表單與本地存儲](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | 瀏覽器背景進程與網頁性能 | 使用瀏覽器的背景進程管理擴展圖標；學習網頁性能及一些優化方法 | [背景任務與性能](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution/README.md) | 更高級的 JavaScript 遊戲開發 | 學習使用類別與組合進行繼承，以及 Pub/Sub 模式，為遊戲開發做準備 | [高級遊戲開發介紹](/6-space-game/1-introduction/README.md) | Chris |
| 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 |
| 18 | [Space Game](/6-space-game/solution/README.md) | 碰撞檢測 | 使用按鍵讓元素相互碰撞並產生反應，並提供冷卻功能以確保遊戲性能 | [碰撞檢測](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution/README.md) | 計分 | 根據遊戲的狀態和性能進行數學計算 | [計分](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution/README.md) | 結束與重啟遊戲 | 學習如何結束與重啟遊戲，包括清理資源和重置變數值 | [結束條件](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution/README.md) | 網頁應用中的 HTML 模板與路由 | 學習如何使用路由和 HTML 模板搭建多頁網站的架構 | [HTML 模板與路由](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution/README.md) | 建立登入與註冊表單 | 學習如何建立表單並處理驗證流程 | [表單](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution/README.md) | 獲取與使用數據的方法 | 學習數據如何在應用中流動、如何獲取、存儲以及處理 | [數據](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution/README.md) | 狀態管理的概念 | 學習應用如何保留狀態以及如何以程式化方式管理它 | [狀態管理](/7-bank-project/4-state-management/README.md) | Yohan |
| 01 | 入門 | 程式語言與工具介紹 | 學習大多數程式語言的基本原理以及幫助專業開發者完成工作的軟體 | [程式語言與工具介紹](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | 入門 | GitHub 基礎，包含團隊合作 | 學習如何在專案中使用 GitHub，以及如何與他人協作代碼庫 | [GitHub 基礎](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | 入門 | 無障礙設計 | 學習網頁無障礙設計的基礎知識 | [無障礙設計基礎](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS 基礎 | JavaScript 資料類型 | JavaScript 資料類型的基礎知識 | [資料類型](/2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS 基礎 | 函數與方法 | 學習如何使用函數與方法管理應用程式的邏輯流程 | [函數與方法](/2-js-basics/2-functions-methods/README.md) | Jasmine 和 Christopher |
| 06 | JS 基礎 | 使用 JS 做出決策 | 學習如何透過決策方法在程式碼中創建條件 | [做出決策](/2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS 基礎 | 陣列與迴圈 | 使用 JavaScript 中的陣列與迴圈處理資料 | [陣列與迴圈](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [生態瓶](/3-terrarium/solution/README.md) | HTML 實作 | 建立 HTML 以創建線上生態瓶，專注於建立佈局 | [HTML 介紹](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [生態瓶](/3-terrarium/solution/README.md) | CSS 實作 | 建立 CSS 以設計線上生態瓶，專注於 CSS 的基礎知識，包括使頁面響應式 | [CSS 介紹](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](/3-terrarium/solution/README.md) | JavaScript 閉包、DOM 操作 | 建立 JavaScript 使生態瓶具備拖放介面功能，重點在於閉包和 DOM 操作 | [JavaScript 閉包、DOM 操作](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](/4-typing-game/solution/README.md) | 建立打字遊戲 | 學習如何使用鍵盤事件來驅動 JavaScript 應用程式的邏輯 | [事件驅動程式設計](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | 瀏覽器相關工作 | 學習瀏覽器的運作方式、歷史，以及如何搭建瀏覽器擴充功能的初始元素 | [關於瀏覽器](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | 建立表單、呼叫 API 並將變數儲存於本地存儲 | 建立瀏覽器擴充功能的 JavaScript 元素，使用儲存在本地存儲中的變數來呼叫 API | [API、表單與本地存儲](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | 瀏覽器背景處理程序、網頁效能 | 使用瀏覽器的背景處理程序來管理擴充功能的圖示；學習網頁效能及一些優化方法 | [背景任務與效能](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution/README.md) | 更進階的 JavaScript 遊戲開發 | 學習使用類別和組合進行繼承，以及 Pub/Sub 模式，為建立遊戲做準備 | [進階遊戲開發介紹](/6-space-game/1-introduction/README.md) | Chris |
| 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 |
| 18 | [Space Game](/6-space-game/solution/README.md) | 碰撞檢測 | 使用按鍵讓元素碰撞並相互反應，並提供冷卻功能以確保遊戲效能 | [碰撞檢測](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution/README.md) | 計分 | 根據遊戲的狀態和效能進行數學計算 | [計分](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution/README.md) | 結束並重新開始遊戲 | 學習如何結束並重新開始遊戲，包括清理資產和重置變數值 | [結束條件](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution/README.md) | 網頁應用程式中的 HTML 模板與路由 | 學習如何使用路由和 HTML 模板建立多頁網站的架構 | [HTML 模板與路由](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution/README.md) | 建立登入與註冊表單 | 學習如何建立表單並處理驗證程序 | [表單](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution/README.md) | 資料的擷取與使用方法 | 資料如何在應用程式中流動、如何擷取、儲存及處理 | [資料](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution/README.md) | 狀態管理的概念 | 學習應用程式如何保留狀態以及如何以程式方式管理它 | [狀態管理](/7-bank-project/4-state-management/README.md) | Yohan |
## 🏫 教學法
我們的課程設計基於兩個主要的教學原則：
* 基於項目的學習
* 頻繁的小測驗
我們的課程設計基於兩個主要教學原則：
* 專案導向學習
* 頻繁測驗
這個課程教授 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 此 repo，並在您的本地機器上 [安裝 Docsify](https://docsify.js.org/#/quickstart)，然後在此 repo 的根目錄中輸入 `docsify serve`。網站將在本地端的 3000 端口上提供服務：`localhost:3000`。
## 📘 PDF
@ -186,19 +193,21 @@ CO_OP_TRANSLATOR_METADATA:
- [使用 JavaScript 的生成式 AI](https://github.com/microsoft/generative-ai-with-javascript)
- [使用 Java 的生成式 AI](https://github.com/microsoft/Generative-AI-for-beginners-java)
- [AI 初學者課程](https://aka.ms/ai-beginners)
- [數據科學初學者課程](https://aka.ms/datascience-beginners)
- [資料科學初學者課程](https://aka.ms/datascience-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/iot-beginners)
- [XR 開發初學者課程](https://github.com/microsoft/xr-development-for-beginners)
- [掌握 GitHub Copilot 的智能使用](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
- [掌握 GitHub Copilot 的 C#/.NET 開發者課程](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
- [GitHub Copilot 的專業使用](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
- [GitHub Copilot 的 C#/.NET 開發者專業使用](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
- [選擇您的 Copilot 冒險](https://github.com/microsoft/CopilotAdventures)
## 授權
此存儲庫基於 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) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而產生的任何誤解或錯誤解讀概不負責。

113
translations/ru/README.md
Unescape View File

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b672130244189715ac084c3259f6ab58",
"translation_date": "2025-08-25T20:42:02+00:00",
"original_hash": "ae32f39b259a395c57b209d9e5b8c10b",
"translation_date": "2025-08-28T00:06:44+00:00",
"source_file": "README.md",
"language_code": "ru"
}
@ -21,13 +21,20 @@ CO_OP_TRANSLATOR_METADATA:
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[![Microsoft Azure AI Foundry Discord](https://dcbadge.limes.pink/api/server/ByRwuEEgH4)](https://discord.com/invite/ByRwuEEgH4)
Следуйте этим шагам, чтобы начать использовать эти ресурсы:
1. **Сделайте форк репозитория**: Нажмите [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Клонируйте репозиторий**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Присоединяйтесь к Discord Azure AI Foundry и познакомьтесь с экспертами и другими разработчиками**](https://discord.com/invite/ByRwuEEgH4)
# Веб-разработка для начинающих — учебный курс
Изучите основы веб-разработки с нашим 12-недельным курсом от Microsoft Cloud Advocates. Каждое из 24 занятий посвящено JavaScript, CSS и HTML через практические проекты, такие как террариумы, расширения для браузеров и космические игры. Участвуйте в викторинах, обсуждениях и практических заданиях. Улучшите свои навыки и закрепите знания благодаря эффективной проектной методике обучения. Начните свой путь в программировании уже сегодня!
#### 🧑‍🎓 _Вы студент?_
Посетите [**страницу Student Hub**](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 уже доступен
@ -39,7 +46,7 @@ CO_OP_TRANSLATOR_METADATA:
<img src="./images/background.png" width="600px" />
</div>
- Уроки, охватывающие все — от основ до RAG.
- Уроки, охватывающие все от основ до RAG.
- Взаимодействуйте с историческими персонажами с помощью GenAI и нашего приложения-компаньона.
- Увлекательный сюжет, вы будете путешествовать во времени!
@ -49,7 +56,7 @@ CO_OP_TRANSLATOR_METADATA:
Каждый урок включает задание, проверку знаний и вызов, чтобы изучить такие темы, как:
- Создание запросов и инженерия запросов
- Генерация приложений с текстом и изображениями
- Генерация текстовых и графических приложений
- Приложения для поиска
Посетите [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), чтобы начать!
@ -64,9 +71,9 @@ CO_OP_TRANSLATOR_METADATA:
Для дальнейшего обучения мы настоятельно рекомендуем изучить [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 с копией учебного курса.
@ -79,19 +86,19 @@ CO_OP_TRANSLATOR_METADATA:
В вашей копии репозитория, которую вы создали, нажмите кнопку **Code** и выберите **Open with Codespaces**. Это создаст новый Codespace для работы.
<img src="./images/createcodespace.png" alt="Create 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), проведет вас через различные варианты этих инструментов, чтобы вы могли выбрать наиболее подходящий для вас.
Чтобы запустить курс локально на вашем компьютере, вам понадобится текстовый редактор, браузер и инструмент командной строки. Наш первый урок, [Введение в языки программирования и инструменты](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/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).
1. Клонируйте ваш репозиторий на компьютер. Вы можете сделать это, нажав кнопку **Code** и скопировав URL:
<img src="./images/createcodespace.png" alt="Copy your repository 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
git clone <your-repository-url>
@ -115,37 +122,37 @@ CO_OP_TRANSLATOR_METADATA:
- вызов
- дополнительное чтение
- задание
- итоговую викторину
- [итоговую викторину](https://ff-quizzes.netlify.app/)
> **Примечание о викторинах**: Все викторины находятся в папке Quiz-app, всего 48 викторин по три вопроса каждая. Они связаны с уроками, и приложение для викторин можно запустить локально или развернуть в 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 |
| 02 | Начало работы | Основы GitHub, включая работу в команде | Как использовать GitHub в вашем проекте, как сотрудничать с другими разработчиками | [Введение в GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Начало работы | Доступность | Узнайте основы доступности веб-сайтов | [Основы доступности](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| | Название проекта | Изучаемые концепции | Цели обучения | Ссылка на урок | Автор |
| :-: | :----------------------------------------------------------: | :-----------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Начало работы | Введение в программирование и инструменты | Узнайте основные принципы большинства языков программирования и о программном обеспечении, которое помогает профессиональным разработчикам выполнять свою работу | [Введение в языки программирования и инструменты](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Начало работы | Основы GitHub, включая работу в команде | Как использовать GitHub в вашем проекте, как сотрудничать с другими над кодовой базой | [Введение в GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Начало работы | Доступность | Узнайте основы веб-доступности | [Основы доступности](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Основы JS | Типы данных в JavaScript | Основы типов данных в JavaScript | [Типы данных](/2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Основы JS | Функции и методы | Узнайте о функциях и методах для управления логикой приложения | [Функции и методы](/2-js-basics/2-functions-methods/README.md) | Jasmine и 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 |
| 08 | [Террариум](/3-terrarium/solution/README.md) | HTML на практике | Создайте HTML для онлайн-террариума, сосредоточившись на создании макета | [Введение в HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Террариум](/3-terrarium/solution/README.md) | CSS на практике | Создайте CSS для стилизации онлайн-террариума, сосредоточившись на основах CSS, включая адаптивность | [Введение в CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Террариум](/3-terrarium/solution/README.md) | Замыкания в JavaScript, работа с DOM | Напишите JavaScript, чтобы террариум работал как интерфейс drag/drop, сосредоточившись на замыканиях и работе с DOM | [Замыкания в JavaScript, работа с DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Игра на скорость набора текста](/4-typing-game/solution/README.md) | Создание игры на скорость набора текста | Узнайте, как использовать события клавиатуры для управления логикой вашего JavaScript-приложения | [Программирование, управляемое событиями](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Работа с браузерами | Узнайте, как работают браузеры, их историю и как создать первые элементы расширения для браузера | [О браузерах](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Создание формы, вызов API и сохранение переменных в локальном хранилище | Создайте элементы JavaScript для вашего расширения браузера, чтобы вызывать API, используя переменные, сохраненные в локальном хранилище | [API, формы и локальное хранилище](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Фоновые процессы в браузере, производительность веба | Используйте фоновые процессы браузера для управления значком расширения; узнайте о производительности веба и некоторых оптимизациях | [Фоновые задачи и производительность](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution/README.md) | Более сложная разработка игр на JavaScript | Узнайте о наследовании с использованием классов и композиции, а также о паттерне Pub/Sub, чтобы подготовиться к созданию игры | [Введение в сложную разработку игр](/6-space-game/1-introduction/README.md) | Chris |
| 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 |
| 18 | [Space Game](/6-space-game/solution/README.md) | Обнаружение столкновений | Сделайте так, чтобы элементы сталкивались и реагировали друг на друга, используя нажатия клавиш, и добавьте функцию задержки для обеспечения производительности игры | [Обнаружение столкновений](/6-space-game/4-collision-detection/README.md) | Chris |
| 10 | [Terrarium](/3-terrarium/solution/README.md) | Замыкания в JavaScript, работа с DOM | Напишите JavaScript, чтобы террариум работал как интерфейс с функцией перетаскивания, сосредоточив внимание на замыканиях и работе с DOM | [Замыкания в JavaScript, работа с DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](/4-typing-game/solution/README.md) | Создание игры на набор текста | Узнайте, как использовать события клавиатуры для управления логикой вашего JavaScript-приложения | [Программирование, основанное на событиях](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Работа с браузерами | Узнайте, как работают браузеры, их историю, и как создать первые элементы расширения для браузера | [О браузерах](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Создание формы, вызов API и сохранение переменных в локальном хранилище | Напишите элементы JavaScript для вашего расширения браузера, чтобы вызывать API, используя переменные, сохраненные в локальном хранилище | [API, формы и локальное хранилище](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Фоновые процессы в браузере, производительность веб-страниц | Используйте фоновые процессы браузера для управления иконкой расширения; узнайте о производительности веб-страниц и некоторых оптимизациях | [Фоновые задачи и производительность](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution/README.md) | Более сложная разработка игр на JavaScript | Узнайте об использовании наследования через классы и композицию, а также о паттерне Pub/Sub, готовясь к созданию игры | [Введение в сложную разработку игр](/6-space-game/1-introduction/README.md) | Chris |
| 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 |
| 18 | [Space Game](/6-space-game/solution/README.md) | Обнаружение столкновений | Реализуйте столкновения элементов и их реакцию друг на друга с использованием нажатий клавиш, а также добавьте функцию задержки для повышения производительности игры | [Обнаружение столкновений](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution/README.md) | Подсчет очков | Выполняйте математические вычисления на основе статуса и производительности игры | [Подсчет очков](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution/README.md) | Завершение и перезапуск игры | Узнайте о завершении и перезапуске игры, включая очистку ресурсов и сброс значений переменных | [Условие завершения](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution/README.md) | HTML-шаблоны и маршруты в веб-приложении | Узнайте, как создать структуру архитектуры многостраничного сайта, используя маршрутизацию и HTML-шаблоны | [HTML-шаблоны и маршруты](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution/README.md) | Создание формы входа и регистрации | Узнайте о создании форм и обработке процедур проверки | [Формы](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution/README.md) | Методы получения и использования данных | Узнайте, как данные поступают в ваше приложение и выходят из него, как их получать, сохранять и удалять | [Данные](/7-bank-project/3-data/README.md) | Yohan |
| 20 | [Space Game](/6-space-game/solution/README.md) | Завершение и перезапуск игры | Узнайте, как завершать и перезапускать игру, включая очистку ресурсов и сброс значений переменных | [Условие завершения](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution/README.md) | HTML-шаблоны и маршруты в веб-приложении | Узнайте, как создать структуру многостраничного веб-сайта с использованием маршрутизации и HTML-шаблонов | [HTML-шаблоны и маршруты](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution/README.md) | Создание формы входа и регистрации | Узнайте, как создавать формы и обрабатывать процедуры валидации | [Формы](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution/README.md) | Методы получения и использования данных | Узнайте, как данные поступают в ваше приложение, как их извлекать, сохранять и удалять | [Данные](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution/README.md) | Концепции управления состоянием | Узнайте, как ваше приложение сохраняет состояние и как управлять им программно | [Управление состоянием](/7-bank-project/4-state-management/README.md) | Yohan |
@ -153,17 +160,17 @@ CO_OP_TRANSLATOR_METADATA:
Наша учебная программа разработана с учетом двух ключевых педагогических принципов:
* обучение на основе проектов
* частые тесты
* частые викторины
Программа обучает основам JavaScript, HTML и CSS, а также последним инструментам и техникам, которые используют современные веб-разработчики. У студентов будет возможность получить практический опыт, создавая игру на скорость набора текста, виртуариум, экологичное расширение для браузера, игру в стиле "космических захватчиков" и банковское приложение для бизнеса. К концу курса студенты получат прочное понимание веб-разработки.
Программа обучает основам JavaScript, HTML и CSS, а также последним инструментам и техникам, используемым современными веб-разработчиками. Студенты получат возможность развить практические навыки, создавая игру на набор текста, виртуальное террариум, экологичное расширение для браузера, игру в стиле "космических захватчиков" и банковское приложение для бизнеса. К концу курса студенты получат прочное понимание веб-разработки.
> 🎓 Вы можете пройти первые несколько уроков этой программы как [Учебный путь](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn!
Обеспечивая соответствие содержания проектам, процесс становится более увлекательным для студентов, а усвоение концепций усиливается. Мы также написали несколько начальных уроков по основам JavaScript для введения в концепции, сопровождаемых видео из коллекции "[Серия для начинающих: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", некоторые из авторов которой внесли вклад в эту учебную программу.
Обеспечивая соответствие контента проектам, процесс становится более увлекательным для студентов, а усвоение концепций усиливается. Мы также написали несколько вводных уроков по основам JavaScript, которые сопровождаются видео из коллекции "[Серия для начинающих: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", некоторые из авторов которой внесли вклад в эту учебную программу.
Кроме того, низкоуровневый тест перед занятием задает намерение студента изучить тему, а второй тест после занятия обеспечивает дальнейшее усвоение материала. Эта учебная программа была разработана как гибкая и увлекательная и может быть пройдена полностью или частично. Проекты начинаются с простых и становятся все более сложными к концу 12-недельного цикла.
Кроме того, низкострессовая викторина перед занятием настраивает студента на изучение темы, а вторая викторина после занятия способствует дальнейшему усвоению материала. Эта учебная программа была разработана как гибкая и увлекательная, и ее можно проходить полностью или частично. Проекты начинаются с простых и становятся все более сложными к концу 12-недельного цикла.
Хотя мы намеренно избегали введения JavaScript-фреймворков, чтобы сосредоточиться на базовых навыках, необходимых веб-разработчику перед освоением фреймворка, хорошим следующим шагом после завершения этой программы будет изучение Node.js через другую коллекцию видео: "[Серия для начинающих: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Хотя мы намеренно избегали введения JavaScript-фреймворков, чтобы сосредоточиться на базовых навыках, необходимых веб-разработчику перед освоением фреймворков, хорошим следующим шагом после завершения этой программы будет изучение Node.js через другую коллекцию видео: "[Серия для начинающих: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Ознакомьтесь с нашими [Правилами поведения](CODE_OF_CONDUCT.md) и [Руководством по внесению изменений](CONTRIBUTING.md). Мы приветствуем ваши конструктивные отзывы!
@ -174,31 +181,33 @@ CO_OP_TRANSLATOR_METADATA:
## 📘 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 для начинающих](https://aka.ms/genai-beginners)
- [Generative AI для начинающих .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
- [Generative AI с JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
- [Generative AI с Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
- [AI для начинающих](https://aka.ms/ai-beginners)
- [Data Science для начинающих](https://aka.ms/datascience-beginners)
- [ML для начинающих](https://aka.ms/ml-beginners)
- [Генеративный ИИ для начинающих](https://aka.ms/genai-beginners)
- [Генеративный ИИ для начинающих .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
- [Генеративный ИИ с JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
- [Генеративный ИИ с Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
- [ИИ для начинающих](https://aka.ms/ai-beginners)
- [Наука о данных для начинающих](https://aka.ms/datascience-beginners)
- [Машинное обучение для начинающих](https://aka.ms/ml-beginners)
- [Кибербезопасность для начинающих](https://github.com/microsoft/Security-101)
- [Web Dev для начинающих](https://aka.ms/webdev-beginners)
- [IoT для начинающих](https://aka.ms/iot-beginners)
- [Веб-разработка для начинающих](https://aka.ms/webdev-beginners)
- [Интернет вещей для начинающих](https://aka.ms/iot-beginners)
- [Разработка XR для начинающих](https://github.com/microsoft/xr-development-for-beginners)
- [Мастерство GitHub Copilot для агентного использования](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
- [Мастерство GitHub Copilot для разработчиков C#/.NET](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
- [Выбери свое приключение с Copilot](https://github.com/microsoft/CopilotAdventures)
- [Освоение GitHub Copilot для агентного использования](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
- [Освоение GitHub Copilot для разработчиков C#/.NET](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
- [Выберите свое приключение с Copilot](https://github.com/microsoft/CopilotAdventures)
## Лицензия
Этот репозиторий лицензирован под лицензией MIT. См. файл [LICENSE](../../LICENSE) для получения дополнительной информации.
Этот репозиторий лицензирован под лицензией MIT. Подробнее см. в файле [LICENSE](../../LICENSE).
---
**Отказ от ответственности**:
Этот документ был переведен с использованием сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Хотя мы стремимся к точности, пожалуйста, учитывайте, что автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода.

132
translations/ur/README.md
Unescape View File

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b672130244189715ac084c3259f6ab58",
"translation_date": "2025-08-25T20:44:03+00:00",
"original_hash": "ae32f39b259a395c57b209d9e5b8c10b",
"translation_date": "2025-08-28T00:09:05+00:00",
"source_file": "README.md",
"language_code": "ur"
}
@ -21,17 +21,24 @@ CO_OP_TRANSLATOR_METADATA:
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[![Microsoft Azure AI Foundry Discord](https://dcbadge.limes.pink/api/server/ByRwuEEgH4)](https://discord.com/invite/ByRwuEEgH4)
ان وسائل کو استعمال کرنے کے لیے درج ذیل مراحل پر عمل کریں:
1. **ریپوزٹری کو فورک کریں**: یہاں کلک کریں [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **ریپوزٹری کو کلون کریں**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Azure AI Foundry Discord میں شامل ہوں اور ماہرین اور دیگر ڈویلپرز سے ملاقات کریں**](https://discord.com/invite/ByRwuEEgH4)
# ویب ڈویلپمنٹ برائے ابتدائی - ایک نصاب
مائیکروسافٹ کلاؤڈ ایڈووکیٹس کے ذریعے 12 ہفتوں کا جامع کورس سیکھیں جو ویب ڈویلپمنٹ کی بنیادی باتوں پر مشتمل ہے۔ 24 اسباق میں جاوا اسکرپٹ، سی ایس ایس، اور ایچ ٹی ایم ایل کو عملی منصوبوں جیسے ٹیراریئمز، براؤزر ایکسٹینشنز، اور اسپیس گیمز کے ذریعے سکھایا گیا ہے۔ کوئزز، مباحثے، اور عملی اسائنمنٹس کے ذریعے اپنی مہارت کو بہتر بنائیں اور پروجیکٹ پر مبنی تدریسی طریقہ کار کے ذریعے اپنے علم کو مضبوط کریں۔ آج ہی اپنے کوڈنگ کے سفر کا آغاز کریں!
مائیکروسافٹ کلاؤڈ ایڈووکیٹس کے 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 نصاب مت چھوڑیں!
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) پر جائیں اور شروع کریں!
@ -39,64 +46,63 @@ CO_OP_TRANSLATOR_METADATA:
<img src="./images/background.png" width="600px" />
</div>
- بنیادی باتوں سے لے کر RAG تک کے اسباق۔
- جنریٹو اے آئی اور ہماری ساتھی ایپ کے ذریعے تاریخی کرداروں کے ساتھ بات چیت کریں۔
- ایک دلچسپ اور پرلطف کہانی، آپ وقت میں سفر کریں گے!
- اسباق جو بنیادی باتوں سے لے کر RAG تک سب کچھ شامل کرتے ہیں۔
- GenAI اور ہماری ساتھی ایپ کے ذریعے تاریخی کرداروں کے ساتھ بات چیت کریں۔
- ایک دلچسپ اور پرکشش کہانی، آپ وقت میں سفر کریں گے!
<div>
<img src="./images/character.png" width="600px" />
</div>
ہر سبق میں شامل ہیں:
- اسائنمنٹ مکمل کریں
ہر سبق میں شامل ہے:
- ایک اسائنمنٹ مکمل کریں
- علم کی جانچ
- چیلنج
آپ درج ذیل موضوعات سیکھیں گے:
- پرامپٹنگ اور پرامپٹ انجینئرنگ
- ٹیکسٹ اور امیج ایپ جنریشن
- سرچ ایپس
- ایک چیلنج
- موضوعات سیکھنے کے لیے رہنمائی جیسے:
- پرامپٹنگ اور پرامپٹ انجینئرنگ
- ٹیکسٹ اور امیج ایپ جنریشن
- سرچ ایپس
[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) کو اضافی مطالعہ کے مواد کے لیے دریافت کریں۔
### 📋 اپنا ماحول ترتیب دیں
### 📋 اپنے ماحول کو ترتیب دینا
یہ نصاب ایک تیار شدہ ترقیاتی ماحول کے ساتھ آتا ہے! جب آپ شروع کریں تو آپ اس نصاب کو [Codespace](https://github.com/features/codespaces/) (_ایک براؤزر پر مبنی، بغیر کسی انسٹالیشن کے ماحول_) یا اپنے کمپیوٹر پر مقامی طور پر ایک ٹیکسٹ ایڈیٹر جیسے [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) کے ذریعے چلا سکتے ہیں۔
یہ نصاب ایک تیار شدہ ترقیاتی ماحول کے ساتھ آتا ہے! جب آپ شروع کریں تو آپ اس نصاب کو [Codespace](https://github.com/features/codespaces/) (_ایک براؤزر پر مبنی، بغیر کسی انسٹال کے ماحول_) یا اپنے کمپیوٹر پر مقامی طور پر ایک ٹیکسٹ ایڈیٹر جیسے [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) کا استعمال کرتے ہوئے چلا سکتے ہیں۔
#### اپنی ریپوزٹری بنائیں
اپنے کام کو آسانی سے محفوظ کرنے کے لیے، یہ تجویز کیا جاتا ہے کہ آپ اس ریپوزٹری کی اپنی کاپی بنائیں۔ آپ یہ صفحے کے اوپر **Use this template** بٹن پر کلک کرکے کر سکتے ہیں۔ یہ آپ کے GitHub اکاؤنٹ میں نصاب کی ایک کاپی کے ساتھ ایک نئی ریپوزٹری بنائے گا۔
مندرجہ ذیل اقدامات کریں:
مندرجہ ذیل مراحل پر عمل کریں:
1. **ریپوزٹری کو فورک کریں**: اس صفحے کے اوپر دائیں کونے میں "Fork" بٹن پر کلک کریں۔
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;"/>
#### نصاب کو اپنے کمپیوٹر پر مقامی طور پر چلائیں
#### نصاب کو اپنے کمپیوٹر پر مقامی طور پر چلانا
اس نصاب کو اپنے کمپیوٹر پر مقامی طور پر چلانے کے لیے، آپ کو ایک ٹیکسٹ ایڈیٹر، ایک براؤزر، اور ایک کمانڈ لائن ٹول کی ضرورت ہوگی۔ ہمارا پہلا سبق، [پروگرامنگ زبانوں اور ٹولز کا تعارف](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages)، آپ کو ان ٹولز کے مختلف اختیارات کے ذریعے رہنمائی کرے گا تاکہ آپ وہ منتخب کریں جو آپ کے لیے بہترین ہو۔
اس نصاب کو اپنے کمپیوٹر پر مقامی طور پر چلانے کے لیے، آپ کو ایک ٹیکسٹ ایڈیٹر، ایک براؤزر اور ایک کمانڈ لائن ٹول کی ضرورت ہوگی۔ ہمارا پہلا سبق، [پروگرامنگ لینگویجز اور ٹولز کا تعارف](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages)، آپ کو ان ٹولز کے مختلف اختیارات کے ذریعے رہنمائی کرے گا تاکہ آپ وہ منتخب کریں جو آپ کے لیے بہترین کام کرتا ہے۔
ہماری تجویز ہے کہ آپ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) کو اپنے ایڈیٹر کے طور پر استعمال کریں، جس میں ایک بلٹ ان [ٹرمینل](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) بھی شامل ہے۔ آپ Visual Studio Code کو [یہاں](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) سے ڈاؤن لوڈ کر سکتے ہیں۔
ہماری سفارش ہے کہ آپ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) کو اپنے ایڈیٹر کے طور پر استعمال کریں، جس میں ایک بلٹ ان [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) بھی شامل ہے۔ آپ [یہاں](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) سے Visual Studio Code ڈاؤن لوڈ کر سکتے ہیں۔
1. اپنی ریپوزٹری کو اپنے کمپیوٹر پر کلون کریں۔ آپ یہ **Code** بٹن پر کلک کرکے اور URL کو کاپی کرکے کر سکتے ہیں:
<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) کے اندر [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) کھولیں اور درج ذیل کمانڈ چلائیں، `<your-repository-url>` کو اس URL سے تبدیل کریں جو آپ نے ابھی کاپی کیا ہے:
```bash
git clone <your-repository-url>
@ -109,73 +115,73 @@ CO_OP_TRANSLATOR_METADATA:
> * [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) - کوڈ تیزی سے لکھنے میں مدد کے لیے
## 📂 ہر سبق میں شامل ہیں:
## 📂 ہر سبق میں شامل ہے:
- اختیاری اسکیچ نوٹ
- اختیاری اضافی ویڈیو
- سبق سے پہلے کا وارم اپ کوئز
- پری سبق وارم اپ کوئز
- تحریری سبق
- پروجیکٹ پر مبنی اسباق کے لیے، پروجیکٹ بنانے کے لیے مرحلہ وار رہنما
- علم کی جانچ
- ایک چیلنج
- اضافی مطالعہ
- اسائنمنٹ
- سبق کے بعد کا کوئز
- [پوسٹ سبق کوئز](https://ff-quizzes.netlify.app/)
> **کوئزز کے بارے میں نوٹ**: تمام کوئزز Quiz-app فولڈر میں موجود ہیں، کل 48 کوئزز، ہر ایک میں تین سوالات۔ یہ اسباق کے اندر سے منسلک ہیں۔ Quiz-app کو مقامی طور پر چلایا جا سکتا ہے یا Azure پر تعینات کیا جا سکتا ہے؛ `quiz-app` فولڈر میں ہدایات پر عمل کریں۔ یہ بتدریج مقامی زبانوں میں ترجمہ کیے جا رہے ہیں۔
> **کوئزز کے بارے میں نوٹ**: تمام کوئزز Quiz-app فولڈر میں موجود ہیں، کل 48 کوئزز، ہر ایک میں تین سوالات۔ یہ [یہاں](https://ff-quizzes.netlify.app/) دستیاب ہیں۔ Quiz-app کو مقامی طور پر چلایا جا سکتا ہے یا Azure پر تعینات کیا جا سکتا ہے؛ `quiz-app` فولڈر میں ہدایات پر عمل کریں۔
## 🗃️ اسباق
| | پروجیکٹ کا نام | سکھائے گئے تصورات | سیکھنے کے مقاصد | منسلک سبق | مصنف |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | شروعات | پروگرامنگ اور ٹولز کا تعارف | زیادہ تر پروگرامنگ زبانوں کے بنیادی اصول اور وہ سافٹ ویئر سیکھیں جو پیشہ ور ڈویلپرز اپنے کام کے لیے استعمال کرتے ہیں | [پروگرامنگ زبانوں اور ٹولز کا تعارف](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | جیسمن |
| 02 | شروعات | GitHub کی بنیادی باتیں، ٹیم کے ساتھ کام کرنا | اپنے پروجیکٹ میں GitHub کا استعمال کیسے کریں، دوسروں کے ساتھ کوڈ بیس پر تعاون کیسے کریں | [GitHub کا تعارف](/1-getting-started-lessons/2-github-basics/README.md) | فلور |
| 01 | شروعات | پروگرامنگ اور ٹولز کا تعارف | زیادہ تر پروگرامنگ زبانوں کے بنیادی اصول اور وہ سافٹ ویئر سیکھیں جو پیشہ ور ڈویلپرز اپنے کام کے لیے استعمال کرتے ہیں | [پروگرامنگ لینگویجز اور ٹولز کا تعارف](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | جیسمن |
| 02 | شروعات | GitHub کی بنیادی باتیں، ٹیم کے ساتھ کام کرنا | اپنے پروجیکٹ میں GitHub کا استعمال کیسے کریں، کوڈ بیس پر دوسروں کے ساتھ تعاون کیسے کریں | [GitHub کا تعارف](/1-getting-started-lessons/2-github-basics/README.md) | فلور |
| 03 | شروعات | رسائی | ویب رسائی کی بنیادی باتیں سیکھیں | [رسائی کے بنیادی اصول](/1-getting-started-lessons/3-accessibility/README.md) | کرسٹوفر |
| 04 | جاوا اسکرپٹ کی بنیادی باتیں | جاوا اسکرپٹ ڈیٹا کی اقسام | جاوا اسکرپٹ ڈیٹا کی اقسام کی بنیادی باتیں | [ڈیٹا کی اقسام](/2-js-basics/1-data-types/README.md) | جیسمن |
| 05 | جاوا اسکرپٹ کی بنیادی باتیں | فنکشنز اور میتھڈز | ایپلیکیشن کے لاجک فلو کو منظم کرنے کے لیے فنکشنز اور میتھڈز کے بارے میں سیکھیں | [فنکشنز اور میتھڈز](/2-js-basics/2-functions-methods/README.md) | جیسمن اور کرسٹوفر |
| 06 | جاوا اسکرپٹ کی بنیادی باتیں | جاوا اسکرپٹ کے ساتھ فیصلے کرنا | فیصلہ سازی کے طریقوں کا استعمال کرتے ہوئے اپنے کوڈ میں حالات کیسے بنائیں | [فیصلے کرنا](/2-js-basics/3-making-decisions/README.md) | جیسمن |
| 07 | جاوا اسکرپٹ کی بنیادی باتیں | Arrays اور Loops | جاوا اسکرپٹ میں ڈیٹا کے ساتھ کام کرنے کے لیے Arrays اور Loops کا استعمال کریں | [Arrays اور Loops](/2-js-basics/4-arrays-loops/README.md) | جیسمن |
| 08 | [ٹیراریئم](/3-terrarium/solution/README.md) | HTML کی مشق | ایک آن لائن ٹیراریئم بنانے کے لیے HTML بنائیں، لے آؤٹ بنانے پر توجہ مرکوز کریں | [HTML کا تعارف](/3-terrarium/1-intro-to-html/README.md) | جین |
| 09 | [ٹیراریئم](/3-terrarium/solution/README.md) | CSS کی مشق | آن لائن ٹیراریئم کو اسٹائل کرنے کے لیے CSS بنائیں، CSS کی بنیادی باتوں پر توجہ مرکوز کریں، بشمول صفحہ کو ریسپانسیو بنانا | [CSS کا تعارف](/3-terrarium/2-intro-to-css/README.md) | جین |
| 10 | [ٹیراریئم](/3-terrarium/solution/README.md) | جاوا اسکرپٹ کلوزرز، DOM میں تبدیلی | ٹیراریئم کو ڈریگ/ڈراپ انٹرفیس کے طور پر کام کرنے کے لیے جاوا اسکرپٹ بنائیں، کلوزرز اور DOM میں تبدیلی پر توجہ مرکوز کریں | [جاوا اسکرپٹ کلوزرز، DOM میں تبدیلی](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | جین |
| 11 | [ٹائپنگ گیم](/4-typing-game/solution/README.md) | ایک ٹائپنگ گیم بنائیں | جاوا اسکرپٹ ایپ کی منطق کو چلانے کے لیے کی بورڈ ایونٹس کا استعمال کیسے کریں | [ایونٹ پر مبنی پروگرامنگ](/4-typing-game/typing-game/README.md) | کرسٹوفر |
| 12 | [گرین براؤزر ایکسٹینشن](/5-browser-extension/solution/README.md) | براؤزرز کے ساتھ کام کرنا | سیکھیں کہ براؤزرز کیسے کام کرتے ہیں، ان کی تاریخ، اور براؤزر ایکسٹینشن کے ابتدائی عناصر کیسے بنائے جائیں | [براؤزرز کے بارے میں](/5-browser-extension/1-about-browsers/README.md) | جین |
| 13 | [گرین براؤزر ایکسٹینشن](/5-browser-extension/solution/README.md) | فارم بنانا، API کال کرنا اور لوکل اسٹوریج میں ویریبلز محفوظ کرنا | اپنے براؤزر ایکسٹینشن کے جاوا اسکرپٹ عناصر بنائیں تاکہ لوکل اسٹوریج میں محفوظ ویریبلز کے ذریعے API کال کی جا سکے | [APIs، فارمز، اور لوکل اسٹوریج](/5-browser-extension/2-forms-browsers-local-storage/README.md) | جین |
| 14 | [گرین براؤزر ایکسٹینشن](/5-browser-extension/solution/README.md) | براؤزر میں بیک گراؤنڈ پروسیسز، ویب پرفارمنس | براؤزر کے بیک گراؤنڈ پروسیسز کا استعمال کریں تاکہ ایکسٹینشن کے آئیکن کو مینیج کیا جا سکے؛ ویب پرفارمنس اور کچھ آپٹیمائزیشنز کے بارے میں سیکھیں | [بیک گراؤنڈ ٹاسکس اور پرفارمنس](/5-browser-extension/3-background-tasks-and-performance/README.md) | جین |
| 15 | [اسپیس گیم](/6-space-game/solution/README.md) | جاوا اسکرپٹ کے ساتھ مزید ایڈوانس گیم ڈیولپمنٹ | کلاسز اور کمپوزیشن دونوں کے ذریعے انہرٹینس کے بارے میں سیکھیں اور گیم بنانے کی تیاری کے لیے پب/سب پیٹرن کو سمجھیں | [ایڈوانس گیم ڈیولپمنٹ کا تعارف](/6-space-game/1-introduction/README.md) | کرس |
| 16 | [اسپیس گیم](/6-space-game/solution/README.md) | کینوس پر ڈرائنگ | کینوس API کے بارے میں سیکھیں، جو اسکرین پر عناصر ڈرائنگ کرنے کے لیے استعمال ہوتا ہے | [کینوس پر ڈرائنگ](/6-space-game/2-drawing-to-canvas/README.md) | کرس |
| 17 | [اسپیس گیم](/6-space-game/solution/README.md) | اسکرین پر عناصر کو حرکت دینا | دریافت کریں کہ کارٹیزین کوآرڈینیٹس اور کینوس API کے ذریعے عناصر کو حرکت کیسے دی جا سکتی ہے | [عناصر کو حرکت دینا](/6-space-game/3-moving-elements-around/README.md) | کرس |
| 18 | [اسپیس گیم](/6-space-game/solution/README.md) | تصادم کا پتہ لگانا | عناصر کو ایک دوسرے سے ٹکرانے اور ردعمل دینے کے لیے کی پریسز کا استعمال کریں اور گیم کی پرفارمنس کو یقینی بنانے کے لیے کول ڈاؤن فنکشن فراہم کریں | [تصادم کا پتہ لگانا](/6-space-game/4-collision-detection/README.md) | کرس |
| 19 | [اسپیس گیم](/6-space-game/solution/README.md) | اسکور رکھنا | گیم کی حالت اور کارکردگی کی بنیاد پر ریاضی کے حسابات کریں | [اسکور رکھنا](/6-space-game/5-keeping-score/README.md) | کرس |
| 20 | [اسپیس گیم](/6-space-game/solution/README.md) | گیم ختم کرنا اور دوبارہ شروع کرنا | گیم ختم کرنے اور دوبارہ شروع کرنے کے بارے میں سیکھیں، بشمول اثاثوں کو صاف کرنا اور ویریبلز کی قدریں ری سیٹ کرنا | [اختتامی حالت](/6-space-game/6-end-condition/README.md) | کرس |
| 21 | [بینکنگ ایپ](/7-bank-project/solution/README.md) | ویب ایپ میں HTML ٹیمپلیٹس اور روٹس | ملٹی پیج ویب سائٹ کی آرکیٹیکچر کا خاکہ بنانے کے لیے روٹنگ اور HTML ٹیمپلیٹس کا استعمال کرنا سیکھیں | [HTML ٹیمپلیٹس اور روٹس](/7-bank-project/1-template-route/README.md) | یوہان |
| 22 | [بینکنگ ایپ](/7-bank-project/solution/README.md) | لاگ ان اور رجسٹریشن فارم بنانا | فارمز بنانے اور ویلیڈیشن روٹینز کو ہینڈل کرنے کے بارے میں سیکھیں | [فارمز](/7-bank-project/2-forms/README.md) | یوہان |
| 23 | [بینکنگ ایپ](/7-bank-project/solution/README.md) | ڈیٹا حاصل کرنے اور استعمال کرنے کے طریقے | آپ کی ایپ میں ڈیٹا کیسے آتا اور جاتا ہے، اسے کیسے حاصل کریں، محفوظ کریں، اور ختم کریں | [ڈیٹا](/7-bank-project/3-data/README.md) | یوہان |
| 24 | [بینکنگ ایپ](/7-bank-project/solution/README.md) | اسٹیٹ مینجمنٹ کے تصورات | سیکھیں کہ آپ کی ایپ اسٹیٹ کو کیسے برقرار رکھتی ہے اور اسے پروگرام کے ذریعے کیسے مینیج کیا جا سکتا ہے | [اسٹیٹ مینجمنٹ](/7-bank-project/4-state-management/README.md) | یوہان |
## 🏫 تدریسی طریقہ کار
| 09 | [ٹیراریئم](/3-terrarium/solution/README.md) | CSS کی مشق | آن لائن ٹیراریئم کو اسٹائل کرنے کے لیے CSS بنائیں، CSS کی بنیادی باتوں پر توجہ مرکوز کریں بشمول صفحہ کو ریسپانسیو بنانا | [CSS کا تعارف](/3-terrarium/2-intro-to-css/README.md) | جین |
| 10 | [Terrarium](/3-terrarium/solution/README.md) | جاوا اسکرپٹ کلوزرز، ڈی او ایم مینپولیشن | جاوا اسکرپٹ کو اس طرح بنائیں کہ ٹیریریم ڈریگ/ڈراپ انٹرفیس کے طور پر کام کرے، کلوزرز اور ڈی او ایم مینپولیشن پر توجہ مرکوز کرتے ہوئے | [جاوا اسکرپٹ کلوزرز، ڈی او ایم مینپولیشن](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](/4-typing-game/solution/README.md) | ایک ٹائپنگ گیم بنائیں | سیکھیں کہ کس طرح کی بورڈ ایونٹس کو استعمال کرتے ہوئے اپنی جاوا اسکرپٹ ایپ کی منطق کو چلایا جا سکتا ہے | [ایونٹ ڈرائیون پروگرامنگ](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | براؤزرز کے ساتھ کام کرنا | سیکھیں کہ براؤزرز کیسے کام کرتے ہیں، ان کی تاریخ، اور براؤزر ایکسٹینشن کے ابتدائی عناصر کو کیسے تیار کیا جائے | [براؤزرز کے بارے میں](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | فارم بنانا، ایک API کو کال کرنا اور لوکل اسٹوریج میں ویریبلز محفوظ کرنا | اپنے براؤزر ایکسٹینشن کے جاوا اسکرپٹ عناصر کو بنائیں تاکہ لوکل اسٹوریج میں محفوظ ویریبلز کا استعمال کرتے ہوئے ایک API کو کال کیا جا سکے | [APIs، فارمز، اور لوکل اسٹوریج](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | براؤزر میں بیک گراؤنڈ پروسیسز، ویب پرفارمنس | براؤزر کے بیک گراؤنڈ پروسیسز کو ایکسٹینشن کے آئیکون کو منظم کرنے کے لیے استعمال کریں؛ ویب پرفارمنس اور کچھ آپٹیمائزیشنز کے بارے میں سیکھیں تاکہ | [بیک گراؤنڈ ٹاسکس اور پرفارمنس](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution/README.md) | جاوا اسکرپٹ کے ساتھ مزید ایڈوانس گیم ڈیولپمنٹ | کلاسز اور کمپوزیشن دونوں کا استعمال کرتے ہوئے انہرٹنس کے بارے میں سیکھیں اور گیم بنانے کی تیاری میں پب/سب پیٹرن کے بارے میں جانیں | [ایڈوانس گیم ڈیولپمنٹ کا تعارف](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution/README.md) | کینوس پر ڈرائنگ | کینوس API کے بارے میں سیکھیں، جو اسکرین پر عناصر کو ڈرائنگ کرنے کے لیے استعمال ہوتا ہے | [کینوس پر ڈرائنگ](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution/README.md) | اسکرین پر عناصر کو حرکت دینا | دریافت کریں کہ عناصر کارٹیسین کوآرڈینیٹس اور کینوس API کا استعمال کرتے ہوئے حرکت کیسے حاصل کر سکتے ہیں | [عناصر کو حرکت دینا](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution/README.md) | تصادم کا پتہ لگانا | عناصر کو ایک دوسرے سے ٹکرانے اور ردعمل دینے کے لیے بنائیں، کی پریسز کا استعمال کریں اور گیم کی کارکردگی کو یقینی بنانے کے لیے کول ڈاؤن فنکشن فراہم کریں | [تصادم کا پتہ لگانا](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution/README.md) | اسکور رکھنا | گیم کی حالت اور کارکردگی کی بنیاد پر ریاضی کے حسابات انجام دیں | [اسکور رکھنا](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution/README.md) | گیم ختم کرنا اور دوبارہ شروع کرنا | گیم کو ختم کرنے اور دوبارہ شروع کرنے کے بارے میں سیکھیں، بشمول اثاثوں کو صاف کرنا اور ویریبلز کی قدروں کو ری سیٹ کرنا | [اختتامی حالت](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution/README.md) | ایک ویب ایپ میں HTML ٹیمپلیٹس اور روٹس | سیکھیں کہ کس طرح ایک ملٹی پیج ویب سائٹ کی آرکیٹیکچر کو روٹنگ اور HTML ٹیمپلیٹس کا استعمال کرتے ہوئے تیار کیا جائے | [HTML ٹیمپلیٹس اور روٹس](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution/README.md) | لاگ ان اور رجسٹریشن فارم بنائیں | فارمز بنانے اور ویلیڈیشن روٹینز کو ہینڈل کرنے کے بارے میں سیکھیں | [فارمز](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution/README.md) | ڈیٹا کو حاصل کرنے اور استعمال کرنے کے طریقے | آپ کی ایپ میں ڈیٹا کیسے بہتا ہے، اسے کیسے حاصل کیا جائے، محفوظ کیا جائے، اور ختم کیا جائے | [ڈیٹا](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution/README.md) | اسٹیٹ مینجمنٹ کے تصورات | سیکھیں کہ آپ کی ایپ اسٹیٹ کو کیسے برقرار رکھتی ہے اور اسے پروگرام کے ذریعے کیسے منظم کیا جائے | [اسٹیٹ مینجمنٹ](/7-bank-project/4-state-management/README.md) | Yohan |
## 🏫 تدریسی اصول
ہمارا نصاب دو اہم تدریسی اصولوں پر مبنی ہے:
* پروجیکٹ پر مبنی تعلیم
* پروجیکٹ پر مبنی سیکھنا
* بار بار کوئز لینا
یہ پروگرام جاوا اسکرپٹ، HTML، اور CSS کے بنیادی اصولوں کے ساتھ ساتھ آج کے ویب ڈیولپرز کے استعمال کردہ جدید ترین ٹولز اور تکنیکوں کو سکھاتا ہے۔ طلباء کو ٹائپنگ گیم، ورچوئل ٹیریریم، ماحول دوست براؤزر ایکسٹینشن، اسپیس انویڈر اسٹائل گیم، اور کاروبار کے لیے بینکنگ ایپ بنانے کے ذریعے عملی تجربہ حاصل کرنے کا موقع ملے گا۔ اس سیریز کے اختتام تک، طلباء ویب ڈیولپمنٹ کی ایک مضبوط سمجھ حاصل کر لیں گے۔
یہ پروگرام جاوا اسکرپٹ، HTML، اور CSS کے بنیادی اصولوں کے ساتھ ساتھ آج کے ویب ڈیولپرز کے استعمال کردہ جدید ترین ٹولز اور تکنیکوں کو سکھاتا ہے۔ طلباء کو ٹائپنگ گیم، ورچوئل ٹیریریم، ماحول دوست براؤزر ایکسٹینشن، اسپیس انویڈر اسٹائل گیم، اور کاروباروں کے لیے بینکنگ ایپ بنانے کے ذریعے عملی تجربہ حاصل کرنے کا موقع ملے گا۔ اس سیریز کے اختتام تک، طلباء ویب ڈیولپمنٹ کی ٹھوس سمجھ حاصل کر چکے ہوں گے۔
> 🎓 آپ اس نصاب کے ابتدائی چند اسباق کو [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) پر Microsoft Learn پر لے سکتے ہیں!
> 🎓 آپ اس نصاب کے ابتدائی چند اسباق کو 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`.
## 📘 پی ڈی ایف
@ -205,5 +211,7 @@ CO_OP_TRANSLATOR_METADATA:
یہ ریپوزٹری MIT لائسنس کے تحت لائسنس یافتہ ہے۔ مزید معلومات کے لیے [LICENSE](../../LICENSE) فائل دیکھیں۔
---
**ڈسکلیمر**:
یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔
Write Preview
Loading…
Cancel
Save