هذا مستودع منهجي تعليمي لتعليم أساسيات تطوير الويب للمبتدئين. المنهج عبارة عن دورة شاملة لمدة 12 أسبوعًا تم تطويرها بواسطة Microsoft Cloud Advocates، ويشمل 24 درسًا عمليًا يغطي JavaScript وCSS وHTML.
هذا مستودع منهج تعليمي لتدريس أساسيات تطوير الويب للمبتدئين. المنهج هو دورة شاملة لمدة 12 أسبوعًا تم تطويرها بواسطة Microsoft Cloud Advocates، ويحتوي على 24 درسًا عمليًا تغطي JavaScript وCSS وHTML.
### المكونات الرئيسية
- **المحتوى التعليمي**: 24 درسًا منظمًا في وحدات قائمة على المشاريع
- **المشاريع العملية**: Terrarium، لعبة الكتابة، إضافة المتصفح، لعبة الفضاء، تطبيق البنك، محرر الأكواد، ومساعد الدردشة بالذكاء الاصطناعي
- **الاختبارات التفاعلية**: 48 اختبارًا يحتوي كل منها على 3 أسئلة (تقييمات قبل وبعد الدرس)
- **دعم متعدد اللغات**: ترجمات تلقائية لأكثر من 50 لغة عبر GitHub Actions
- دورات إضافية: الذكاء الاصطناعي التوليدي، علوم البيانات، التعلم الآلي، منهج الإنترنت للأشياء متاحة
### العمل مع مشاريع محددة
للحصول على تعليمات مفصلة حول المشاريع الفردية، راجع ملفات README في:
- `quiz-app/README.md` - تطبيق الاختبارات Vue 3
- `7-bank-project/README.md` - تطبيق البنك مع المصادقة
- `5-browser-extension/README.md` - تطوير إضافات المتصفح
- `6-space-game/README.md` - تطوير الألعاب القائمة على Canvas
- `9-chat-project/README.md` - مشروع مساعد الدردشة بالذكاء الاصطناعي
- `quiz-app/README.md` - تطبيق اختبار Vue 3
- `7-bank-project/README.md` - تطبيق مصرفي مع المصادقة
- `5-browser-extension/README.md` - تطوير امتداد المتصفح
- `6-space-game/README.md` - تطوير لعبة باستخدام Canvas
- `9-chat-project/README.md` - مشروع مساعد دردشة بالذكاء الاصطناعي
### هيكلية Monorepo
### هيكلية المونوربو
على الرغم من أنه ليس مستودعًا تقليديًا متعدد المشاريع، يحتوي هذا المستودع على مشاريع مستقلة متعددة:
- كل درس مكتفٍ ذاتيًا
بينما ليس مستودع مونوربو تقليدي، يحتوي هذا المستودع على عدة مشاريع مستقلة:
- كل درس مستقل بذاته
- المشاريع لا تشترك في التبعيات
- العمل على المشاريع الفردية دون التأثير على الآخرين
- استنساخ المستودع بالكامل لتجربة المنهج الكامل
- اعمل على مشاريع فردية دون التأثير على الآخرين
- انسخ المستودع كاملاً للحصول على كامل تجربة المنهج
---
**إخلاء المسؤولية**:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**تنويه**:
تمت ترجمة هذا المستند باستخدام خدمة الترجمة الآلية [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر المعتمد. للمعلومات الهامة، يُنصح بالاعتماد على ترجمة بشرية محترفة. نحن غير مسؤولين عن أي سوء فهم أو تفسير ناتج عن استخدام هذه الترجمة.
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
تعلّم أساسيات تطوير الويب من خلال دورتنا الشاملة التي تستمر 12 أسبوعًا من قبل دعاة السحابة في مايكروسوفت. تغوص كل من دروس الـ24 في جافاسكريبت وCSS وHTML عبر مشاريع عملية مثل التيراريوم، امتدادات المتصفح، وألعاب الفضاء. شارك مع الاختبارات، النقاشات، والواجبات العملية. حسّن مهاراتك وزد من احتفاظك بالمعرفة من خلال منهجنا التعليمي القائم على المشاريع الفعالة. ابدأ رحلتك في الترميز اليوم!
تعلم أساسيات تطوير الويب مع دورتنا الشاملة التي تستمر 12 أسبوعًا من خلال Microsoft Cloud Advocates. كل من الدروس الـ24 تغوص في JavaScript وCSS وHTML من خلال مشاريع تطبيقية مثل التيراريوم، إضافات المتصفح، وألعاب الفضاء. شارك في الاختبارات والمناقشات والمهام العملية. عزز مهاراتك وحسن من احتفاظك بالمعلومات من خلال منهجنا الفعّال المبني على المشاريع. ابدأ رحلة الترميز الخاصة بك اليوم!
1. **انشئ نسخة من الريبو (Fork)**: انقر على [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
3. [**انضم إلى Azure AI Foundry على ديسكورد والتق بخبراء ومطورين زملاء**](https://discord.com/invite/ByRwuEEgH4)
1. **افتح نسخة من المستودع**: انقر على [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> هذا يمنحك كل ما تحتاجه لإكمال الدورة مع تنزيل أسرع بكثير.
> هذا يمنحك كل ما تحتاجه لإكمال الدورة مع تحميل أسرع بكثير.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**إذا كنت ترغب في دعم لغات ترجمة إضافية، فهي مدرجة [هنا](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**إذا كنت ترغب في دعم لغات ترجمة إضافية فهي مذكورة [هنا](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _هل أنت طالب؟_
زر صفحة [**مركز الطلاب**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) حيث ستجد موارد للمبتدئين، حزم طلاب، وحتى طرق للحصول على قسيمة شهادة مجانية. هذه هي الصفحة التي تريد وضع إشارة مرجعية عليها والتفقّد من وقت لآخر حيث نقوم بتحديث المحتوى شهريًا.
زر [**صفحة مركز الطلاب**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) حيث ستجد موارد للمبتدئين، وحزم طلابية وطرق للحصول على قسيمة شهادة مجانية. هذه هي الصفحة التي تود حفظها والاطلاع عليها من وقت لآخر حيث نقوم بتغيير المحتوى شهريًا.
### 📣 إعلان - تحديات جديدة لوضع GitHub Copilot Agent لإكمالها!
### 📣 إعلان - تحديات جديدة لوضع GitHub Copilot Agent لتكملها!
تمت إضافة تحدي جديد، ابحث عن "تحدي GitHub Copilot Agent 🚀" في معظم الفصول. هذا تحدي جديد لإكماله باستخدام GitHub Copilot ووضع Agent. إذا لم تستخدم وضع Agent من قبل، فهو قادر ليس فقط على توليد النصوص ولكن أيضًا على إنشاء وتعديل الملفات، تشغيل الأوامر والمزيد.
تمت إضافة تحدي جديد، ابحث عن "تحدي GitHub Copilot Agent 🚀" في معظم الفصول. هذا تحدي جديد لك لإكماله باستخدام GitHub Copilot ووضع العميل Agent mode. إذا لم تستخدم وضع العميل سابقًا فهو قادر ليس فقط على توليد النصوص بل يمكنه أيضًا إنشاء وتعديل الملفات، تنفيذ الأوامر وأكثر.
### 📣 إعلان - _مشروع جديد للبناء باستخدام الذكاء الاصطناعي التوليدي_
تمت إضافة مشروع جديد لمساعد الذكاء الاصطناعي، اطلع عليه [المشروع](./9-chat-project/README.md)
تمت إضافة مشروع مساعد AI جديد، تحقق منه [المشروع](./9-chat-project/README.md)
### 📣 إعلان - _منهج جديد_ حول الذكاء الاصطناعي التوليدي لجافاسكريبت تم إصداره للتو
### 📣 إعلان - _منهج دراسي جديد_ حول الذكاء الاصطناعي التوليدي لـ JavaScript صدر للتو
لا تفوت منهجنا الجديد في الذكاء الاصطناعي التوليدي!
لا تفوت منهج الذكاء الاصطناعي التوليدي الجديد لدينا!
> **أيّها المعلمون**، لقد قمنا [بإدراج بعض الاقتراحات](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) حيث سيكون فريق المشرفين متاحًا للإجابة على أسئلتكم.
يحتوي هذا المنهج الدراسي على بيئة تطوير جاهزة للعمل! عندما تبدأ، يمكنك اختيار تشغيل المنهج الدراسي في [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)**: انقر على زر "Fork" في أعلى يمين هذه الصفحة.
#### تشغيل المنهج الدراسي محليًا على جهاز الكمبيوتر
#### تشغيل المنهج محليًا على جهاز الكمبيوتر الخاص بك
لتشغيل هذا المنهج محليًا على جهاز الكمبيوتر الخاص بك، ستحتاج إلى محرر نصوص، متصفح وأداة سطر أوامر. ستكون الدرس الأول، [مقدمة في لغات البرمجة وأدوات التجارة](../../1-getting-started-lessons/1-intro-to-programming-languages)، دليلك عبر خيارات مختلفة لكل من هذه الأدوات لتختار الأنسب لك.
لتشغيل هذا المنهج محليًا على جهاز الكمبيوتر الخاص بك، ستحتاج إلى محرر نصوص، متصفح، وأداة سطر أوامر. سيأخذك درسنا الأول، [مقدمة عن لغات البرمجة وأدوات العمل](../../1-getting-started-lessons/1-intro-to-programming-languages)، عبر الخيارات المختلفة لكل من هذه الأدوات لاختيار الأنسب لك.
توصيتنا هي استخدام [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) كمحرر لديك، والذي يتضمن أيضًا [طرفية مدمجة](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). يمكنك تنزيل Visual Studio Code [من هنا](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
توصيتنا هي استخدام محرر [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)، الذي يحتوي أيضًا على [محطة طرفية](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). يمكنك تنزيل Visual Studio Code [من هنا](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. انسخ المستودع الخاص بك إلى جهاز الكمبيوتر الخاص بك. يمكنك فعل ذلك بالنقر على زر **Code** ونسخ عنوان URL:
1. انسخ مستودعك إلى جهاز الكمبيوتر. يمكنك فعل ذلك بالضغط على زر **Code** ونسخ عنوان URL:
[CodeSpace](./images/createcodespace.png)
ثم، افتح [الطرفية](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) داخل [فيجوال ستوديو كود](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) وشغّل الأمر التالي، مع استبدال `<your-repository-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>` بالرابط الذي نسخته للتو:
```bash
git clone <your-repository-url>
```
2. افتح المجلد في فيجوال ستوديو كود. يمكنك فعل ذلك بالنقر على **File** > **Open Folder** واختيار المجلد الذي قمت باستنساخه.
2. افتح المجلد في Visual Studio Code. يمكنك القيام بذلك بالنقر على **ملف** > **فتح مجلد** واختيار المجلد الذي قمت باستنساخه للتو.
> ملحقات فيجوال ستوديو كود الموصى بها:
> الإضافات الموصى بها لـ Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - لمعاينة صفحات HTML داخل فيجوال ستوديو كود
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - لمساعدتك على كتابة الكود بشكل أسرع
> * [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) - لمساعدتك على كتابة الشفرة بسرعة أكبر
## 📂 كل درس يشمل:
## 📂 تتضمن كل درس:
- ملاحظات توضيحية اختيارية
- فيديو تفاعلي اختياري
- اختبار تمهيدي قبل الدرس
- ملاحظة تخطيطية اختيارية
- فيديو تكميلي اختياري
- اختبار تسخين قبل الدرس
- درس مكتوب
- لدروس المشاريع، إرشادات خطوة بخطوة لكيفية بناء المشروع
- اختبارات للتحقق من المعرفة
- للدروس المعتمدة على المشاريع، دلائل خطوة بخطوة حول كيفية بناء المشروع
- تحقق من المعرفة
- تحدي
- قراءة إضافية
- قراءة تكميليّة
- واجب
- [اختبار بعد الدرس](https://ff-quizzes.netlify.app/web/)
> **ملاحظة حول الاختبارات**: جميع الاختبارات موجودة في مجلد Quiz-app، يوجد 48 اختبارًا بمجموع ثلاث أسئلة لكل اختبار. متوفرة [هنا](https://ff-quizzes.netlify.app/web/) يمكن تشغيل تطبيق الاختبار محليًا أو نشره على Azure؛ اتبع التعليمات في مجلد `quiz-app`.
> **ملاحظة حول الاختبارات:** تحتوي كل الاختبارات على 48 اختبارًا إجماليًا، كل اختبار يتضمن ثلاثة أسئلة. وهي متوفرة [هنا](https://ff-quizzes.netlify.app/web/) ويمكن تشغيل تطبيق الاختبار محلياً أو نشره على Azure؛ اتبع التعليمات في مجلد `quiz-app`.
## 🗃️ الدروس
| | اسم المشروع | المفاهيم التي يُدرّسها | أهداف التعلم | الدرس المرتبط | المؤلف |
| 01 | البدء | مقدمة في البرمجة وأدوات العمل | تعلّم أساسيات معظم لغات البرمجة والبرمجيات التي تساعد المطورين المحترفين في أداء عملهم | [مقدمة في لغات البرمجة وأدوات العمل](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | البدء | أساسيات GitHub، يتضمن العمل الجماعي | كيفية استخدام GitHub في مشروعك، وكيفية التعاون مع الآخرين على قاعدة كود | [مقدمة في GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | البدء | إمكانية الوصول | تعلّم أساسيات إمكانية الوصول على الويب | [أساسيات إمكانية الوصول](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | أساسيات JS | أنواع بيانات جافاسكريبت | أساسيات أنواع البيانات في جافاسكريبت | [أنواع البيانات](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | أساسيات JS | الدوال والأساليب | تعلّم حول الدوال والأساليب لإدارة تدفق منطق التطبيق | [الدوال والأساليب](./2-js-basics/2-functions-methods/README.md) | Jasmine و Christopher |
| 06 | أساسيات JS | اتخاذ القرارات باستخدام جافاسكريبت | تعلّم كيفية إنشاء شروط في الكود باستخدام طرق اتخاذ القرار | [اتخاذ القرارات](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | أساسيات JS | المصفوفات والحلقات | العمل مع البيانات باستخدام المصفوفات والحلقات في جافاسكريبت | [المصفوفات والحلقات](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML في التطبيق | بناء HTML لإنشاء ترباريوم إلكتروني مع التركيز على بناء التخطيط | [مقدمة في HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS في التطبيق | بناء CSS لتصميم الترباريوم الإلكتروني مع التركيز على أساسيات CSS بما في ذلك جعل الصفحة متجاوبة | [مقدمة في CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | إغلاق جافاسكريبت، التلاعب بـ DOM | بناء جافاسكريبت لجعل الترباريوم يعمل كواجهة سحب وإفلات، مع التركيز على الإغلاق والتلاعب بـ DOM | [إغلاق جافاسكريبتوالتلاعب بـ DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [لعبة الطباعة](./4-typing-game/solution/README.md) | بناء لعبة طباعة | تعلّم كيفية استخدام أحداث لوحة المفاتيح لتشغيل منطق تطبيق جافاسكريبت | [البرمجة الحدثية](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [إضافة المتصفح الخضراء](./5-browser-extension/solution/README.md) | العمل مع المتصفحات | تعلّم كيف تعمل المتصفحات، تاريخها، وكيفية إعداد أول عناصر إضافة لمتصفح | [حول المتصفحات](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [إضافة المتصفح الخضراء](./5-browser-extension/solution/README.md) | بناء نموذج، الاستدعاء API وتخزين المتغيرات في التخزين المحلي | بناء عناصر جافاسكريبت لإضافة المتصفح لاستدعاء API باستخدام المتغيرات المخزنة محليًا | [APIs، النماذج والتخزين المحلي](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [إضافة المتصفح الخضراء](./5-browser-extension/solution/README.md) | العمليات الخلفية في المتصفح، أداء الويب | استخدام العمليات الخلفية للمتصفح لإدارة أيقونة الإضافة؛ تعلم حول أداء الويب وبعض التحسينات لرفع الكفاءة | [المهام الخلفية والأداء](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [لعبة الفضاء](./6-space-game/solution/README.md) | تطوير ألعاب متقدم مع جافاسكريبت | تعلّم حول الوراثة باستخدام الكلاسات والتكوين ونمط النشر/الاشتراك، تمهيدًا لبناء لعبة | [مقدمة في تطوير الألعاب المتقدم](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [لعبة الفضاء](./6-space-game/solution/README.md) | الرسم على اللوحة | تعلّم حول API اللوحة (Canvas API)، المستخدم للرسم على الشاشة | [الرسم على اللوحة](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [لعبة الفضاء](./6-space-game/solution/README.md) | تحريك العناصر حول الشاشة | اكتشف كيف يمكنك تحريك العناصر باستخدام الإحداثيات الديكارتية وواجهة برمجة تطبيقات اللوحة | [تحريك العناصر](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [لعبة الفضاء](./6-space-game/solution/README.md) | كشف التصادم | جعل العناصر تتصادم وتتفاعل مع بعضها باستخدام ضغطات المفاتيح وتوفير دالة تبريد لضمان أداء اللعبة | [كشف التصادم](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [لعبة الفضاء](./6-space-game/solution/README.md) | حفظ النقاط | إجراء حسابات رياضية بناءً على حالة اللعبة وأدائها | [حفظ النقاط](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [لعبة الفضاء](./6-space-game/solution/README.md) | إنهاء وإعادة بدء اللعبة | تعلّم حول إنهاء وإعادة تشغيل اللعبة، بما في ذلك تنظيف الموارد وإعادة تعيين المتغيرات | [شرط النهاية](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [تطبيق البنك](./7-bank-project/solution/README.md) | قوالب HTML والمسارات في تطبيق ويب | تعلّم كيفية إنشاء الهيكل الأساسي لموقع ويب متعدد الصفحات باستخدام التوجيه والقوالب في HTML | [قوالب HTML والمسارات](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [تطبيق البنك](./7-bank-project/solution/README.md) | بناء نموذج تسجيل دخول وتسجيل | تعلّم حول بناء النماذج والتعامل مع إجراءات التحقق من صحة البيانات | [النماذج](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [تطبيق البنك](./7-bank-project/solution/README.md) | طرق جلب واستخدام البيانات | كيف تتدفق البيانات داخل وخارج التطبيق، كيفية جلبها وتخزينها والتخلص منها | [البيانات](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [تطبيق البنك](./7-bank-project/solution/README.md) | مفاهيم إدارة الحالة | تعلّم كيف يحتفظ تطبيقك بالحالة وكيفية إدارتها برمجيًا | [إدارة الحالة](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [كود المتصفح/في سكود](../../8-code-editor) | العمل مع في سكود | تعلم كيفية استخدام محرر الكود | [استخدام محرر كود في سكود](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [مساعدات الذكاء الاصطناعي](./9-chat-project/README.md) | العمل مع الذكاء الاصطناعي | تعلم كيفية بناء مساعد ذكي خاص بك | [مشروع مساعد الذكاء الاصطناعي](./9-chat-project/README.md) | Chris |
## 🏫 البيداغوجيا
تم تصميم منهجنا التعليمي مع مبدئين بيداغوجيين رئيسيين في الاعتبار:
| | اسم المشروع | المفاهيم التي تُدرس | الأهداف التعليمية | الدرس المرتبط | المؤلف |
| 01 | البدء | مقدمة في البرمجة وأدوات العمل | تعلم الأسس الأساسية لمعظم لغات البرمجة حول البرمجة وأدوات البرمجيات التي تساعد المطورين المحترفين في أداء عملهم | [مقدمة في لغات البرمجة وأدوات العمل](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | البدء | أساسيات GitHub، يشمل العمل مع فريق | كيفية استخدام GitHub في مشروعك، وكيفية التعاون مع الآخرين على قاعدة الشفرة | [مقدمة في GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | البدء | إمكانية الوصول | تعلم أساسيات إمكانية الوصول على الويب | [أساسيات إمكانية الوصول](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | أساسيات JS | أنواع بيانات جافاسكريبت | أساسيات أنواع بيانات جافاسكريبت | [أنواع البيانات](./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 | المصفوفات والحلقات | العمل مع البيانات باستخدام المصفوفات والحلقات في جافاسكريبت | [المصفوفات والحلقات](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML في التطبيق | بناء HTML لإنشاء تيراريوم عبر الإنترنت، مع التركيز على بناء التخطيط | [مقدمة في HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS في التطبيق | بناء CSS لتصميم التيراريوم عبر الإنترنت، مع التركيز على أساسيات CSS بما في ذلك جعل الصفحة متجاوبة | [مقدمة في CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | إغلاق جافاسكريبت، التلاعب بـ DOM | بناء جافاسكريبت لجعل التيراريوم يعمل كواجهة سحب وإفلات، مع التركيز على الإغلاق والتلاعب بـ DOM | [إغلاق جافاسكريبت، التلاعب بـ DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [لعبة الطباعة](./4-typing-game/solution/README.md) | بناء لعبة طباعة | تعلم كيفية استخدام أحداث لوحة المفاتيح لتحريك منطق تطبيق جافاسكريبت | [البرمجة القائمة على الأحداث](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [ملحق المتصفح الأخضر](./5-browser-extension/solution/README.md) | العمل مع المتصفحات | تعلم كيف تعمل المتصفحات وتاريخها، وكيفية إعداد أول عناصر امتداد المتصفح | [حول المتصفحات](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [ملحق المتصفح الأخضر](./5-browser-extension/solution/README.md) | بناء نموذج، استدعاء API وتخزين المتغيرات في التخزين المحلي | بناء عناصر جافاسكريبت لملحق المتصفح الخاص بك لاستدعاء API باستخدام المتغيرات المخزنة في التخزين المحلي | [APIs، النماذج والتخزين المحلي](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [ملحق المتصفح الأخضر](./5-browser-extension/solution/README.md) | العمليات الخلفية في المتصفح، أداء الويب | استخدام العمليات الخلفية للمتصفح لإدارة أيقونة الامتداد؛ تعلم حول أداء الويب وبعض التحسينات لجعله أفضل | [المهام الخلفية والأداء](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [لعبة الفضاء](./6-space-game/solution/README.md) | تطوير ألعاب أكثر تقدماً بلغة جافاسكريبت | تعلم حول الوراثة باستخدام الفئات والتركيب ونمط النشر والاشتراك، استعدادًا لبناء لعبة | [مقدمة في تطوير الألعاب المتقدمة](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [لعبة الفضاء](./6-space-game/solution/README.md) | الرسم على اللوحة | تعلم حول Canvas API، المستخدم لرسم العناصر على الشاشة | [الرسم على اللوحة](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [لعبة الفضاء](./6-space-game/solution/README.md) | تحريك العناصر على الشاشة | اكتشف كيف يمكن للعناصر أن تكتسب حركة باستخدام الإحداثيات الديكارتية وCanvas API | [تحريك العناصر حول الشاشة](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [لعبة الفضاء](./6-space-game/solution/README.md) | اكتشاف التصادم | جعل العناصر تصطدم وتتفاعل مع بعضها باستخدام ضغطات المفاتيح وتوفير وظيفة تبريد لضمان أداء اللعبة | [اكتشاف التصادم](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [لعبة الفضاء](./6-space-game/solution/README.md) | تسجيل النقاط | إجراء عمليات حسابية بناءً على حالة وأداء اللعبة | [تسجيل النقاط](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [لعبة الفضاء](./6-space-game/solution/README.md) | إنهاء اللعبة وإعادة تشغيلها | تعلم حول إنهاء اللعبة وإعادة تشغيلها، بما في ذلك تنظيف الأصول وإعادة تعيين قيم المتغيرات | [شرط النهاية](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [تطبيق بنكي](./7-bank-project/solution/README.md) | قوالب HTML والمسارات في تطبيق ويب | تعلم كيفية إنشاء الهيكل الأساسي لموقع متعدد الصفحات باستخدام التوجيه وقوالب HTML | [قوالب HTML والمسارات](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [تطبيق بنكي](./7-bank-project/solution/README.md) | بناء نموذج تسجيل دخول وتسجيل | تعلم بناء النماذج ومعالجة قواعد التحقق | [النماذج](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [تطبيق بنكي](./7-bank-project/solution/README.md) | طرق جلب واستخدام البيانات | كيف تتدفق البيانات داخل وخارج تطبيقك، وكيفية جلبها وتخزينها والتخلص منها | [البيانات](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [تطبيق بنكي](./7-bank-project/solution/README.md) | مفاهيم إدارة الحالة | تعرف على كيفية احتفاظ تطبيقك بالحالة وكيفية إدارتها برمجياً | [إدارة الحالة](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [الكود المتصفح / VScode](../../8-code-editor) | العمل مع VScode | تعلم كيفية استخدام محرر الأكواد| [استخدام محرر كود VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [مساعدات الذكاء الاصطناعي](./9-chat-project/README.md) | العمل مع الذكاء الاصطناعي | تعلم كيفية بناء مساعد ذكاء اصطناعي خاص بك | [مشروع مساعد الذكاء الاصطناعي](./9-chat-project/README.md) | Chris |
## 🏫 المنهجية التعليمية
تم تصميم منهجنا باثنين من المبادئ التربوية الرئيسية في الاعتبار:
* التعلم القائم على المشاريع
* الاختبارات المتكررة
البرنامج يُعلّم أساسيات جافاسكريبت، HTML، وCSS، بالإضافة إلى أحدث الأدوات والتقنيات المستخدمة من قبل مطوري الويب في الوقت الحالي. سيحصل الطلاب على فرصة لاكتساب خبرة عملية من خلال بناء لعبة الطباعة، ترباريوم افتراضي، إضافة متصفح صديقة للبيئة، لعبة على نمط غزو الفضاء، وتطبيق بنكي للأعمال. بنهاية السلسلة، سيكون لدى الطلاب فهم قوي لتطوير الويب.
البرنامج يعلم أساسيات جافاسكريبت وHTML وCSS، بالإضافة إلى أحدث الأدوات والتقنيات التي يستخدمها مطورو الويب اليوم. سيحصل الطلاب على فرصة لتطوير خبرة عملية من خلال بناء لعبة طباعة، وتيراريوم افتراضي، وامتداد متصفح صديق للبيئة، ولعبة بأسلوب غزو الفضاء، وتطبيق بنكي للأعمال التجارية. بنهاية السلسلة، سيكون لدى الطلاب فهم قوي لتنمية الويب.
> 🎓 يمكنك أخذ الدروس الأولى في هذا المنهج كـ [مسار تعلم](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) على Microsoft Learn!
> 🎓 يمكنك أخذ الدروس القليلة الأولى في هذا المنهج كـ [مسار تعلم](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) على Microsoft Learn!
بضمان توافق المحتوى مع المشاريع، أصبح التعلم أكثر تشويقًا للطلاب وسيتم تعزيز ترسيخ المفاهيم. كتبنا أيضًا العديد من الدروس التمهيدية في أساسيات جافاسكريبت لتعريف المفاهيم، بالإضافة إلى فيديو من مجموعة فيديوهات "[سلسلة المبتدئين إلى: جافاسكريبت](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"، بعض مؤلفيها ساهموا في هذا المنهج.
بضمان توافق المحتوى مع المشاريع، يصبح التعلم أكثر جاذبية للطلاب ويتم تعزيز الاحتفاظ بالمفاهيم. كتبنا أيضًا عدة دروس تمهيدية بأساسيات جافاسكريبت لتقديم المفاهيم، مرفقة بفيديو من سلسلة "[سلسلة المبتدئين إلى: جافاسكريبت](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" من مقاطع الفيديو التعليمية، التي ساهم بعض مؤلفيها في هذا المنهج.
بالإضافة لذلك، اختبار منخفض الضغط قبل الدرس يُحدد نية الطالب في تعلم الموضوع، في حين يضمن اختبار ثانٍ بعد الدرس المزيد من الترسيخ. صُمّم هذا المنهج ليكون مرنًا وممتعًا ويمكن أخذه ككل أو أجزاء. تبدأ المشاريع صغيرة وتزداد تعقيدًا بحلول نهاية دورة 12 أسبوعًا.
بالإضافة إلى ذلك، يحدد اختبار منخفض المخاطر قبل الصف نية الطالب نحو تعلم موضوع ما، بينما يضمن اختبار ثانٍ بعد الصف مزيدًا من الاحتفاظ. تم تصميم هذا المنهج ليكون مرنًا وممتعًا ويمكن أخذه ككل أو جزء منه. تبدأ المشاريع صغيرة وتزداد تعقيدًا مع اقتراب نهاية دورة الـ 12 أسبوعًا.
بينما تجنبنا عمدًا تقديم أُطر عمل جافاسكريبت للتركيز على المهارات الأساسية المطلوبة كمطور ويب قبل تبني إطار عمل، فإن الخطوة التالية الجيدة لإكمال هذا المنهج ستكون تعلم Node.js عبر مجموعة أخرى من الفيديوهات: "[سلسلة المبتدئين إلى: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
بينما تجنبنا عمدًا إدخال أُطُر جافاسكريبت للتركيز على المهارات الأساسية اللازمة كمطور ويب قبل اعتماد إطار عمل، فإن الخطوة التالية الجيدة لاستكمال هذا المنهج ستكون تعلم 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). نرحب بتعليقاتك البناءة!
## 🧭 الوصول دون اتصال
يمكنك تشغيل هذه الوثائق دون اتصال باستخدام [Docsify](https://docsify.js.org/#/). انسخ هذا المستودع، [ثبت Docsify](https://docsify.js.org/#/quickstart) على جهازك المحلي، ثم في المجلد الجذر لهذا المستودع، اكتب `docsify serve`. سيتم تقديم الموقع على المنفذ 3000 على جهازك المحلي: `localhost:3000`.
يمكنك تشغيل هذه الوثائق دون اتصال باستخدام [Docsify](https://docsify.js.org/#/). قم بفورك لهذا المستودع، [ثبت Docsify](https://docsify.js.org/#/quickstart) على جهازك المحلي، ثم في المجلد الجذر لهذا المستودع، اكتب `docsify serve`. سيتم تقديم الموقع على المنفذ 3000 على المضيف المحلي الخاص بك: `localhost:3000`.
## 📘 ملف PDF
يمكن العثور على ملف PDF لكل الدروس [هنا](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
يمكن العثور على ملف PDF لجميع الدروس [هنا](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
إذا علقت أو كان لديك أي أسئلة حول بناء تطبيقات الذكاء الاصطناعي. انضم إلى المتعلمين الآخرين والمطورين ذوي الخبرة في مناقشات حول MCP. إنها مجتمع داعم حيث الأسئلة مرحب بها والمعرفة تُشارك بحرية.
إذا علقت أو كان لديك أي أسئلة حول بناء تطبيقات الذكاء الاصطناعي. انضم إلى المتعلمين الآخرين والمطورين ذوي الخبرة في مناقشات حول MCP. إنها مجتمع داعم حيث تُرحب بالأسئلة ويُشارك المعرفة بحرية.
[](https://aka.ms/foundry/forum)
## الترخيص
هذا المستودع مرخص تحت رخصة MIT. راجع ملف [LICENSE](../../LICENSE) لمزيد من المعلومات.
هذا المستودع مرخص بموجب ترخيص MIT. انظر ملف [LICENSE](../../LICENSE) لمزيد من المعلومات.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**إخلاء المسؤولية**:
تمت ترجمة هذا المستند باستخدام خدمة الترجمة الآلية [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى جاهدين لتحقيق الدقة، يُرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر المعتمد. يُنصح باللجوء إلى الترجمة البشرية المهنية للمعلومات الحساسة. نحن غير مسؤولين عن أي سوء فهم أو تفسير ناجم عن استخدام هذه الترجمة.
**تنويه**:
تمت ترجمة هذا المستند باستخدام خدمة الترجمة الآلية [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لضمان الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية هو المصدر الموثوق. للمعلومات الحيوية، ينصح بالترجمة المهنية البشرية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة قد تنتج عن استخدام هذه الترجمة.
این مخزن یک برنامه آموزشی برای آموزش اصول توسعه وب به مبتدیان است. این برنامه آموزشی یک دوره جامع ۱۲ هفتهای است که توسط Microsoft Cloud Advocates توسعه داده شده و شامل ۲۴ درس عملی در زمینه جاوااسکریپت، CSS و HTML میباشد.
این یک مخزن آموزشی برای آموزش اصول توسعه وب به مبتدیان است. این برنامهٔ آموزشی یک دوره جامع ۱۲ هفتهای است که توسط مدافعان ابر مایکروسافت توسعه یافته و شامل ۲۴ درس عملی دربارهٔ JavaScript، CSS و HTML میباشد.
### اجزای کلیدی
- **محتوای آموزشی**: ۲۴ درس ساختارمند که به صورت ماژولهای مبتنی بر پروژه سازماندهی شدهاند
- **پروژههای عملی**: Terrarium، بازی تایپ، افزونه مرورگر، بازی فضایی، اپلیکیشن بانکی، ویرایشگر کد، و دستیار چت هوش مصنوعی
- **آزمونهای تعاملی**: ۴۸ آزمون با ۳ سوال در هر آزمون (ارزیابیهای قبل و بعد از درس)
- **پشتیبانی چندزبانه**: ترجمههای خودکار به بیش از ۵۰ زبان از طریق GitHub Actions
اگرچه یک Monorepo سنتی نیست، این مخزن شامل چندین پروژه مستقل است:
- هر درس به صورت خودکفا است
- پروژهها وابستگیها را به اشتراک نمیگذارند
- روی پروژههای فردی کار کنید بدون اینکه بر دیگران تأثیر بگذارید
- کل مخزن را برای تجربه کامل برنامه آموزشی کلون کنید
اگرچه یک مونورپو سنتی نیست، این مخزن دارای چندین پروژه مستقل است:
- هر درس خودمختار است
- پروژهها وابستگیهای مشترک ندارند
- روی پروژههای منفرد بدون تاثیرگزاری روی دیگران کار کنید
- برای تجربه کامل دوره کل مخزن را کلون کنید
---
**سلب مسئولیت**:
این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما برای دقت تلاش میکنیم، لطفاً توجه داشته باشید که ترجمههای خودکار ممکن است حاوی خطاها یا نادرستیهایی باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حیاتی، ترجمه حرفهای انسانی توصیه میشود. ما مسئولیتی در قبال هرگونه سوءتفاهم یا تفسیر نادرست ناشی از استفاده از این ترجمه نداریم.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**توضیح مهم**:
این سند با استفاده از سرویس ترجمه ماشینی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما تلاش میکنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمههای خودکار ممکن است دارای خطا یا نواقصی باشند. سند اصلی به زبان بومی خود باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حیاتی، توصیه میشود از ترجمه حرفهای انسانی استفاده گردد. ما در قبال هر گونه سوء تفاهم یا برداشت نادرست ناشی از استفاده این ترجمه مسئولیتی نداریم.
اصول توسعه وب را با دوره جامع ۱۲ هفتهای ما توسط مدافعان ابر مایکروسافت بیاموزید. هر یک از ۲۴ درس به صورت عملی به آموزش جاوااسکریپت، CSS و HTML میپردازد، از جمله پروژههایی مثل تراریومها، افزونههای مرورگر و بازیهای فضایی. در فعالیتهایی مثل آزمونها، بحثها و تکالیف عملی شرکت کنید. مهارتهای خود را افزایش دهید و با روش مبتنی بر پروژه ما، حفظ دانش خود را بهینه کنید. سفر برنامهنویسی خود را امروز شروع کنید!
اصول بنیادی توسعه وب را با دوره جامع ۱۲ هفتهای ما توسط مدافعان مایکروسافت کلود بیاموزید. هر یک از ۲۴ درس به صورت عملی به جاوااسکریپت، CSS و HTML میپردازد با پروژههایی مانند تراریومها، افزونههای مرورگر و بازیهای فضایی. در کوییزها، گفتگوها و تمرینهای عملی شرکت کنید. مهارتهای خود را ارتقا دهید و با روش آموزش مبتنی بر پروژه ما، دانش خود را بهینه کنید. سفر کدنویسی خود را امروز آغاز کنید!
> این مخزن شامل بیش از ۵۰ ترجمه زبان است که اندازه دانلود را به طور قابل توجهی افزایش میدهد. برای کلون بدون ترجمهها، از sparse checkout استفاده کنید:
> این مخزن شامل بیش از ۵۰ ترجمه زبان است که به طور قابل توجهی حجم دانلود را افزایش میدهد. برای کلون کردن بدون ترجمهها از sparse checkout استفاده کنید:
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> این به شما همه چیز لازم برای تکمیل دوره را با دانلود بسیار سریعتر میدهد.
> این به شما همه چیز لازم برای تکمیل دوره با دانلود بسیار سریعتر را میدهد.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**اگر تمایل به پشتیبانی ترجمه زبانهای بیشتر دارید، زبانهای پشتیبانی شده در [اینجا](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) آمده است**
**اگر میخواهید زبانهای ترجمه بیشتری اضافه شوند، موارد پشتیبانی شده در اینجا فهرست شدهاند [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _آیا دانشجو هستید؟_
#### 🧑🎓 _دانشجو هستید؟_
از صفحه [**Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) دیدن کنید که منابع مبتدی، پکیجهای دانشجویی و حتی راههایی برای دریافت کوپن رایگان گواهینامه را خواهید یافت. این صفحهای است که باید نشانک کنید و گاه به گاه بررسی کنید چون محتوای آن ماهانه بهروزرسانی میشود.
به صفحه [**Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) مراجعه کنید که منابع مبتدی، بستههای دانشجویی و حتی راههایی برای دریافت رایگان کد گواهینامه را پیدا خواهید کرد. این صفحهای است که باید نشانهگذاری کنید و گهگاه آن را بررسی کنید چون ماهانه محتوای جدید جایگزین میشود.
### 📣 اطلاعیه - چالشهای حالت GitHub Copilot Agent جدید برای تکمیل!
### 📣 اطلاعیه - چالشهای جدید حالت GitHub Copilot Agent برای تکمیل!
چالش جدید اضافه شده، به دنبال "GitHub Copilot Agent Challenge 🚀" در اکثر فصلها باشید. این چالش جدیدی است برای شما که با استفاده از GitHub Copilot و حالت Agent کامل کنید. اگر پیشتر حالت Agent را استفاده نکردهاید، این حالت قادر است نه فقط متن تولید کند بلکه فایلها را بسازد و ویرایش کند، فرمانها را اجرا کند و بیشتر.
چالش جدید اضافه شده، به دنبال "چالش GitHub Copilot Agent 🚀" در بیشتر فصلها باشید. این چالشی جدید برای شماست که با استفاده از GitHub Copilot و حالت Agent آن را تکمیل کنید. اگر قبلا حالت Agent را استفاده نکردهاید، این حالت فقط متن تولید نمیکند بلکه فایلها را ایجاد و ویرایش میکند، فرمان اجرا میکند و بیشتر.
### 📣 اطلاعیه - _پروژه جدیدی برای ساخت با هوش مصنوعی مولد_
### 📣 اطلاعیه - _پروژه جدید برای ساخت با استفاده از هوش مصنوعی مولد_
پروژه دستیار هوش مصنوعی جدید همینتازگی اضافه شده، آن را بررسی کنید [project](./9-chat-project/README.md)
پروژه جدید دستیار هوش مصنوعی به تازگی اضافه شده، آن را بررسی کنید [project](./9-chat-project/README.md)
### 📣 اطلاعیه - _دوره جدید_ درباره هوش مصنوعی مولد برای جاوااسکریپت همینتازگی منتشر شده
### 📣 اطلاعیه - _برنامه درسی جدید_ درباره هوش مصنوعی مولد برای جاوااسکریپت تازه منتشر شده است
دوره جدید هوش مصنوعی مولد ما را از دست ندهید!
برنامه درسی جدید هوش مصنوعی مولد ما را از دست ندهید!
برای شروع به [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) مراجعه کنید!
برای شروع مراجعه کنید [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)
هر درس شامل یک تمرین برای تکمیل، یک آزمون دانش و یک چالش برای راهنمایی شما در یادگیری موضوعاتی مانند:
- پرامپتنویسی و مهندسی پرامپت
- تولید اپلیکیشنهای متنی و تصویری
- اپهای جستجو
هر درس شامل یک تکلیف برای تکمیل، یک آزمون دانش و یک چالش برای راهنمایی در یادگیری موضوعاتی مانند:
- پرامپتدهی و مهندسی پرامپت
- تولید برنامههای متنی و تصویری
- برنامههای جستجو
برای شروع به [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) مراجعه کنید!
@ -83,134 +70,134 @@
## 🌱 شروع به کار
> **معلمان**، ما [برخی پیشنهادات](for-teachers.md) درباره نحوه استفاده از این دوره را درج کردهایم. خوشحال میشویم بازخورد شما را [در انجمن بحث ما](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) دریافت کنیم!
> **معلمان**، ما [چند پیشنهاد](for-teachers.md) درباره نحوه استفاده از این برنامه درسی ارائه دادهایم. ما مشتاق دریافت بازخورد شما [در فروم گفتگوی ما](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) هستیم!
**[یادگیرندگان](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**، برای هر درس، با یک کوییز پیشسخنرانی شروع کنید و سپس با خواندن متون درس، تکمیل فعالیتهای مختلف و ارزیابی درک خود با کوییز پساسخنرانی ادامه دهید.
**[دانشآموزان](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**، برای هر درس، با آزمون پیشدرس شروع کنید و با خواندن محتوای درس، انجام فعالیتهای مختلف و آزمون پسدرس پیش بروید.
برای بهبود تجربه یادگیری خود، با همکلاسیهایتان ارتباط برقرار کنید و پروژهها را با هم انجام دهید! بحث و گفتگو در [انجمن بحث ما](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) تشویق میشود و تیم ناظران ما برای پاسخگویی به سوالات شما در دسترس خواهند بود.
برای بهبود تجربه یادگیری خود، با همکلاسیهایتان برای کار روی پروژهها همکاری کنید! بحثها در [فروم گفتگوی ما](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) تشویق میشوند و تیم مودراتورهای ما آماده پاسخگویی به سوالات شما هستند.
برای ارتقای آموزش خود، شدیداً پیشنهاد میکنیم که [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) را برای منابع مطالعه اضافی بررسی کنید.
برای ادامه تحصیل، به شدت توصیه میکنیم [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) را برای منابع مطالعاتی اضافی بررسی کنید.
### 📋 راهاندازی محیط کاری شما
این دوره دارای محیط توسعه آماده است! هنگام شروع، میتوانید انتخاب کنید که دوره را در [Codespace](https://github.com/features/codespaces/) (_یک محیط مبتنی بر مرورگر بدون نیاز به نصب_) یا محلی روی کامپیوتر خود با یک ویرایشگر متن مانند [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) اجرا کنید.
این برنامه درسی دارای محیط توسعه آماده است! هنگام شروع میتوانید انتخاب کنید که برنامه را در [Codespace](https://github.com/features/codespaces/) (محیطی مبتنی بر مرورگر و بدون نیاز به نصب) اجرا کنید یا به صورت محلی روی رایانه خود با ویرایشگر متنی مانند [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) کار کنید.
#### ایجاد مخزن خود
برای اینکه بتوانید بهراحتی کارهای خود را ذخیره کنید، توصیه میشود یک کپی از این مخزن ایجاد کنید. برای این کار روی دکمه **Use this template** در بالای صفحه کلیک کنید. این کار یک مخزن جدید در حساب GitHub شما با کپی دوره ایجاد میکند.
#### ساخت مخزن خود
برای راحتی ذخیرهسازی کارهای خود، توصیه میشود کپی خود را از این مخزن ایجاد کنید. این کار را با کلیک روی دکمه **Use this template** در بالای صفحه انجام دهید. این یک مخزن جدید در حساب GitHub شما با نسخهای از برنامه درسی ایجاد خواهد کرد.
مراحل زیر را دنبال کنید:
1. **انشعاب مخزن**: روی دکمه "Fork" در گوشه بالا سمت راست این صفحه کلیک کنید.
2. **کلون کردن مخزن**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
1. **فورک مخزن**: روی دکمه "Fork" در گوشه بالا-راست این صفحه کلیک کنید.
در نسخه خود از این مخزن که ایجاد کردهاید، روی دکمه **Code** کلیک کرده و گزینه **Open with Codespaces** را انتخاب کنید. این کار یک Codespace جدید برای کار شما ایجاد میکند.
در نسخه خود از این مخزن که ساختهاید، روی دکمه **Code** کلیک کرده و **Open with Codespaces** را انتخاب کنید. این یک Codespace جدید برای کار شما ایجاد خواهد کرد.
#### اجرای برنامه درسی به صورت محلی روی رایانه شما
برای اجرای این دوره بهصورت محلی نیاز به یک ویرایشگر متن، یک مرورگر و یک ابزار خط فرمان دارید. اولین درس ما، [معرفی زبانهای برنامهنویسی و ابزارهای کار](../../1-getting-started-lessons/1-intro-to-programming-languages)، گزینههای مختلف هر یک از این ابزارها را به شما معرفی میکند تا بهترین گزینه را برای خود انتخاب کنید.
برای اجرای این برنامه درسی به صورت محلی روی رایانه خود، به یک ویرایشگر متنی، یک مرورگر و یک ابزار خط فرمان نیاز دارید. اولین درس ما، [مقدمهای بر زبانها و ابزارهای برنامهنویسی](../../1-getting-started-lessons/1-intro-to-programming-languages)، گزینههای مختلفی برای هر یک از این ابزارها را برای شما توضیح میدهد تا بهترین گزینه را انتخاب کنید.
توصیه ما استفاده از [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) به عنوان ویرایشگر است که همچنین دارای یک [ترمینال داخلی](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) است. میتوانید Visual Studio Code را از [اینجا](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) دانلود کنید.
توصیه ما استفاده از [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) به عنوان ویرایشگر است که همچنین دارای [ترمینال](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) داخلی است. میتوانید Visual Studio Code را از [اینجا](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) دانلود کنید.
1. مخزن خود را به کامپیوترتان کلون کنید. برای این کار روی دکمه **Code** کلیک کرده و URL را کپی کنید:
1. مخزن خود را روی رایانهتان کلون کنید. این کار را با کلیک روی دکمه **Code** و کپی آدرس URL انجام دهید:
[CodeSpace](./images/createcodespace.png)
سپس، یک [ترمینال](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) در داخل [ویژوال استودیو کد](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) باز کنید و دستور زیر را اجرا کنید، بهجای `<your-repository-url>`، آدرسی را که کپی کردهاید جایگزین کنید:
سپس، [ترمینال](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) را درون [ویژوال استودیو کد](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) باز کنید و دستور زیر را اجرا کنید، به طوری که `<your-repository-url>` را با URL که همین الان کپی کردهاید جایگزین کنید:
```bash
git clone <your-repository-url>
```
۲. پوشه را در ویژوال استودیو کد باز کنید. این کار را با کلیک روی **File** > **Open Folder** و انتخاب پوشهای که تازه کلون کردهاید انجام دهید.
۲. پوشه را در ویژوال استودیو کد باز کنید. میتوانید این کار را با کلیک روی **File** > **Open Folder** و انتخاب پوشهای که تازه کلون کردهاید انجام دهید.
> افزونههای پیشنهاد شده ویژوال استودیو کد:
> افزونههای پیشنهادی ویژوال استودیو کد:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - برای پیشنمایش صفحات HTML در داخل ویژوال استودیو کد
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - برای کمک به نوشتن سریعتر کد
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - برای پیشنمایش صفحات HTML داخل ویژوال استودیو کد
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - برای کمک به شما در نوشتن سریعتر کد
## 📂 هر درس شامل:
- نقشهکشی اختیاری
- اسکچنوت اختیاری
- ویدیوی تکمیلی اختیاری
- آزمون گرمکننده پیشدرس
- درس نوشتاری
- برای درسهای مبتنی بر پروژه، راهنماهای گامبهگام نحوه ساخت پروژه
- آزمون گرمکننده پیش از درس
- درس نوشته شده
- برای درسهای مبتنی بر پروژه، راهنماهای گام به گام ساخت پروژه
- بررسی دانش
- یک چالش
- مطالعه تکمیلی
- تمرین
- [آزمون پس از درس](https://ff-quizzes.netlify.app/web/)
> **تذکر درباره آزمونها**: تمام آزمونها در پوشه Quiz-app قرار دارند، مجموعاً ۴۸ آزمون با هر کدام شامل سه سوال. آنها [اینجا](https://ff-quizzes.netlify.app/web/) در دسترساند، اپلیکیشن آزمون میتواند به صورت محلی اجرا شود یا روی Azure منتشر گردد؛ دستورالعمل اجرای آن در پوشه `quiz-app` موجود است.
## 🗃️ دروس
| | نام پروژه | مفاهیم آموزش داده شده | اهداف آموزشی | درس مرتبط | نویسنده |
| ۰۱ | شروع کار | مقدمهای بر برنامهنویسی و ابزارهای کار | یادگیری اصول پایه در پشت بیشتر زبانهای برنامهنویسی و همچنین نرمافزارهایی که به توسعهدهندگان حرفهای برای انجام کارشان کمک میکنند | [مقدمهای بر زبانهای برنامهنویسی و ابزارهای کار](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | جاسمن |
| ۰۲ | شروع کار | مبانی گیتهاب، شامل همکاری تیمی | چگونگی استفاده از گیتهاب در پروژه، و نحوه همکاری با دیگران روی کد | [مقدمهای بر گیتهاب](./1-getting-started-lessons/2-github-basics/README.md) | فلور |
| ۰۳ | شروع کار | دسترسی (Accessibility) | یادگیری اصول پایه درباره دسترسی وب | [مبانی دسترسی](./1-getting-started-lessons/3-accessibility/README.md) | کریستوفر |
| ۰۴ | پایههای JS | انواع دادهها در جاوااسکریپت | مفاهیم پایه انواع دادهها در جاوااسکریپت | [انواع دادهها](./2-js-basics/1-data-types/README.md) | جاسمن |
| ۰۵ | پایههای JS | توابع و متدها | یادگیری توابع و متدها برای مدیریت جریان منطق برنامه | [توابع و متدها](./2-js-basics/2-functions-methods/README.md) | جاسمن و کریستوفر |
| ۰۶ | پایههای JS | تصمیمگیری با جاوااسکریپت | نحوه ایجاد شرطها در کد با استفاده از روشهای تصمیمگیری | [تصمیمگیری](./2-js-basics/3-making-decisions/README.md) | جاسمن |
| ۰۷ | پایههای JS | آرایهها و حلقهها | کار با دادهها با استفاده از آرایهها و حلقهها در جاوااسکریپت | [آرایهها و حلقهها](./2-js-basics/4-arrays-loops/README.md) | جاسمن |
| ۰۸ | [Terrarium](./3-terrarium/solution/README.md) | HTML در عمل | ساخت HTML برای ایجاد یک تراریوم آنلاین، با تمرکز روی ساختار صفحه | [مقدمهای بر HTML](./3-terrarium/1-intro-to-html/README.md) | جن |
| ۰۹ | [Terrarium](./3-terrarium/solution/README.md) | CSS در عمل | ساخت CSS برای طراحی تراریوم آنلاین، تمرکز بر اصول CSS از جمله ریسپانسیو کردن صفحه | [مقدمهای بر CSS](./3-terrarium/2-intro-to-css/README.md) | جن |
| ۱۰ | [Terrarium](./3-terrarium/solution/README.md) | کلوژرهای جاوااسکریپت، دستکاری DOM | ساخت جاوااسکریپت برای عملکرد تراریوم به صورت واسط کشیدن و رها کردن، با تمرکز بر کلوژرها و دستکاری DOM | [کلوژرهای جاوااسکریپت، دستکاری DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | جن |
| ۱۱ | [Typing Game](./4-typing-game/solution/README.md) | ساخت بازی تایپینگ | یادگیری استفاده از رویدادهای صفحهکلید برای هدایت منطق اپلیکیشن جاوااسکریپت | [برنامهنویسی رویدادمحور](./4-typing-game/typing-game/README.md) | کریستوفر |
| ۱۲ | [Green Browser Extension](./5-browser-extension/solution/README.md) | کار با مرورگرها | یادگیری نحوه کار مرورگرها، تاریخچه آنها، و ساخت المانهای اولیه افزونه مرورگر | [درباره مرورگرها](./5-browser-extension/1-about-browsers/README.md) | جن |
| ۱۳ | [Green Browser Extension](./5-browser-extension/solution/README.md) | ساخت فرم، فراخوانی API و ذخیره متغیرها در فضای محلی | ساخت المانهای جاوااسکریپت افزونه مرورگر برای فراخوانی API با استفاده از متغیرهای ذخیرهشده در فضای محلی | [APIها، فرمها و فضای ذخیره محلی](./5-browser-extension/2-forms-browsers-local-storage/README.md) | جن |
| ۱۴ | [Green Browser Extension](./5-browser-extension/solution/README.md) | فرایندهای پسزمینه مرورگر، عملکرد وب | استفاده از فرایندهای پسزمینه مرورگر برای مدیریت آیکون افزونه؛ یادگیری درباره عملکرد وب و بهینهسازیهای مرتبط | [کارهای پسزمینه و عملکرد](./5-browser-extension/3-background-tasks-and-performance/README.md) | جن |
| ۱۵ | [Space Game](./6-space-game/solution/README.md) | توسعه پیشرفتهتر بازی با جاوااسکریپت | یادگیری وراثت با استفاده از هر دو کلاسها و ترکیب و الگوی Pub/Sub، آمادهسازی برای ساخت بازی | [مقدمهای بر توسعه پیشرفته بازی](./6-space-game/1-introduction/README.md) | کریس |
| ۱۶ | [Space Game](./6-space-game/solution/README.md) | نقاشی روی بوم | یادگیری API بوم (Canvas) برای ترسیم المانها روی صفحه | [نقاشی روی بوم](./6-space-game/2-drawing-to-canvas/README.md) | کریس |
| ۱۷ | [Space Game](./6-space-game/solution/README.md) | حرکت دادن المانها در اطراف صفحه | کشف نحوه حرکت المانها با استفاده از مختصات کارتزین و API بوم | [حرکت دادن المانها](./6-space-game/3-moving-elements-around/README.md) | کریس |
| ۱۸ | [Space Game](./6-space-game/solution/README.md) | تشخیص برخورد | ایجاد برخورد بین المانها و واکنش به همدیگر با استفاده از کلیدها و ارائه تابع خنککننده برای تضمین عملکرد بازی | [تشخیص برخورد](./6-space-game/4-collision-detection/README.md) | کریس |
| ۱۹ | [Space Game](./6-space-game/solution/README.md) | ثبت امتیاز | انجام محاسبات ریاضی بر اساس وضعیت و عملکرد بازی | [ثبت امتیاز](./6-space-game/5-keeping-score/README.md) | کریس |
| ۲۰ | [Space Game](./6-space-game/solution/README.md) | پایان و راهاندازی مجدد بازی | یادگیری درباره خاتمه دادن به بازی و راهاندازی مجدد آن، شامل پاکسازی منابع و تنظیم مجدد مقادیر متغیر | [شرط پایان](./6-space-game/6-end-condition/README.md) | کریس |
| ۲۱ | [Banking App](./7-bank-project/solution/README.md) | قالبها و مسیرها (Routes) در یک وب اپ | یادگیری چگونگی ایجاد ساختار سایت چند صفحهای با استفاده از مسیرها و قالبهای HTML | [قالبها و مسیرها](./7-bank-project/1-template-route/README.md) | یوهان |
| ۲۲ | [Banking App](./7-bank-project/solution/README.md) | ساخت فرم ورود و ثبتنام | یادگیری ساخت فرمها و مدیریت روالهای اعتبارسنجی | [فرمها](./7-bank-project/2-forms/README.md) | یوهان |
| ۲۳ | [Banking App](./7-bank-project/solution/README.md) | روشهای دریافت و استفاده از دادهها | جریان دادهها در برنامه شما، نحوه دریافت، ذخیره و دفع آنها | [دادهها](./7-bank-project/3-data/README.md) | یوهان |
| ۲۴ | [Banking App](./7-bank-project/solution/README.md) | مفاهیم مدیریت وضعیت (State) | یادگیری اینکه برنامه چگونه وضعیت خود را حفظ میکند و نحوه مدیریت آن به صورت برنامهنویسی | [مدیریت وضعیت](./7-bank-project/4-state-management/README.md) | یوهان |
| ۲۵ | [کد مرورگر/وی اس کد](../../8-code-editor) | کار با وی اس کد | یادگیری نحوه استفاده از یک ویرایشگر کد | [استفاده از ویرایشگر کد وی اس کد](./8-code-editor/1-using-a-code-editor/README.md) | کریس |
| ۲۶ | [دستیاران هوش مصنوعی](./9-chat-project/README.md) | کار با هوش مصنوعی | یادگیری ساخت دستیار هوش مصنوعی خود | [پروژه دستیار هوش مصنوعی](./9-chat-project/README.md) | کریس |
## 🏫 روش تدریس
برنامه درسی ما با در نظر گرفتن دو اصل کلیدی آموزشی طراحی شده است:
> **توجهی درباره آزمونها**: همه آزمونها در پوشه Quiz-app قرار دارند، در مجموع ۴۸ آزمون که هرکدام ۳ سوال دارند. آنها در [اینجا](https://ff-quizzes.netlify.app/web/) موجود هستند و اپلیکیشن آزمون میتواند به صورت محلی اجرا شود یا در Azure مستقر شود؛ دستورالعملها را در پوشه `quiz-app` دنبال کنید.
## 🗃️ درسها
| | نام پروژه | مفاهیم آموزش داده شده | اهداف یادگیری | درس مرتبط | نویسنده |
| ۰۱ | شروع به کار | مقدمهای بر برنامهنویسی و ابزارهای حرفهای | یادگیری مبانی اصلی اکثر زبانهای برنامهنویسی و نرمافزاری که به توسعهدهندگان حرفهای در انجام کارشان کمک میکند | [مقدمه برنامهنویسی و ابزارها](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | جاسمین |
| ۰۲ | شروع به کار | مبانی گیتهاب، شامل کار گروهی | چگونگی استفاده از گیتهاب در پروژه و همکاری با دیگران بر روی یک کد بیس | [مقدمهای بر گیتهاب](./1-getting-started-lessons/2-github-basics/README.md) | فلور |
| ۰۳ | شروع به کار | دسترسپذیری | یادگیری اصول دسترسپذیری وب | [اصول دسترسپذیری](./1-getting-started-lessons/3-accessibility/README.md) | کریستوفر |
| ۰۴ | مبانی JS | انواع داده در جاوااسکریپت | مبانی انواع داده در جاوااسکریپت | [انواع داده](./2-js-basics/1-data-types/README.md) | جاسمین |
| ۰۵ | مبانی JS | توابع و متدها | یادگیری درباره توابع و متدها برای مدیریت جریان منطق برنامه | [توابع و متدها](./2-js-basics/2-functions-methods/README.md) | جاسمین و کریستوفر |
| ۰۶ | مبانی JS | ایجاد تصمیم با JS | یادگیری چگونگی ایجاد شرطها در کد با استفاده از روشهای تصمیمگیری | [تصمیمگیری](./2-js-basics/3-making-decisions/README.md) | جاسمین |
| ۰۷ | مبانی JS | آرایهها و حلقهها | کار با دادهها با استفاده از آرایهها و حلقهها در جاوااسکریپت | [آرایهها و حلقهها](./2-js-basics/4-arrays-loops/README.md) | جاسمین |
| ۰۸ | [ثبتنام تراریوم](./3-terrarium/solution/README.md) | HTML در عمل | ساخت HTML برای ایجاد یک تراریوم آنلاین، تمرکز بر ایجاد یک طرح | [مقدمهای بر HTML](./3-terrarium/1-intro-to-html/README.md) | جن |
| ۰۹ | [ثبتنام تراریوم](./3-terrarium/solution/README.md) | CSS در عمل | ساخت CSS برای استایلدهی به تراریوم آنلاین، تمرکز بر اصول اولیه CSS شامل واکنشگرایی صفحه | [مقدمهای بر CSS](./3-terrarium/2-intro-to-css/README.md) | جن |
| ۱۰ | [ثبتنام تراریوم](./3-terrarium/solution/README.md) | Closureهای جاوااسکریپت و کار با DOM | ساخت جاوااسکریپت برای ایجاد عملکرد در تراریوم به صورت رابط کشیدن و رها کردن، تمرکز بر Closureها و کار با DOM | [Closureهای JS و کار با DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | جن |
| ۱۱ | [بازی تایپ](./4-typing-game/solution/README.md) | ساخت بازی تایپ | یادگیری نحوه استفاده از رویدادهای کیبورد برای کنترل منطق برنامه جاوااسکریپت | [برنامهنویسی رویدادمحور](./4-typing-game/typing-game/README.md) | کریستوفر |
| ۱۲ | [افزونه سبز مرورگر](./5-browser-extension/solution/README.md) | کار با مرورگرها | یادگیری نحوه عملکرد مرورگرها، تاریخچه آنها و ساخت اولین عناصر افزونه مرورگر | [درباره مرورگرها](./5-browser-extension/1-about-browsers/README.md) | جن |
| ۱۳ | [افزونه سبز مرورگر](./5-browser-extension/solution/README.md) | ساخت فرم، فراخوانی API و ذخیره متغیرها در ذخیره محلی | ساخت عناصر جاوااسکریپت افزونه مرورگر جهت فراخوانی API با استفاده از متغیرهای ذخیره شده در ذخیره محلی | [APIها، فرمها و ذخیره محلی](./5-browser-extension/2-forms-browsers-local-storage/README.md) | جن |
| ۱۴ | [افزونه سبز مرورگر](./5-browser-extension/solution/README.md) | پردازشهای پسزمینه در مرورگر، عملکرد وب | استفاده از پردازشهای پسزمینه مرورگر برای مدیریت آیکون افزونه؛ یادگیری درباره عملکرد وب و بهینهسازیها برای بهبود | [کارهای پسزمینه و عملکرد](./5-browser-extension/3-background-tasks-and-performance/README.md) | جن |
| ۱۵ | [بازی فضا](./6-space-game/solution/README.md) | توسعه بازی پیشرفتهتر با جاوااسکریپت | یادگیری درباره وراثت با استفاده از کلاسها و ترکیب و الگوی Pub/Sub، در آمادهسازی برای ساخت بازی | [مقدمهای بر توسعه بازی پیشرفته](./6-space-game/1-introduction/README.md) | کریس |
| ۱۶ | [بازی فضا](./6-space-game/solution/README.md) | ترسیم روی بوم | یادگیری درباره API بوم (Canvas) که برای رسم عناصر روی صفحه استفاده میشود | [رسم روی بوم](./6-space-game/2-drawing-to-canvas/README.md) | کریس |
| ۱۷ | [بازی فضا](./6-space-game/solution/README.md) | حرکت دادن عناصر در صفحه | کشف چگونگی حرکت گرفتن عناصر با استفاده از مختصات کارتزین و API بوم | [حرکت دادن عناصر](./6-space-game/3-moving-elements-around/README.md) | کریس |
| ۱۸ | [بازی فضا](./6-space-game/solution/README.md) | تشخیص برخورد | ایجاد برخورد و واکنش عناصر به هم با استفاده از کلیدهای صفحه کلید و ارائه تابع خنککننده برای اطمینان از عملکرد بازی | [تشخیص برخورد](./6-space-game/4-collision-detection/README.md) | کریس |
| ۱۹ | [بازی فضا](./6-space-game/solution/README.md) | نگه داشتن امتیاز | انجام محاسبات ریاضی بر اساس وضعیت و عملکرد بازی | [نگهداری امتیاز](./6-space-game/5-keeping-score/README.md) | کریس |
| ۲۰ | [بازی فضا](./6-space-game/solution/README.md) | پایان و راهاندازی مجدد بازی | یادگیری درباره پایان دادن و شروع مجدد بازی، شامل پاکسازی منابع و تنظیم مجدد مقادیر متغیرها | [شرط پایان](./6-space-game/6-end-condition/README.md) | کریس |
| ۲۱ | [اپلیکیشن بانکی](./7-bank-project/solution/README.md) | قالبهای HTML و مسیرها در اپ وب | یادگیری نحوه خلق اسکلت معماری یک وبسایت چندصفحهای با استفاده از مسیرها و قالبهای HTML | [قالبها و مسیرها](./7-bank-project/1-template-route/README.md) | یوهان |
| ۲۲ | [اپلیکیشن بانکی](./7-bank-project/solution/README.md) | ساخت فرم ورود و ثبتنام | یادگیری ساخت فرمها و مدیریت روالهای اعتبارسنجی | [فرمها](./7-bank-project/2-forms/README.md) | یوهان |
| ۲۳ | [اپلیکیشن بانکی](./7-bank-project/solution/README.md) | روشهای دریافت و استفاده از دادهها | چگونگی جریان دادهها در برنامه، نحوه دریافت، ذخیره و دور انداختن آنها | [داده](./7-bank-project/3-data/README.md) | یوهان |
| ۲۴ | [اپلیکیشن بانکی](./7-bank-project/solution/README.md) | مفاهیم مدیریت وضعیت | یادگیری چگونگی نگهداری وضعیت برنامه و مدیریت آن به صورت برنامهنویسی | [مدیریت وضعیت](./7-bank-project/4-state-management/README.md) | یوهان |
| ۲۵ | [کد مرورگر / ویاسکد](../../8-code-editor) | کار با ویاس کد | یادگیری استفاده از ویرایشگر کد| [استفاده از ویرایشگر کد ویاسکد](./8-code-editor/1-using-a-code-editor/README.md) | کریس |
| ۲۶ | [دستیارهای هوش مصنوعی](./9-chat-project/README.md) | کار با هوش مصنوعی | یادگیری ساخت دستیار هوشمند شخصی | [پروژه دستیار هوش مصنوعی](./9-chat-project/README.md) | کریس |
## 🏫 روش آموزش
برنامه درسی ما بر اساس دو اصل کلیدی آموزشی طراحی شده است:
* یادگیری مبتنی بر پروژه
* آزمونهای مکرر
این برنامه اصول جاوااسکریپت، HTML و CSS را به همراه جدیدترین ابزارها و تکنیکهای مورد استفاده توسعهدهندگان وب امروز آموزش میدهد. دانشآموزان فرصت خواهند داشت با ساخت بازی تایپینگ، تراریوم مجازی، افزونه مرورگر سازگار با محیط زیست، بازی سبک مهاجم فضایی و اپلیکیشن بانکی برای کسبوکارها، تجربه عملی کسب کنند. تا پایان این مجموعه، دانشآموزان درک محکمی از توسعه وب بهدست خواهند آورد.
این برنامه اصول جاوااسکریپت، HTML و CSS، همچنین جدیدترین ابزارها و تکنیکهایی که توسعهدهندگان وب امروزی استفاده میکنند را آموزش میدهد. دانشآموزان فرصت کسب تجربه عملی با ساخت بازی تایپ، تراریوم مجازی، افزونه مرورگر دوستدار محیط زیست، بازی سبک Space Invader و اپلیکیشن بانکی برای کسبوکارها را خواهند داشت. تا پایان این مجموعه، دانشآموزان درک محکمی از توسعه وب خواهند داشت.
> 🎓 شما میتوانید چند درس اول این برنامه درسی را بهعنوان [مسیر یادگیری](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) در مایکروسافت لرن دنبال کنید!
> 🎓 میتوانید چند درس اول این برنامه درسی را بهعنوان [مسیر یادگیری](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) در Microsoft Learn طی کنید!
با اطمینان از همسویی محتوا با پروژهها، فرایند برای دانشآموزان جذابتر شده و یادگیری مفاهیم بهتر حفظ میشود. همچنین، چند درس شروعکننده در پایههای جاوااسکریپت نوشتهایم تا مفاهیم را معرفی کنیم، به همراه ویدیویی از مجموعه آموزشی "[سری مبتدیان به: جاوااسکریپت](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" برخی نویسندگان آن در این برنامه مشارکت داشتهاند.
با تضمین همراستایی محتوا با پروژهها، فرآیند برای دانشآموزان جذابتر میشود و حفظ مفاهیم افزایش مییابد. ما همچنین چند درس آغازین در مبانی جاوااسکریپت نوشتیم تا مفاهیم را معرفی کنیم، همراه با ویدیویی از مجموعه "[مجموعه مبتدیان به: جاوااسکریپت](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" که بعضی از نویسندگان آن در این برنامه مشارکت داشتهاند.
علاوه بر این، یک آزمون کمفشار پیش از کلاس، هدفگذاری دانشآموزان را برای یادگیری موضوع تنظیم میکند و آزمون دوم پس از کلاس باعث حفظ بیشتر مطلب میشود. این برنامه درسی به گونهای طراحی شده که انعطافپذیر و سرگرمکننده باشد و میتوان آن را بهطور کامل یا بخشی از آن را گذراند. پروژهها از سطح ساده آغاز شده و در انتهای دوره ۱۲ هفتهای به مرور پیچیدهتر میشوند.
علاوه بر این، یک آزمون ساده پیش از کلاس، قصد دانشآموز برای یادگیری موضوع را تعیین میکند، در حالی که آزمون دوم پس از کلاس، حفظ بیشتر مطلب را تضمین میکند. این برنامه به شکلی طراحی شده است که انعطافپذیر و سرگرمکننده باشد و میتوان آن را به طور کامل یا بخشی اجرا کرد. پروژهها از کوچک شروع شده و تا پایان چرخه ۱۲ هفتهای به تدریج پیچیدهتر میشوند.
در حالی که آگاهانه از معرفی فریمورکهای جاوااسکریپت اجتناب کردهایم تا بر مهارتهای پایهای لازم برای توسعهدهنده وب تمرکز کنیم قبل از پذیرش یک فریمورک، گام بعدی مناسب برای تکمیل این برنامه یادگیری Node.js از طریق مجموعه ویدیوهای دیگر است: "[سری مبتدیان به: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
در حالی که ما عمداً از معرفی چارچوبهای جاوااسکریپت اجتناب کردهایم تا روی مهارتهای پایهای لازم برای توسعهدهنده وب تمرکز کنیم، گام بعدی خوب برای تکمیل این برنامه، یادگیری Node.js از طریق مجموعه ویدیوهای دیگر است: "[مجموعه مبتدیان به: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> از [کد رفتار](CODE_OF_CONDUCT.md) و [راهنمای مشارکت](CONTRIBUTING.md) ما دیدن کنید. بازخورد سازنده شما را خوشامد میگوییم!
> به [قانون رفتاری](CODE_OF_CONDUCT.md) و [راهنمای مشارکت](CONTRIBUTING.md) ما مراجعه کنید. ما بازخورد سازنده شما را استقبال میکنیم!
## 🧭 دسترسی آفلاین
شما میتوانید این مستندات را به صورت آفلاین با استفاده از [Docsify](https://docsify.js.org/#/) اجرا کنید. این مخزن را فورک کنید، [Docsify را نصب کنید](https://docsify.js.org/#/quickstart) روی دستگاه محلی خود، و سپس در پوشه ریشه این مخزن دستور `docsify serve` را وارد نمایید. وبسایت روی پورت ۳۰۰۰ در لوکالهاست شما قابل دسترس خواهد بود: `localhost:3000`.
شما میتوانید این مستندات را به صورت آفلاین با استفاده از [Docsify](https://docsify.js.org/#/) اجرا کنید. این مخزن را فورک کنید، [Docsify را نصب کنید](https://docsify.js.org/#/quickstart) روی ماشین محلی خود، و سپس در پوشه اصلی این مخزن، فرمان `docsify serve` را اجرا کنید. وبسایت روی پورت ۳۰۰۰ در لوکالهاست شما عرضه خواهد شد: `localhost:3000`.
## 📘 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) پیدا کنید.
## 🎒 دورههای دیگر
تیم ما دورههای دیگری هم تولید میکند! نگاهی بیندازید به:
تیم ما دورههای دیگری نیز تولید میکند! مشاهده کنید:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
@ -220,16 +207,16 @@
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### سری هوش مصنوعی مولد
### Generative AI Series
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### آموزش پایهای
### Core Learning
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -239,8 +226,8 @@
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### سری کوپایلوت
### Copilot Series
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
اگر گیر کردید یا سوالی درباره ساخت برنامههای هوش مصنوعی داشتید، به دیگر یادگیرندگان و توسعهدهندگان باتجربه در بحثهای مربوط به MCP بپیوندید. این یک جامعه حمایتی است که در آن سوالات پذیرفته شده و دانش به صورت آزاد به اشتراک گذاشته میشود.
اگر در ساخت برنامههای هوش مصنوعی به مشکل خوردید یا سوالی داشتید، به جمع یادگیرندگان و توسعهدهندگان باتجربه در بحثهای MCP بپیوندید. این یک جامعه حمایتکننده است که سوالات خوشآمد گفته میشوند و دانش بهصورت رایگان به اشتراک گذاشته میشود.
این مخزن تحت مجوز MIT است. برای اطلاعات بیشتر به فایل [LICENSE](../../LICENSE) مراجعه کنید.
این مخزن تحت مجوز MIT است. برای اطلاعات بیشتر فایل [LICENSE](../../LICENSE) را ببینید.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**توضیح مهم**:
این سند با استفاده از خدمات ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما برای دقت تلاش میکنیم، لطفاً توجه داشته باشید که ترجمههای خودکار ممکن است شامل خطاها یا نادرستیهایی باشند. سند اصلی به زبان بومی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حیاتی، ترجمه حرفهای انسانی توصیه میشود. ما مسئول هیچ گونه سوتفاهم یا تفسیر اشتباه ناشی از استفاده از این ترجمه نیستیم.
این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما تلاش میکنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمههای خودکار ممکن است شامل خطاها یا نواقصی باشد. سند اصلی به زبان اصلی خود باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حیاتی، ترجمه انسانی حرفهای توصیه میشود. ما مسئول هیچ گونه سوتفاهم یا برداشت نادرست ناشی از استفاده از این ترجمه نیستیم.
Это репозиторий образовательной программы для обучения основам веб-разработки для начинающих. Программа представляет собой комплексный 12-недельный курс, разработанный Microsoft Cloud Advocates, и включает 24 практических урока, охватывающих JavaScript, CSS и HTML.
Это образовательный репозиторий для изучения основ веб-разработки для начинающих. Учебная программа представляет собой всесторонний 12-недельный курс, разработанный Microsoft Cloud Advocates, включающий 24 практических урока по JavaScript, CSS и HTML.
### Основные компоненты
- **Образовательный контент**: 24 структурированных урока, организованных в проектные модули
- **Практические проекты**: Террариум, Игра на скорость набора текста, Расширение для браузера, Космическая игра, Банковское приложение, Редактор кода и AI-чат-ассистент
- **Интерактивные викторины**: 48 викторин по 3 вопроса каждая (оценка до и после урока)
- **Поддержка нескольких языков**: Автоматический перевод на более чем 50 языков с помощью GitHub Actions
- **Практические проекты**: Террариум, Игра на скорость печати, Расширение для браузера, Космическая игра, Банковское приложение, Редактор кода и AIчат-ассистент
- **Интерактивные викторины**: 48 викторин по 3 вопроса каждая (до и после урока)
- **Поддержка нескольких языков**: Автоматизированный перевод более чем на 50 языков с помощью GitHub Actions
- `7-bank-project/README.md` - банковское приложение с аутентификацией
- `5-browser-extension/README.md` - разработка расширения для браузера
- `6-space-game/README.md` - разработка игры на Canvas
- `9-chat-project/README.md` - проект AI чат-ассистента
### Структура монорепозитория
Хотя это не традиционный монорепозиторий, данный репозиторий содержит несколько независимых проектов:
- Каждый урок является автономным
Хотя это не традиционный монорепозиторий, репозиторий содержит несколько независимых проектов:
- Каждый урок автономен
- Проекты не разделяют зависимости
- Работа над отдельными проектами не влияет на другие
- Клонируйте весь репозиторий для полного изучения программы
- Работа с отдельными проектами без влияния на остальные
- Клонируйте весь репозиторий для полного опыта обучения
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Отказ от ответственности**:
Этот документ был переведен с использованием сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его исходном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные толкования, возникшие в результате использования данного перевода.
Этот документ был переведен с помощью сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Несмотря на наши усилия обеспечить точность, пожалуйста, учитывайте, что автоматический перевод может содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для важной информации рекомендуется обращаться к профессиональному переводу, выполненному человеком. Мы не несем ответственности за любые недоразумения или неправильные толкования, возникшие в результате использования данного перевода.
# Веб-разработка для начинающих - учебная программа
Изучите основы веб-разработки спомощью нашего 12-недельного всестороннего курса от Microsoft Cloud Advocates. Каждое из 24 занятий посвящено JavaScript, CSS и HTML через практические проекты, такие как террариумы, расширения браузера и космические игры. Участвуйте в викторинах, обсуждениях и практических заданиях. Повышайте свои навыки и оптимизируйте усвоение знаний с помощью нашей эффективной методики обучения на основе проектов. Начните свое путешествие в программировании уже сегодня!
Изучите основы веб-разработки снашим 12-недельным комплексным курсом от Microsoft Cloud Advocates. Каждое из 24 занятий подробно рассматривает JavaScript, CSS и HTML через практические проекты, такие как террариумы, расширения для браузера и космические игры. Участвуйте в викторинах, обсуждениях и практических заданиях. Повышайте свои навыки и оптимизируйте усвоение знаний благодаря нашей эффективной педагогике, основанной на проектах. Начните своё путешествие в кодирование уже сегодня!
Присоединяйтесь к сообществу Azure AI Foundry в Discord
Присоединяйтесь к сообществу Discord Azure AI Foundry
> Этот репозиторий включает более 50 языковых переводов, что значительно увеличивает размер загрузки. Чтобы клонировать без переводов, используйте sparse checkout:
> Этот репозиторий включает более 50 переводов на разные языки, что значительно увеличивает размер загрузки. Чтобы клонировать без переводов, используйте sparse checkout:
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Это предоставит вам всё необходимое для прохождения курса с гораздо более быстрой загрузкой.
> Это даст вам всё необходимое для прохождения курса с гораздо более быстрой загрузкой.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Если вы хотите добавить поддержку дополнительных языков, они перечислены [здесь](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Если вы хотите, чтобы были добавлены дополнительные языки, поддерживаемые языки перечислены [здесь](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Вы студент?_
Посетите [**страницу Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), где вы найдете ресурсы для начинающих, студенческие пакеты и даже способы получения бесплатного ваучера на сертификат. Это страница, которую стоит добавить в закладки и периодически проверять, так как мы ежемесячно обновляем контент.
Посетите [**страницу Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), где вы найдёте ресурсы для начинающих, студенческие пакеты и даже способы получить бесплатный ваучер на сертификат. Это страница, которую стоит добавить в закладки и периодически проверять, так как мы меняем содержимое ежемесячно.
### 📣 Объявление — Новые задания в режиме GitHub Copilot Agent!
### 📣 Объявление — новые вызовы в режиме агента GitHub Copilot!
Добавлено новое задание — найдите "GitHub Copilot Agent Challenge 🚀" в большинстве глав. Это новое задание, которое вы можете выполнить с использованием GitHub Copilot и режима Agent. Если вы еще не использовали режим Agent, он позволяет не только генерировать текст, но и создавать и редактировать файлы, выполнять команды и многое другое.
Добавлен новый вызов, ищите "GitHub Copilot Agent Challenge 🚀" в большинстве глав. Это новый вызов, который вам предстоит выполнить, используя GitHub Copilot и режим агента. Если вы раньше не использовали режим агента, он не только генерирует текст, но и может создавать и редактировать файлы, запускать команды и многое другое.
### 📣 Объявление — _Новый проект с использованием генеративного ИИ_
Добавлен новый проект AI Assistant, посмотрите [проект](./9-chat-project/README.md)
### 📣 Объявление — _Новый учебный курс_ по генеративному ИИ для JavaScript только что выпущен
### 📣 Объявление — _Новая учебная программа_ по генеративному ИИ для JavaScript только что выпущена
Не пропустите наш новый курс по генеративному ИИ!
Не пропустите нашу новую учебную программу по генеративному ИИ!
Начать можно по ссылке: [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)
Посетите [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), чтобы начать!
Каждый урок включает задание, проверку знаний и вызов, которые помогут вам освоить темы, такие как:
- Формулировка запросов и их оптимизация
- Создание текстовых и визуальных приложений
Каждый урок включает задание для выполнения, проверку знаний и вызов для освоения таких тем, как:
- Формулирование запросов и проектирование запросов
- Генерация текстовых и графических приложений
- Поисковые приложения
Начать можно по ссылке: [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course)!
Посетите [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course), чтобы начать!
## 🌱 Начало работы
> **Учителя**, мы подготовили [рекомендации](for-teachers.md) по использованию этого учебного курса. Мы будем рады вашим отзывам [в нашем форуме обсуждений](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Учителя**, мы включили [некоторые предложения](for-teachers.md) о том, как использовать эту учебную программу. Мы будем рады вашему отзыву [в нашем форуме обсуждений](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Студенты](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, для каждого урока начните с предварительной викторины, затем читайте учебный материал, выполняйте различные задания и проверяйте свои знания с помощью итоговой викторины.
**[Ученики](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, для каждого урока начните с предварительной викторины, затем читайте учебный материал, выполняйте различные задания и проверяйте свои знания с помощью послесессионной викторины.
Для улучшения вашего учебного опыта подключайтесь к вашим сокурсникам для совместной работы над проектами! Обсуждения приветствуются в нашем [форуме обсуждений](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), где команда модераторов будет доступна для ответов на ваши вопросы.
Чтобы улучшить свой опыт обучения, общайтесь с товарищами по учебе и работайте над проектами вместе! Обсуждения приветствуются в нашем [форуме обсуждений](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), где наша команда модераторов будет готова ответить на ваши вопросы.
Для дальнейшего обучения настоятельно рекомендуем изучить [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) для получения дополнительных учебных материалов.
Для дальнейшего обучения мы настоятельно рекомендуем изучать [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) для получения дополнительных материалов.
### 📋 Настройка вашей среды
### 📋 Настройка среды
В этом учебном курсе уже есть готовая среда разработки! На начальном этапе вы можете выбрать работу с курсом в [Codespace](https://github.com/features/codespaces/) (_браузерная среда без необходимости установки_), или локально на вашем компьютере с помощью текстового редактора, например, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Эта учебная программа уже готова к работе в среде разработки! В начале вы можете выбрать запуск курса в [Codespace](https://github.com/features/codespaces/) (_среда, работающая в браузере без необходимости установки_), или локально на компьютере с помощью текстового редактора, такого как [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Создайте ваш репозиторий
Чтобы легко сохранять свою работу, рекомендуем создать собственную копию этого репозитория. Вы можете сделать это, нажав кнопку **Use this template** вверху страницы. Это создаст новый репозиторий в вашем аккаунте GitHub с копией курса.
#### Создайте свой репозиторий
Чтобы удобно сохранять свою работу, рекомендуем создать собственную копию этого репозитория. Для этого нажмите кнопку **Use this template** в верхней части страницы. Это создаст новый репозиторий в вашем аккаунте GitHub с копией учебной программы.
Выполните следующие шаги:
1. **Форкните репозиторий**: нажмите кнопку "Fork" в правом верхнем углу этой страницы.
Следуйте этим шагам:
1. **Форкните репозиторий**: Нажмите кнопку "Fork" в правом верхнем углу страницы.
В вашей копии этого репозитория, которую вы создали, нажмите кнопку **Code** и выберите **Open with Codespaces**. Это создаст для вас новый Codespace для работы.
В вашей копии репозитория нажмите кнопку **Code** и выберите **Open with Codespaces**. Это создаст новый Codespace для работы.
#### Запуск учебной программы локально на компьютере
Для запуска этого курса локально вам потребуется текстовый редактор, браузер и инструмент командной строки. Наш первый урок, [Введение в языки программирования и инструменты разработки](../../1-getting-started-lessons/1-intro-to-programming-languages), расскажет вам о различных вариантах каждого из этих инструментов, чтобы вы могли выбрать наиболее подходящий.
Чтобы запустить эту учебную программу локально на вашем компьютере, вам потребуется текстовый редактор, браузер и инструмент командной строки. Наш первый урок, [Введение в языки программирования и инструменты](../../1-getting-started-lessons/1-intro-to-programming-languages), проведет вас через различные варианты каждого инструмента, чтобы вы могли выбрать то, что лучше всего подходит для вас.
Мы рекомендуем использовать [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) в качестве редактора, который также имеет встроенный [терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Скачать Visual Studio Code можно [здесь](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Мы рекомендуем использовать [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) в качестве редактора, который также имеет встроенный [терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Вы можете скачать Visual Studio Code [здесь](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Клонируйте свой репозиторий на компьютер. Сделать это можно, нажав кнопку **Code** и скопировав URL:
1. Клонируйте ваш репозиторий на компьютер. Для этого нажмите кнопку **Code** и скопируйте URL:
[CodeSpace](./images/createcodespace.png)
Затем откройте [Терминал](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, который вы только что скопировали:
@ -124,136 +124,138 @@
git clone <your-repository-url>
```
2. Откройте папку в Visual Studio Code. Для этого кликните **Файл** > **Открыть папку** и выберите папку, которую вы только что склонировали.
2. Откройте папку в Visual Studio Code. Вы можете это сделать, нажав **Файл** > **Открыть папку** и выбрав папку, которую только что клонировали.
> Рекомендуемые расширения Visual Studio Code:
> Рекомендуемые расширения Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) — для предварительного просмотра HTML-страниц в Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) — для помощи в написании кода быстрее
> * [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) — чтобы помочь вам писать код быстрее
## 📂 В каждом уроке есть:
- необязательная скетчноут
- необязательная быстрая заметка (sketchnote)
- необязательное дополнительное видео
- разминка-квиз перед уроком
- разминка перед уроком в виде викторины
- письменный урок
- для проектных уроков — пошаговые инструкции по созданию проекта
- проверки знаний
- задание
- для проектных уроков — пошаговые руководства, как создать проект
- проверочные задания
- вызов (challenge)
- дополнительное чтение
- [квиз после урока](https://ff-quizzes.netlify.app/web/)
- задание
- [викторина после урока](https://ff-quizzes.netlify.app/web/)
> **Примечание оквизах**: Все квизы находятся в папке Quiz-app, всего 48 квизов по три вопроса каждый. Они доступны [здесь](https://ff-quizzes.netlify.app/web/), приложение для квизов можно запускать локально или деплоить в Azure; следуйте инструкциям в папке `quiz-app`.
> **Примечание овикторинах**: Все викторины находятся в папке Quiz-app, всего 48 викторин по три вопроса в каждой. Они доступны [здесь](https://ff-quizzes.netlify.app/web/); приложение для викторин можно запустить локально или развернуть в Azure; следуйте инструкциям в папке `quiz-app`.
## 🗃️ Уроки
| | Название проекта | Изучаемые концепции | Цели обучения| Связанный урок | Автор |
| 01 | Начало работы | Введение в программирование и инструменты профессии | Узнать основы большинства языков программирования и о программном обеспечении, которое помогает профессиональным разработчикам | [Введение в языки программирования и инструменты](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Начало работы | Основы GitHub, работа в команде | Как использовать GitHub в вашем проекте, как сотрудничать с другими в кодовой базе | [Введение в GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Начало работы | Доступность | Узнать основы веб-доступности | [Основы доступности](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Основы JS | Типы данных в 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](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Террариум](./3-terrarium/solution/README.md) | Замыкания JS, манипуляции сDOM | Создание JavaScript для функционала террариума с drag/drop, с упором на замыкания и работу с DOM | [Замыкания JS, работа с 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](./5-browser-extension/solution/README.md) | Работа с браузерами | Узнать, как работают браузеры, их историю и создание начальных элементов расширения браузера | [О браузерах](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Расширение для браузера Green](./5-browser-extension/solution/README.md) | Создание формы, вызов API и хранение переменных в local storage | Создать JavaScript элементы расширения для вызова API с использованием переменных, хранящихся в local storage | [API, формы и local storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Расширение для браузера Green](./5-browser-extension/solution/README.md) | Фоновые процессы в браузере, производительность веба | Использовать фоновые процессы браузера для управления иконкой расширения; узнать о веб-производительности и оптимизациях | [Фоновые задачи и производительность](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Космическая игра](./6-space-game/solution/README.md) | Продвинутая разработка игр на JavaScript | Изучить наследование через классы и композицию, паттерн Pub/Sub, подготовка к созданию игры | [Введение в продвинутую разработку игр](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Космическая игра](./6-space-game/solution/README.md) | Рисование на canvas | Изучение Canvas API для отрисовки элементов на экране | [Рисование на Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Космическая игра](./6-space-game/solution/README.md) | Перемещение элементов по экрану | Познакомиться с движением элементовс использованием декартовых координат и Canvas API| [Перемещение элементов](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Космическая игра](./6-space-game/solution/README.md) | Обнаружение столкновений | Сделать так, чтобы элементы сталкивались и реагировали друг на друга с помощью нажатий клавиш, добавить функцию паузы для производительности | [Обнаружение столкновений](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Космическая игра](./6-space-game/solution/README.md) | Ведение счета | Выполнять математические вычисления на основе состояния игры и производительности | [Ведение счета](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Космическая игра](./6-space-game/solution/README.md) | Завершение и перезапуск игры | Узнать о завершении и перезапуске игры, включая очистку ресурсов и сброс значений переменных | [Условие завершения](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Банковское приложение](./7-bank-project/solution/README.md) | HTML-шаблоны и маршруты веб-приложения | Научиться создавать структуру многополосного сайта с маршрутизацией и HTML-шаблонами | [HTML-шаблоны и маршруты](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Банковское приложение](./7-bank-project/solution/README.md) | Создание формы входа и регистрации | Изучить создание форм и обработку валидации | [Формы](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Банковское приложение](./7-bank-project/solution/README.md) | Методы получения и использования данных | Как данные поступают в приложение и выходят из него, как их получать, хранить и удалять | [Данные](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Банковское приложение](./7-bank-project/solution/README.md) | Концепции управления состоянием | Узнать, как приложение сохраняет состояние и как управлять им программно | [Управление состоянием](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Код браузера/VScode](../../8-code-editor) | Работа с VScode | Научиться использовать редактор кода | [Использование редактора кода VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI помощники](./9-chat-project/README.md) | Работа с ИИ | Научиться создавать собственного AI помощника | [Проект AI помощника](./9-chat-project/README.md) | Chris |
| | Название проекта | Изучаемые концепции | Цели обучения | Связанный урок | Автор |
| 01 | Начало работы | Введение в программирование и инструменты профессии | Изучение базовых принципов большинства языков программирования и софта, помогающего профессиональным разработчикам | [Введение в языки программирования и инструменты профессии](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Жасмин |
| 02 | Начало работы | Основы GitHub, включая работу в команде | Как использовать GitHub в вашем проекте, как сотрудничать с другими над кодом | [Введение в GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Флор |
| 03 | Начало работы | Доступность | Изучение основ веб-доступности | [Основы доступности](./1-getting-started-lessons/3-accessibility/README.md) | Кристофер |
| 04 | Основы JS | Типы данных в JavaScript | Основы типов данных в JavaScript | [Типы данных](./2-js-basics/1-data-types/README.md) | Жасмин |
| 05 | Основы JS | Функции и методы | Изучение функций и методов для управления логикой приложения | [Функции и методы](./2-js-basics/2-functions-methods/README.md) | Жасмин и Кристофер |
| 06 | Основы JS | Принятие решений с помощью JS | Как создавать условия в коде сиспользованием методов принятия решений | [Принятие решений](./2-js-basics/3-making-decisions/README.md) | Жасмин |
| 07 | Основы JS | Массивы и циклы | Работа с даннымис помощью массивов и циклов в JavaScript | [Массивы и циклы](./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) | Замыкания JavaScript, манипуляции DOM | Создание JavaScript для функционирования террариума как интерфейса drag/drop, фокус на замыканиях и работе с DOM | [Замыкания JS и работа с DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Джен |
| 11 | [Игра на набор текста](./4-typing-game/solution/README.md) | Создание игры на набор текста | Изучение использования событий клавиатуры для управления логикой JS-приложения | [Событийно-ориентированное программирование](./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 и хранение переменных в local storage | Создание JavaScript-элементов расширения для вызова API с использованием переменных в local storage | [API, формы и local storage](./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) | Более продвинутая разработка игр на JavaScript | Изучение наследования с использованием классов и композиции, а также шаблона Pub/Sub, подготовка к созданию игры | [Введение в продвинутую разработку игр](./6-space-game/1-introduction/README.md) | Крис |
| 16 | [Космическая игра](./6-space-game/solution/README.md) | Рисование на canvas | Изучение Canvas API, используемого для рисования на экране | [Рисование на Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Крис |
| 17 | [Космическая игра](./6-space-game/solution/README.md) | Перемещение элементов на экране | Узнайте, как элементы получают движениес использованием декартовых координат и Canvas 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) | Йохан |
| 25 | [Браузер / VSCode Код](../../8-code-editor) | Работа с VScode | Изучение работы с редактором кода | [Использование редактора кода VScode](./8-code-editor/1-using-a-code-editor/README.md) | Крис |
| 26 | [ИИ ассистенты](./9-chat-project/README.md) | Работа с ИИ | Изучение создания собственного ИИ ассистента | [Проект ИИ ассистента](./9-chat-project/README.md) | Крис |
## 🏫 Педагогика
Наша учебная программа основана на двух ключевых педагогических принципах:
* обучение на основе проектов
* частые квизы
Наша учебная программа разработана с учётом двух ключевых педагогических принципов:
* обучение через проекты
* частые викторины
Программа обучает основам JavaScript, HTML и CSS, а также последним инструментам и техникам, используемым современными веб-разработчиками. Студенты получат возможность приобрести практический опыт, создавая игру для печати, виртуальный террариум, экологичное расширение для браузера, игру в стиле космических захватчиков и банковское приложение для бизнеса. К концу серии студенты будут иметь твердое понимание веб-разработки.
Программа обучает основам JavaScript, HTML и CSS, а также последним инструментам и методам, используемым современными веб-разработчиками. Студенты получат возможность приобрести практические навыки, создавая игру на набор текста, виртуальный террариум, экологичное расширение для браузера, игру в стиле "космических захватчиков" и банковское приложение для бизнеса. К концу курса студенты будут иметь прочные знания в области веб-разработки.
> 🎓 Первые несколько уроков этой программы вы можете пройти как [Учебный путь](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn!
> 🎓 Вы можете пройти первые несколько уроков этой программы как [Учебный путь](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn!
Обеспечивая соответствие содержания проектам, процесс обучения становится более увлекательным для студентов, а запоминание концепций лучше. Мы также разработали несколько стартовых уроков по основам JavaScript для введения в концепции, дополненных видео из серии "[Для начинающих: 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](CODE_OF_CONDUCT.md) и [Contributing](CONTRIBUTING.md). Мы приветствуем ваши конструктивные отзывы!
> Ознакомьтесь с нашими [Правилами поведения](CODE_OF_CONDUCT.md) и [Правилами вклада](CONTRIBUTING.md). Мы приветствуем ваши конструктивные отзывы!
## 🧭 Оффлайн-доступ
Вы можете использовать эту документацию офлайн при помощи [Docsify](https://docsify.js.org/#/). Форкните этот репозиторий, [установите Docsify](https://docsify.js.org/#/quickstart) на свой локальный компьютер, а затем в корневой папке репозитория введите`docsify serve`. Веб-сайт будет доступен по адресу `localhost:3000` на вашем локальном хосте.
Вы можете запускать эту документацию оффлайн с помощью [Docsify](https://docsify.js.org/#/). Форкните этот репозиторий, установите [Docsify](https://docsify.js.org/#/quickstart) на локальную машину, а затем в корневой папке репозитория выполните команду`docsify serve`. Веб-сайт будет доступен на порту 3000 по адресу localhost: `localhost:3000`.
## 📘 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).
## 🎒 Другие курсы
Наша команда создает и другие курсы! Ознакомьтесь:
Наша команда выпускает и другие курсы! Ознакомьтесь:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Агенты
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Серия по генеративному ИИ
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Основное обучение
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Основы обучения
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Серия Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Если вы застряли или у вас есть вопросы по созданию приложений с ИИ. Присоединяйтесь к другим учащимся и опытным разработчикам в обсуждениях MCP. Это поддерживающее сообщество, где вопросы приветствуются, а знания свободно делятся.
Если вы застряли или у вас есть вопросы по созданию приложений ИИ, присоединяйтесь к другим обучающимся и опытным разработчикам для обсуждения MCP. Это поддерживающее сообщество, где приветствуются вопросы и свободно делятся знаниями.
@ -265,5 +267,5 @@ PDF со всеми уроками можно найти [здесь](https://mi
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Отказ от ответственности**:
Этот документ был переведен с помощью сервиса машинного перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Несмотря на стремление к точности, пожалуйста, учитывайте, что автоматический перевод может содержать ошибки или неточности. Оригинальный документ на егоисходном языке следует считать авторитетным источником. Для важной информации рекомендуется профессиональный перевод специалистом. Мы не несем ответственности за любые недоразумения или неправильные толкования, возникшие в результате использования данного перевода.
Этот документ был переведен с помощью сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Несмотря на наши усилия обеспечить точность, пожалуйста, учитывайте, что машинный перевод может содержать ошибки или неточности. Оригинальный документ на егородном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется использовать профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные толкования, возникшие в результате использования данного перевода.
localizeflow[bot]
3 weeks ago