هذا مستودع منهجي تعليمي لتعليم أساسيات تطوير الويب للمبتدئين. المنهج عبارة عن دورة شاملة لمدة 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
- `quiz-app/README.md` - تطبيق الاختبارات بـ Vue 3
- `7-bank-project/README.md` - تطبيق البنك مع المصادقة
- `5-browser-extension/README.md` - تطوير إضافات المتصفح
- `6-space-game/README.md` - تطوير الألعاب القائمة على Canvas
- `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). وعلى الرغم من سعينا لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. بالنسبة للمعلومات الهامة، يُنصح بالاعتماد على الترجمة البشرية المهنية. نحن غير مسؤولين عن أي سوء فهم أو تأويل ناتج عن استخدام هذه الترجمة.
تعلّم أساسيات تطوير الويب من خلال دورتنا الشاملة التي تستمر 12 أسبوعًا من قبل دعاة السحابة في مايكروسوفت. تغوص كل من دروس الـ24 في جافاسكريبت وCSS وHTML عبر مشاريع عملية مثل التيراريوم، امتدادات المتصفح، وألعاب الفضاء. شارك مع الاختبارات، النقاشات، والواجبات العملية. حسّن مهاراتك وزد من احتفاظك بالمعرفة من خلال منهجنا التعليمي القائم على المشاريع الفعالة. ابدأ رحلتك في الترميز اليوم!
تعلم أساسيات تطوير الويب من خلال دورتنا الشاملة التي تستمر 12 أسبوعًا من قبل دعاة مايكروسوفت السحابيين. كل واحدة من الدروس الـ 24 تغوص في JavaScript و CSS و HTML عبر مشاريع عملية مثل التيراريوم، إضافات المتصفح، وألعاب الفضاء. شارك في الاختبارات والنقاشات والتكليفات العملية. حسّن مهاراتك وفعّل استيعابك للمعرفة باستخدام طريقتنا التعليمية القائمة على المشاريع. ابدأ رحلة الترميز الخاصة بك اليوم!
1. **انشئ نسخة من الريبو (Fork)**: انقر على [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
> هذا يمنحك كل ما تحتاجه لإكمال الدورة مع تنزيل أسرع بكثير.
<!-- 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 Challenge 🚀" في معظم الفصول. هذا تحدي جديد لك لإكماله باستخدام GitHub Copilot ووضع Agent. إذا لم تستخدم وضع Agent من قبل فهو قادر ليس فقط على توليد النص بل يمكنه أيضًا إنشاء وتحرير الملفات، تشغيل الأوامر والمزيد.
### 📣 إعلان - _مشروع جديد للبناء باستخدام الذكاء الاصطناعي التوليدي_
تمت إضافة مشروع جديد لمساعد الذكاء الاصطناعي، اطلع عليه [المشروع](./9-chat-project/README.md)
تم إضافة مشروع مساعد الذكاء الاصطناعي الجديد، تفقده [المشروع](./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 الخاص بك مع نسخة من المنهج الدراسي.
#### إنشاء المستودع الخاص بك
للسهولة في حفظ عملك، يُنصح بإنشاء نسخة خاصة بك من هذا المستودع. يمكنك فعل ذلك بالنقر على زر **Use this template** في أعلى الصفحة. سيؤدي ذلك إلى إنشاء مستودع جديد في حساب GitHub الخاص بك مع نسخة من المنهج.
اتبع هذه الخطوات:
1. **انشئ نسخة من المستودع (Fork)**: انقر على زر "Fork" في أعلى يمين هذه الصفحة.
#### تشغيل المنهج الدراسي محليًا على جهاز الكمبيوتر
#### تشغيل المنهج محليًا على جهازك
لتشغيل هذا المنهج محليًا على جهاز الكمبيوتر الخاص بك، ستحتاج إلى محرر نصوص، متصفح وأداة سطر أوامر. ستكون الدرس الأول، [مقدمة في لغات البرمجة وأدوات التجارة](../../1-getting-started-lessons/1-intro-to-programming-languages)، دليلك عبر خيارات مختلفة لكل من هذه الأدوات لتختار الأنسب لك.
لتشغيل هذا المنهج محليًا على جهازك، ستحتاج إلى محرر نصوص، متصفح وأداة سطر أوامر. دروسنا الأولى، [مقدمة للغات البرمجة وأدوات المجال](../../1-getting-started-lessons/1-intro-to-programming-languages)، ستأخذك عبر خيارات مختلفة لكل من هذه الأدوات لتختار الأفضل لك.
توصيتنا هي استخدام [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) كمحرر لديك، والذي يتضمن أيضًا [طرفية مدمجة](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). يمكنك تنزيل Visual Studio Code [من هنا](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
توصيتنا هو استخدام [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) كمحرر نصوص، والذي يحتوي أيضًا على [طرفية (Terminal)](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) مدمجة. يمكنك تنزيل Visual Studio Code [من هنا](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. انسخ المستودع الخاص بك إلى جهاز الكمبيوتر الخاص بك. يمكنك فعل ذلك بالنقر على زر **Code** ونسخ عنوان URL:
1. انسخ المستودع إلى جهازك. يمكنك فعل ذلك بالنقر على زر **Code** ونسخ الرابط:
[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/)
- [اختبار ما بعد الدرس](https://ff-quizzes.netlify.app/web/)
> **ملاحظة حول الاختبارات**: جميع الاختبارات موجودة في مجلد Quiz-app، يوجد 48 اختبارًا بمجموع ثلاث أسئلة لكل اختبار. متوفرة [هنا](https://ff-quizzes.netlify.app/web/) يمكن تشغيل تطبيق الاختبار محليًا أو نشره على Azure؛ اتبع التعليمات في مجلد `quiz-app`.
> **ملاحظة حول الاختبارات:** جميع الاختبارات موجودة في مجلد Quiz-app، 48 اختبارًا إجماليًا يحتوي كل منها على ثلاثة أسئلة. وهي متاحة [هنا](https://ff-quizzes.netlify.app/web/) يمكن تشغيل تطبيق الاختبار محليًا أو نشره على Azure؛ اتبع التعليمات في مجلد `quiz-app`.
## 🗃️ الدروس
| | اسم المشروع | المفاهيم التي يُدرّسها | أهداف التعلم | الدرس المرتبط | المؤلف |
| 01 | البدء | مقدمة في البرمجة وأدوات العمل | تعلّم أساسيات معظم لغات البرمجة والبرمجيات التي تساعد المطورين المحترفين في أداء عملهم | [مقدمة في لغات البرمجة وأدوات العمل](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | البدء | أساسيات GitHub، يتضمن العمل الجماعي | كيفية استخدام GitHub في مشروعك، وكيفية التعاون مع الآخرين على قاعدة كود | [مقدمة في GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | البدء | إمكانية الوصول | تعلّم أساسيات إمكانية الوصول على الويب | [أساسيات إمكانية الوصول](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | أساسيات JS | أنواع بيانات جافاسكريبت | أساسيات أنواع البيانات في جافاسكريبت | [أنواع البيانات](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | أساسيات JS | الدوال والأساليب | تعلّم حول الدوال والأساليب لإدارة تدفق منطق التطبيق | [الدوال والأساليب](./2-js-basics/2-functions-methods/README.md) | Jasmine و 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 |
| 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 | أساسيات JavaScript | أنواع بيانات JavaScript | أساسيات أنواع بيانات JavaScript | [أنواع البيانات](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | أساسيات JavaScript | الدوال والطرق | تعلم عن الدوال والطرق لإدارة منطق التطبيق | [الدوال والطرق](./2-js-basics/2-functions-methods/README.md) | Jasmine و Christopher |
| 06 | أساسيات JavaScript | اتخاذ القرارات باستخدام JS | تعلم كيفية إنشاء شروط في الكود باستخدام طرق اتخاذ القرارات | [اتخاذ القرارات](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | أساسيات JavaScript | المصفوفات والحلقات | العمل مع البيانات باستخدام المصفوفات والحلقات في JavaScript | [المصفوفات والحلقات](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML في التطبيق | بناء الـ HTML لإنشاء تيراريوم عبر الإنترنت، مع التركيز على بناء التخطيط | [مقدمة إلى HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS في التطبيق | بناء CSS لتصميم التيراريوم عبر الإنترنت، مع التركيز على أساسيات CSS بما في ذلك جعل الصفحة متجاوبة | [مقدمة إلى CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | إغلاق JavaScript، التلاعب بـ DOM | بناء JavaScript لجعل التيراريوم يعمل كواجهة سحب وإفلات، مع التركيز على الإغلاق والتلاعب بـ DOM | [إغلاق JavaScript، التلاعب بـ DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [لعبة الطباعة](./4-typing-game/solution/README.md) | بناء لعبة الطباعة | تعلم كيفية استخدام أحداث لوحة المفاتيح لتحريك منطق تطبيق JavaScript | [البرمجة المعتمدة على الأحداث](./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 وتخزين المتغيرات في التخزين المحلي | بناء عناصر JavaScript لامتداد المتصفح لاستدعاء API باستخدام متغيرات مخزنة في التخزين المحلي | [واجهات برمجة التطبيقات، النماذج، والتخزين المحلي](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [امتداد المتصفح الأخضر](./5-browser-extension/solution/README.md) | عمليات الخلفية في المتصفح، أداء الويب | استخدام عمليات الخلفية في المتصفح لإدارة أيقونة الامتداد؛ تعلم عن أداء الويب وبعض التحسينات لتحقيق الأداء الأفضل | [مهام الخلفية والأداء](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [لعبة الفضاء](./6-space-game/solution/README.md) | تطوير ألعاب متقدم باستخدام JavaScript | تعلم عن الوراثة باستخدام كل من الفئات والتكوين ونمط النشر/الاشتراك، تحضيرًا لبناء لعبة | [مقدمة لتطوير الألعاب المتقدمة](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [لعبة الفضاء](./6-space-game/solution/README.md) | الرسم على اللوحة | تعلم عن واجهة برمجة تطبيقات Canvas، المستخدمة لرسم العناصر على الشاشة | [الرسم على اللوحة](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [لعبة الفضاء](./6-space-game/solution/README.md) | تحريك العناصر على الشاشة | اكتشف كيف يمكن للعناصر أن تتحرك باستخدام الإحداثيات الكارتيزية وواجهة برمجة تطبيقات Canvas | [تحريك العناصر](./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، بالإضافة إلى أحدث الأدوات والتقنيات المستخدمة من قبل مطوري الويب في الوقت الحالي. سيحصل الطلاب على فرصة لاكتساب خبرة عملية من خلال بناء لعبة الطباعة، ترباريوم افتراضي، إضافة متصفح صديقة للبيئة، لعبة على نمط غزو الفضاء، وتطبيق بنكي للأعمال. بنهاية السلسلة، سيكون لدى الطلاب فهم قوي لتطوير الويب.
البرنامج يعلم أساسيات 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!
بضمان توافق المحتوى مع المشاريع، أصبح التعلم أكثر تشويقًا للطلاب وسيتم تعزيز ترسيخ المفاهيم. كتبنا أيضًا العديد من الدروس التمهيدية في أساسيات جافاسكريبت لتعريف المفاهيم، بالإضافة إلى فيديو من مجموعة فيديوهات "[سلسلة المبتدئين إلى: جافاسكريبت](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 أسبوعًا.
بينما تجنبنا عمدًا تقديم أُطر عمل جافاسكريبت للتركيز على المهارات الأساسية المطلوبة كمطور ويب قبل تبني إطار عمل، فإن الخطوة التالية الجيدة لإكمال هذا المنهج ستكون تعلم Node.js عبر مجموعة أخرى من الفيديوهات: "[سلسلة المبتدئين إلى: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
على الرغم من أننا تجنبنا عمدًا تقديم أُطُر JavaScript للتركيز على المهارات الأساسية اللازمة كمطور ويب قبل تبني أُطر، فإن الخطوة التالية الجيدة لإكمال هذا المنهج هي تعلم Node.js عبر مجموعة أخرى من الفيديوهات: "[سلسلة المبتدئين إلى: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> قم بزيارة [مدونة قواعد السلوك](CODE_OF_CONDUCT.md) و[المساهمة](CONTRIBUTING.md). نرحب بتعليقاتك البناءة!
يمكنك تشغيل هذه الوثائق دون اتصال باستخدام [Docsify](https://docsify.js.org/#/). انسخ هذا المستودع، [ثبت Docsify](https://docsify.js.org/#/quickstart) على جهازك المحلي، ثم في المجلد الجذر لهذا المستودع، اكتب `docsify serve`. سيتم تقديم الموقع على المنفذ 3000 على جهازك المحلي: `localhost:3000`.
يمكنك تشغيل هذه الوثائق بدون اتصال باستخدام [Docsify](https://docsify.js.org/#/). قم بتفريع هذا المستودع، [تثبيت Docsify](https://docsify.js.org/#/quickstart) على جهازك المحلي، ثم في المجلد الجذر لهذا المستودع، اكتب `docsify serve`. سيتم تقديم الموقع على المنفذ 3000 على الوجهة المحلية الخاصة بك: `localhost:3000`.
## 📘 ملف PDF
## 📘 PDF
يمكن العثور على ملف PDF لكل الدروس [هنا](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
يمكن العثور على ملف PDF لجميع الدروس [هنا](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?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). بينما نسعى لضمان الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار النسخة الأصلية من المستند بلغتها الأصلية المصدر الرسمي والموثوق. بالنسبة للمعلومات الهامة، يُنصح بالاعتماد على الترجمة البشرية المهنية. نحن غير مسؤولين عن أي سوء فهم أو تفسير ناتج عن استخدام هذه الترجمة.
# خارطة طريق لمستودع Web-Dev-For-Beginners الخاص بـ Microsoft
**يوفر هذا المستودع خارطة طريق لتعلم أساسيات تطوير الويب مع التركيز على JavaScript و HTML و CSS. المنهج مرن ويمكن أخذه ككل أو جزئياً، مع 24 درساً موزعة على 12 أسبوعاً.**
## الإنجازات الرئيسية
* **الأسبوع 1-3:**
* مقدمة عن لغات البرمجة وأدوات المجال
* أساسيات GitHub
* إمكانية الوصول
* أساسيات JS: أنواع البيانات، الدوال والطرق
* اتخاذ القرارات باستخدام JS
* **الأسبوع 4-6:**
* المصفوفات والحلقات
* Terrarium: HTML في الممارسة
* CSS في الممارسة
* الإغلاقات في جافا سكريبت
* التلاعب بـ DOM
* **الأسبوع 7-9:**
* لعبة الطباعة: البرمجة المدفوعة بالأحداث
* إضافة المتصفح الخضراء: العمل مع المتصفحات
* بناء نموذج، استدعاء API وتخزين المتغيرات في التخزين المحلي
* العمليات الخلفية في المتصفح
* أداء الويب
* **الأسبوع 10-12:**
* لعبة الفضاء: تطوير ألعاب أكثر تقدمًا باستخدام جافا سكريبت
* الرسم على اللوحة
* تحريك العناصر حول الشاشة
* كشف التصادمات
* حفظ النقاط، إنهاء وإعادة تشغيل اللعبة
* تطبيق مصرفي: قوالب HTML والمسارات في تطبيق ويب
* بناء نموذج تسجيل الدخول والتسجيل
* طرق جلب واستخدام البيانات
* مفاهيم إدارة الحالة
## النتائج التعليمية
**بتنفيذ هذه الخريطة، سيكتسب الطلاب خبرة عملية في بناء لعبة الطباعة، التراريوم الافتراضي، إضافة متصفح صديقة للبيئة، لعبة غزاة الفضاء، وتطبيق مصرفي للأعمال. كما سيطورون فهماً قوياً لأساسيات تطوير الويب.**
## الموارد الإضافية
* يوفر هذا المستودع ثروة من الموارد للتعلم المستمر، بما في ذلك الدروس، أمثلة الكود، والتحديات.
* تقدم منصة Microsoft Learn مجموعة من دورات تطوير الويب ومسارات التعلم.
* المجتمعات الإلكترونية مثل Stack Overflow و MDN Web Docs توفر دعمًا وموارد قيمة لمطوري الويب.
**آمل أن تساعدك هذه الخريطة في رحلتك لتطوير الويب!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**إخلاء المسؤولية**:
تمت ترجمة هذا المستند باستخدام خدمة الترجمة الآلية [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لضمان الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي والمعتمد. للمعلومات الحساسة أو الهامة، يُوصى بالترجمة المهنية من قبل مترجمين محترفين. نحن غير مسؤولين عن أي سوء فهم أو تفسير ناتج عن استخدام هذه الترجمة.
این مخزن یک برنامه آموزشی برای آموزش اصول توسعه وب به مبتدیان است. این برنامه آموزشی یک دوره جامع ۱۲ هفتهای است که توسط Microsoft Cloud Advocates توسعه داده شده و شامل ۲۴ درس عملی در زمینه جاوااسکریپت، CSS و HTML میباشد.
این یک مخزن محتوای آموزشی برای آموزش اصول توسعه وب به مبتدیان است. این دوره آموزشی جامع، یک دوره 12 هفتهای است که توسط مایکروسافت کلود ادوکیتس توسعه یافته و شامل 24 درس عملی در زمینه جاوااسکریپت، CSS و HTML میباشد.
### اجزای کلیدی
### اجزای اصلی
- **محتوای آموزشی**: ۲۴ درس ساختارمند که به صورت ماژولهای مبتنی بر پروژه سازماندهی شدهاند
- **پروژههای عملی**: Terrarium، بازی تایپ، افزونه مرورگر، بازی فضایی، اپلیکیشن بانکی، ویرایشگر کد، و دستیار چت هوش مصنوعی
- **آزمونهای تعاملی**: ۴۸ آزمون با ۳ سوال در هر آزمون (ارزیابیهای قبل و بعد از درس)
- **پشتیبانی چندزبانه**: ترجمههای خودکار به بیش از ۵۰ زبان از طریق GitHub Actions
اگرچه یک Monorepo سنتی نیست، این مخزن شامل چندین پروژه مستقل است:
اگرچه این یک 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 میپردازد از طریق پروژههای عملی مانند تراریومها، افزونههای مرورگر و بازیهای فضایی. با آزمونها، بحثها و تکالیف عملی درگیر شوید. مهارتهای خود را تقویت کنید و با روش آموزش مبتنی بر پروژه مؤثر، دانش خود را بهینه کنید. سفر برنامهنویسی خود را امروز آغاز کنید!
برای شروع استفاده از این منابع، مراحل زیر را دنبال کنید:
1. **انشعاب (فورک) مخزن**: روی [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) کلیک کنید
2. **کلون کردن مخزن**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**به دیسکورد Azure AI Foundry بپیوندید و با کارشناسان و توسعهدهندگان همتراز ملاقات کنید**](https://discord.com/invite/ByRwuEEgH4)
برای شروع استفاده از این منابع، این مراحل را دنبال کنید:
1. **فورک کردن مخزن**: کلیک کنید بر روی [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **کلون کردن مخزن**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**به دیسکورد Azure AI Foundry بپیوندید و با متخصصان و توسعهدهندگان دیگر دیدار کنید**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 پشتیبانی چندزبان
### 🌐 پشتیبانی چندزبانه
#### پشتیبانی توسط GitHub Action (خودکار و همیشه بهروز)
#### پشتیبانی شده از طریق GitHub Action (خودکار و همیشه بهروز)
> این مخزن شامل بیش از ۵۰ ترجمه زبان است که اندازه دانلود را به طور قابل توجهی افزایش میدهد. برای کلون بدون ترجمهها، از 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) دیدن کنید که منابع مبتدی، پکیجهای دانشجویی و حتی راههایی برای دریافت کوپن رایگان گواهینامه را خواهید یافت. این صفحهای است که باید نشانک کنید و گاه به گاه بررسی کنید چون محتوای آن ماهانه بهروزرسانی میشود.
از [**صفحه مرکز دانشجویی**](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)
پروژه دستیار هوش مصنوعی جدید همین الان اضافه شده است، آن را بررسی کنید [پروژه](./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) مراجعه کنید!
@ -83,134 +83,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** در بالای صفحه انجام دهید. این یک مخزن جدید در حساب گیتهاب شما با کپی برنامه درسی ایجاد میکند.
مراحل زیر را دنبال کنید:
1. **انشعاب مخزن**: روی دکمه "Fork" در گوشه بالا سمت راست این صفحه کلیک کنید.
2. **کلون کردن مخزن**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
1. **فورک کردن مخزن**: روی دکمه "Fork" در گوشه بالای سمت راست این صفحه کلیک کنید.
2. **کلون کردن مخزن**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### اجرای دوره در Codespace
#### اجرای برنامه درسی در یک Codespace
در نسخه خود از این مخزن که ایجاد کردهاید، روی دکمه **Code** کلیک کرده و گزینه **Open with Codespaces** را انتخاب کنید. این کار یک Codespace جدید برای کار شما ایجاد میکند.
در نسخه کپی شده مخزن که ایجاد کردهاید، دکمه **Code** را کلیک کرده و **Open with Codespaces** را انتخاب کنید. این یک Codespace جدید برای کار ایجاد خواهد کرد.
برای اجرای این دوره بهصورت محلی نیاز به یک ویرایشگر متن، یک مرورگر و یک ابزار خط فرمان دارید. اولین درس ما، [معرفی زبانهای برنامهنویسی و ابزارهای کار](../../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>` با آدرسی که همین حالا کپی کردید:
```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) | Jasmine |
| ۰۲ | شروع به کار | اصول گیتهاب، شامل کار تیمی | نحوه استفاده از گیتهاب در پروژه خود، نحوه همکاری با دیگران روی یک کد | [مقدمه بر گیتهاب](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| ۰۳ | شروع به کار | دسترسیپذیری | یادگیری اصول دسترسیپذیری وب | [مبانی دسترسیپذیری](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| ۰۴ | مفاهیم پایه JS | انواع داده در جاوااسکریپت | اصول انواع داده در جاوااسکریپت | [انواع داده](./2-js-basics/1-data-types/README.md) | Jasmine |
| ۰۵ | مفاهیم پایه JS | توابع و متدها | آموزش توابع و متدها برای مدیریت جریان منطق برنامه| [توابع و متدها](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| ۰۶ | مفاهیم پایه JS | گرفتن تصمیم با JS | یادگیری ایجاد شرایط در کد با استفاده از روشهای تصمیمگیری | [گرفتن تصمیم](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| ۰۷ | مفاهیم پایه JS | آرایهها و حلقهها | کار با دادهها با استفاده از آرایهها و حلقهها در جاوااسکریپت | [آرایهها و حلقهها](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| ۰۸ | [تراریوم](./3-terrarium/solution/README.md) | HTML در عمل | ساخت HTML برای ایجاد یک تراریوم آنلاین، تمرکز بر ساختار صفحه | [مقدمهای بر HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| ۰۹ | [تراریوم](./3-terrarium/solution/README.md) | CSS در عمل | ساخت CSS برای استایل دهی تراریوم آنلاین، تمرکز بر اصول CSS و ساخت صفحه واکنشگرا | [مقدمهای بر CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| ۱۰ | [تراریوم](./3-terrarium/solution/README.md) | کلوزرهای جاوااسکریپت، دستکاری DOM | ساخت جاوااسکریپت برای ایجاد رابط کشیدن و رها کردن در تراریوم، تمرکز بر کلوزرها و دستکاری DOM | [کلوزرهای جاوااسکریپت، دستکاری DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| ۱۱ | [بازی تایپ](./4-typing-game/solution/README.md) | ساخت بازی تایپ | یادگیری استفاده از رویدادهای کیبورد برای مدیریت منطق برنامه جاوااسکریپت | [برنامهنویسی رویدادمحور](./4-typing-game/typing-game/README.md) | Christopher |
| ۱۲ | [افزونه مرورگر سبز](./5-browser-extension/solution/README.md) | کار با مرورگرها | یادگیری طرز کار مرورگرها، تاریخچه آنها و ساختار اولیه افزونه مرورگر | [درباره مرورگرها](./5-browser-extension/1-about-browsers/README.md) | Jen |
| ۱۳ | [افزونه مرورگر سبز](./5-browser-extension/solution/README.md) | ساخت فرم، فراخوانی API و ذخیره متغیرها در ذخیره محلی | ساخت المانهای جاوااسکریپت در افزونه مرورگر برای فراخوانی API با استفاده از متغیرهای ذخیره شده در ذخیره محلی | [APIها، فرمها و ذخیره محلی](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| ۱۴ | [افزونه مرورگر سبز](./5-browser-extension/solution/README.md) | فرایندهای پسزمینه در مرورگر، بهینهسازی وب | استفاده از فرایندهای پسزمینه مرورگر برای مدیریت آیکون افزونه؛ یادگیری درباره عملکرد وب و بهینهسازیهای مربوطه | [فرایندهای پسزمینه و عملکرد](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| ۱۵ | [بازی فضایی](./6-space-game/solution/README.md) | توسعه پیشرفته بازی با جاوااسکریپت | یادگیری وراثت با استفاده از کلاسها و ترکیب و الگوی Pub/Sub، برای آمادگی ساخت بازی | [مقدمهای بر توسعه پیشرفته بازی](./6-space-game/1-introduction/README.md) | Chris |
| ۱۶ | [بازی فضایی](./6-space-game/solution/README.md) | رسم روی بوم | آشنایی با API بوم که برای رسم اجزا روی صفحه استفاده میشود | [رسم روی بوم](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| ۱۷ | [بازی فضایی](./6-space-game/solution/README.md) | حرکت دادن اجزا روی صفحه | کشف نحوه حرکت اجزا با استفاده از مختصات کارتزین و API بوم| [حرکت دادن اجزا](./6-space-game/3-moving-elements-around/README.md) | Chris |
| ۱۸ | [بازی فضایی](./6-space-game/solution/README.md) | تشخیص برخورد | ایجاد برخورد بین اجزا و واکنش به هم با کلیدهای فشرده شده و فراهمسازی عملکرد خنککننده برای تضمین اجرای صحیح بازی | [تشخیص برخورد](./6-space-game/4-collision-detection/README.md) | Chris |
| ۱۹ | [بازی فضایی](./6-space-game/solution/README.md) | نگهداری امتیاز | انجام محاسبات ریاضی براساس وضعیت و عملکرد بازی | [نگهداری امتیاز](./6-space-game/5-keeping-score/README.md) | Chris |
| ۲۰ | [بازی فضایی](./6-space-game/solution/README.md) | پایان و راهاندازی مجدد بازی | آشنایی با پایان و راهاندازی مجدد بازی، شامل پاکسازی منابع و بازنشانی متغیرها | [شرط پایان](./6-space-game/6-end-condition/README.md) | Chris |
| ۲۱ | [اپ بانکداری](./7-bank-project/solution/README.md) | قالبها و مسیرها در اپ وب | یادگیری ایجاد چارچوب معماری یک وبسایت چند صفحهای با استفاده از مسیرها و قالبهای HTML| [قالبها و مسیرهای HTML](./7-bank-project/1-template-route/README.md) | Yohan |
| ۲۲ | [اپ بانکداری](./7-bank-project/solution/README.md) | ساخت فرم ورود و ثبتنام | یادگیری ساخت فرمها و مدیریت اعتبارسنجی | [فرمها](./7-bank-project/2-forms/README.md) | Yohan |
| ۲۳ | [اپ بانکداری](./7-bank-project/solution/README.md) | روشهای واکشی و استفاده از داده | نحوه جریان دادهها در اپلیکیشن، نحوه واکشی، ذخیرهسازی و حذف آنها | [دادهها](./7-bank-project/3-data/README.md) | Yohan |
| ۲۴ | [اپ بانکداری](./7-bank-project/solution/README.md) | مفاهیم مدیریت وضعیت | یادگیری اینکه اپ چگونه وضعیت را حفظ میکند و چطور میتوان آن را به صورت برنامهای مدیریت کرد | [مدیریت وضعیت](./7-bank-project/4-state-management/README.md) | Yohan |
| ۲۵ | [کد مرورگر/ویاسکد](../../8-code-editor) | کار با ویاسکد | یادگیری استفاده از ویرایشگر کد | [استفاده از ویرایشگر کد ویاسکد](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| ۲۶ | [دستیارهای هوش مصنوعی](./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) در مایکروسافت لرن دنبال کنید!
> 🎓 میتوانید چند درس اول این برنامه آموزشی را به عنوان یک [مسیر یادگیری](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) در مایکروسافت لرن دنبال کنید!
با اطمینان از همسویی محتوا با پروژهها، فرایند برای دانشآموزان جذابتر شده و یادگیری مفاهیم بهتر حفظ میشود. همچنین، چند درس شروعکننده در پایههای جاوااسکریپت نوشتهایم تا مفاهیم را معرفی کنیم، به همراه ویدیویی از مجموعه آموزشی "[سری مبتدیان به: جاوااسکریپت](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
@ -221,7 +221,7 @@
---
### سری هوش مصنوعی مولد
### 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)
@ -229,7 +229,7 @@
---
### آموزش پایهای
### 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)
@ -240,7 +240,7 @@
---
### سری کوپایلوت
### 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) ترجمه شده است. هر چند ما در تلاش برای دقت هستیم، لطفاً توجه داشته باشید که ترجمههای خودکار ممکن است دارای خطا یا نادرستیهایی باشند. سند اصلی به زبان بومی خود باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حیاتی، ترجمه حرفهای انسانی توصیه میشود. ما مسئول هیچ گونه سوءتفاهم یا تفسیر نادرستی که ناشی از استفاده از این ترجمه باشد، نیستیم.
**این مخزن نقشه راهی برای یادگیری اصول توسعه وب با تمرکز بر جاوااسکریپت، HTML و CSS فراهم میکند. برنامه درسی انعطافپذیر است و میتوان آن را به صورت کامل یا بخشی از آن را طی کرد، با ۲۴ درس که در طول ۱۲ هفته پراکنده شدهاند.**
## نقاط عطف کلیدی
* **هفتههای ۱-۳:**
* مقدمهای بر زبانهای برنامهنویسی و ابزارهای کار
* اصول اولیه GitHub
* قابلیت دسترسی
* مبانی JS: انواع داده، توابع و متدها
* گرفتن تصمیمات با JS
* **هفتههای ۴-۶:**
* آرایهها و حلقهها
* تراریوم: HTML در عمل
* CSS در عمل
* کلوژرهای جاوااسکریپت
* کار با DOM
* **هفتههای ۷-۹:**
* بازی تایپ کردن: برنامهنویسی مبتنی بر رویداد
* افزونه مرورگر سبز: کار با مرورگرها
* ساخت فرم، فراخوانی API و ذخیره متغیرها در فضای محلی
* فرآیندهای پسزمینه در مرورگر
* عملکرد وب
* **هفتههای ۱۰-۱۲:**
* بازی فضایی: توسعه بازی پیشرفتهتر با جاوااسکریپت
* ترسیم روی بوم
* حرکت دادن عناصر در صفحه
* تشخیص برخورد
* نگه داشتن امتیاز، پایان و راهاندازی مجدد بازی
* اپلیکیشن بانکی: قالبهای HTML و مسیرها در یک اپ وب
* ساخت فرم ورود و ثبتنام
* روشهای واکشی و استفاده از دادهها
* مفاهیم مدیریت وضعیت
## نتایج یادگیری
**با پایان این نقشه راه، دانشجویان تجربه عملی در ساخت بازی تایپ کردن، تراریوم مجازی، افزونه مرورگر دوستدار محیط زیست، بازی سبک space-invader و اپلیکیشن بانکی برای کسبوکارها کسب خواهند کرد. همچنین درک محکمی از اصول توسعه وب به دست خواهند آورد.**
## منابع اضافی
* این مخزن منبع غنیای برای یادگیری بیشتر فراهم میکند، شامل آموزشها، مثالهای کدنویسی و چالشها.
* پلتفرم Microsoft Learn دورهها و مسیرهای مختلفی برای توسعه وب ارائه میدهد.
* جوامع آنلاین مانند Stack Overflow و MDN Web Docs پشتیبانی و منابع ارزشمندی برای توسعهدهندگان وب فراهم میکنند.
**امیدوارم این نقشه راه به شما در مسیر توسعه وب کمک کند!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**سلب مسئولیت**:
این سند با استفاده از سرویس ترجمه هوش مصنوعی [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
- **Образовательный контент**: 24 структурированных урока, организованных в модули на основе проектов
- **Практические проекты**: Террариум, Игра на скорость печати, Расширение для браузера, Космическая игра, Банковское приложение, Редактор кода и AIчат-ассистент
- **Интерактивные викторины**: 48 викторин с 3 вопросами каждая (оценка до и после урока)
- **Многоязычная поддержка**: Автоматические переводы на 50+ языков с помощью GitHub Actions
- `7-bank-project/README.md` - Банковское приложение с аутентификацией
- `5-browser-extension/README.md` - Разработка расширений для браузера
- `5-browser-extension/README.md` - Разработка расширения для браузера
- `6-space-game/README.md` - Разработка игры на Canvas
- `9-chat-project/README.md` - Проект AI-чат-ассистента
- `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
> Этот репозиторий включает более 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)
#### 🧑🎓 _Вы студент?_
Посетите [**страницу 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 Challenge 🚀» в большинстве разделов. Это новое задание для вас, используя GitHub Copilot и режим Agent. Если вы ранее не пользовались режимом Agent, он не только генерирует текст, но и может создавать и редактировать файлы, выполнять команды и многое другое.
### 📣 Объявление — _Новый проект с использованием генеративного ИИ_
Добавлен новый проект AI Assistant, посмотрите [проект](./9-chat-project/README.md)
Недавно добавлен новый проект 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" в правом верхнем углу этой страницы.
В вашей копии этого репозитория, которую вы создали, нажмите кнопку **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,146 +124,148 @@
git clone <your-repository-url>
```
2. Откройте папку в Visual Studio Code. Для этого кликните **Файл** > **Открыть папку** и выберите папку, которую вы только что склонировали.
2. Откройте папку в 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) — для помощи в написании кода быстрее
> * [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`.
> **Примечание о квизах**: Все квизы находятся в папке 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) | Jasmine |
| 02 | Начинаем работу | Основы GitHub, работа в команде | Узнать, как использовать GitHub в проекте, как сотрудничать с другими над кодом | [Введение в GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Начинаем работу | Доступность | Изучить основы веб-доступности | [Основы доступности](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Основы JS | Типы данных JavaScript | Основы работы с типами данных в JavaScript | [Типы данных](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Основы JS |Функции и методы | Узнать о функциях и методах для управления логикой приложения | [Функции и методы](./2-js-basics/2-functions-methods/README.md) | Jasmine и Christopher |
| 06 | Основы JS | Принятие решений в JS | Научиться создавать условия в коде с помощью конструкций принятия решений | [Принятие решений](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Основы JS | Массивы и циклы | Работа с данными используя массивы и циклы в JavaScript | [Массивы и циклы](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Террариум](./3-terrarium/solution/README.md) | Практика HTML | Создать HTML для онлайн-террариума, сосредоточившись на создании разметки | [Введение в HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Террариум](./3-terrarium/solution/README.md) | Практика CSS | Создать CSS для стилизации онлайн-террариума, акцент на основах CSS и адаптивности страницы | [Введение в CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Террариум](./3-terrarium/solution/README.md) | Замыкания JavaScript, работа с DOM | Написать JavaScript для реализации функционала перетаскивания в террариуме, акцент на замыкания и манипуляции DOM | [Замыкания JS и работа с DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Игра на скорость набора](./4-typing-game/solution/README.md) | Создание игры для набора текста | Научиться использовать события клавиатуры для управления логикой JS приложения | [Событийно-ориентированное программирование](./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 и хранение переменных в localStorage | Написать JavaScript для расширения браузера для вызова API с использованием переменных из локального хранилища | [API, формы и локальное хранилище](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Расширение зеленого браузера](./5-browser-extension/solution/README.md) | Фоновые процессы в браузере, производительность веба | Использовать фоновые процессы браузера для управления иконкой расширения; изучить веб-производительность и оптимизации | [Фоновые задачи и производительность](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Космическая игра](./6-space-game/solution/README.md) | Продвинутая разработка игр на 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 Ассистент](./9-chat-project/README.md) | Chris |
## 🏫 Педагогика
Наша учебная программа основана на двух ключевых педагогических принципах:
* обучение на основе проектов
Наша учебная программа разработана с учётом двух ключевых педагогических принципов:
* обучение через проекты
* частые квизы
Программа обучает основам 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 с видео из серии "[Beginners Series to: 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 через другую видеосерию: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Ознакомьтесь с нашими [Правилами поведения](CODE_OF_CONDUCT.md) и [Правилами вклада](CONTRIBUTING.md). Мы приветствуем ваши конструктивные отзывы!
> Посетите наши руководства [Кодекс поведения](CODE_OF_CONDUCT.md) и [Как внести вклад](CONTRIBUTING.md). Мы рады вашим конструктивным отзывам!
## 🧭 Оффлайн-доступ
Вы можете использовать эту документацию офлайн при помощи [Docsify](https://docsify.js.org/#/). Форкните этот репозиторий, [установите Docsify](https://docsify.js.org/#/quickstart) на свой локальный компьютер, а затем в корневой папке репозитория введите `docsify serve`. Веб-сайт будет доступен по адресу `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).
## 🎒 Другие курсы
Наша команда создает и другие курсы! Ознакомьтесь:
Наша команда выпускает и другие курсы! Посмотрите:
<!-- 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. Это поддерживающее сообщество, где вопросы приветствуются, а знания свободно распространяются.
Этот репозиторий лицензирован по лицензии 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 Web-Dev-For-Beginners
**Этот репозиторий предоставляет дорожную карту для изучения основ веб-разработки с упором на JavaScript, HTML и CSS. Учебная программа гибкая и может быть пройдена полностью или частично, включает 24 урока, распределённых на 12 недель.**
## Ключевые этапы
* **Недели 1-3:**
* Введение в языки программирования и основные инструменты
* Основы GitHub
* Доступность
* Основы JS: типы данных, функции и методы
* Принятие решений с помощью JS
* **Недели 4-6:**
* Массивы и циклы
* Террариум: HTML на практике
* CSS на практике
* Замыкания в JavaScript
* Манипуляция DOM
* **Недели 7-9:**
* Игра на набор текста: программирование с обработкой событий
* Расширение Green Browser: работа с браузерами
* Создание формы, вызов API и хранение переменных в локальном хранилище
* Фоновые процессы в браузере
* Веб-производительность
* **Недели 10-12:**
* Космическая игра: более продвинутая разработка игр на JavaScript
* Рисование на canvas
* Перемещение элементов по экрану
* Обнаружение столкновений
* Подсчёт очков, окончание и перезапуск игры
* Банковское приложение: HTML шаблоны и маршруты в веб-приложении
* Создание формы регистрации и входа
* Методы получения и использования данных
* Концепции управления состоянием
## Результаты обучения
**Завершив эту дорожную карту, студенты получат практический опыт создания игры на набор текста, виртуального террариума, экологичного расширения для браузера, игры в стиле космических захватчиков и банковского приложения для бизнеса. Они также разовьют прочное понимание основ веб-разработки.**
## Дополнительные ресурсы
* Этот репозиторий содержит множество ресурсов для дальнейшего обучения, включая руководства, примеры кода и задания.
* Платформа Microsoft Learn предлагает разнообразные курсы и учебные пути по веб-разработке.
* Онлайн-сообщества, такие как Stack Overflow и MDN Web Docs, предоставляют ценную поддержку и ресурсы для веб-разработчиков.
**Надеюсь, эта дорожная карта поможет вам в вашем путешествии по веб-разработке!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Отказ от ответственности**:
Этот документ был переведен с помощью сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Несмотря на наши усилия обеспечить точность, имейте в виду, что автоматический перевод может содержать ошибки или неточности. Оригинальный документ на его исходном языке следует считать авторитетным источником. Для критически важной информации рекомендуется профессиональный перевод специалистом. Мы не несем ответственности за любые недоразумения или неправильные толкования, возникшие в результате использования данного перевода.
localizeflow[bot]
2 days ago