هذا مستودع منهج تعليمي لتعليم أساسيات تطوير الويب للمبتدئين. المنهج عبارة عن دورة شاملة لمدة 12 أسبوعًا تم تطويرها من قبل دعاة سحابة مايكروسوفت، تتضمن 24 درسًا عمليًا تغطي جافا سكريبت، CSS، وHTML.
هذا مستودع منهج تعليمي لتعليم أساسيات تطوير الويب للمبتدئين. المنهج هو دورة شاملة مدتها 12 أسبوعًا تم تطويرها بواسطة Microsoft Cloud Advocates، ويشتمل على 24 درسًا عمليًا يغطي JavaScript وCSS وHTML.
### المكونات الرئيسية
- **المحتوى التعليمي**: 24 درسًا منظمًا في وحدات قائمة على المشاريع
- **مشاريع عملية**: Terrarium، لعبة الكتابة، امتداد المتصفح، لعبة الفضاء، تطبيق البنك، محرر التعليمات البرمجية، ومساعد دردشة بالذكاء الاصطناعي
- **اختبارات تفاعلية**: 48 اختبارًا مع 3 أسئلة لكل اختبار (تقييمات ما قبل/بعد الدرس)
- **دعم متعدد اللغات**: ترجمات آلية لأكثر من 50 لغة عبر GitHub Actions
للحصول على تعليمات تفصيلية حول المشاريع الفردية، راجع ملفات README في:
- `quiz-app/README.md` - تطبيق اختبار Vue 3
- `7-bank-project/README.md` - تطبيق بنكي مع مصادقة
- `5-browser-extension/README.md` - تطوير امتداد متصفح
- `6-space-game/README.md` - تطوير لعبة قائمة على Canvas
- `9-chat-project/README.md` - مشروع مساعد دردشة بالذكاء الاصطناعي
للحصول على تعليمات تفصيلية عن المشاريع الفردية، راجع ملفات README في:
- `quiz-app/README.md` - تطبيق مسابقات Vue 3
- `7-bank-project/README.md` - تطبيق بنكي مع المصادقة
- `5-browser-extension/README.md` - تطوير إضافة المتصفح
- `6-space-game/README.md` - تطوير لعبة على Canvas
- `9-chat-project/README.md` - مشروع مساعد دردشة AI
### هيكلية المونوريبو
### هيكل Monorepo
رغم أنه ليس مونوريبو تقليدي، يحتوي هذا المستودع على عدة مشاريع مستقلة:
على الرغم من أنه ليس monorepo تقليدي، يحتوي هذا المستودع على مشاريع مستقلة متعددة:
- كل درس مستقل بذاته
- المشاريع لا تشترك في التبعيات
- يمكنك العمل على مشاريع فردية دون التأثير على الأخرى
- استنسخ المستودع كاملًا لتجربة المنهج الكامل
- العمل على مشاريع فردية دون التأثير على الأخرى
- استنساخ المستودع كاملًا لتجربة المنهج الكامل
---
<!-- 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 أسبوعًا من قِبل دعاة السحابة في مايكروسوفت. كل درس من الدروس الـ 24 يغوص في JavaScript و CSS و HTML من خلال مشاريع تطبيقية مثل التيراريومات، امتدادات المتصفح، وألعاب الفضاء. شارك في اختبارات، مناقشات، وواجبات عملية. حسن مهاراتك وعزز احتفاظك بالمعرفة من خلال منهجنا الفعال المبني على المشاريع. ابدأ رحلتك في الترميز اليوم!
تعلم أساسيات تطوير الويب مع دورتنا الشاملة التي تستمر 12 أسبوعًا من Microsoft Cloud Advocates. كل من الدروس الـ 24 تغوص في JavaScript وCSS وHTML من خلال مشاريع تطبيقية مثل التيراريوم، وإضافات المتصفح، وألعاب الفضاء. تفاعل مع الاختبارات والمناقشات والمهام العملية. حسن مهاراتك وعزز استيعابك للمعرفة باستخدام منهجية التعلم القائمة على المشاريع الفعالة لدينا. ابدأ رحلتك في البرمجة اليوم!
> يحتوي هذا المستودع على أكثر من 50 ترجمة للغات مما يزيادة حجم التنزيل بشكل كبير. للنسخ بدون الترجمات، استخدم السحب المتفرق:
> يحتوي هذا المستودع على أكثر من 50 ترجمة للغات مما يزيد من حجم التنزيل بشكل كبير. للاكتفاء بالنسخ بدون الترجمات، استخدم sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,232 +48,232 @@
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> هذا يمنحك كل ما تحتاجه لإتمام الدورة بسرعة تنزيل أعلى.
> هذا يمنحك كل ما تحتاجه لإكمال الدورة بسرعة تنزيل أعلى.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**إذا رغبت بدعم لغات ترجمة إضافية فهي مدرجة [هنا](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**إذا كنت ترغب في دعم لغات ترجمة إضافية، فهي مدرجة [هنا](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _هل أنت طالب؟_
قم بزيارة [**صفحة مركز الطلاب**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) حيث ستجد موارد للمبتدئين، حقائب طلابية وحتى طرق الحصول على قسيمة شهادة مجانية. هذه الصفحة هي التي ترغب في إضافتها للمفضلة والتحقق منها بين الحين والآخر مع تحديث المحتوى شهريًا.
تفضل بزيارة صفحة [**مركز الطلاب**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) حيث ستجد موارد للمبتدئين، حزم للطلاب وحتى طرق للحصول على قسيمة شهادة مجانية. هذه هي الصفحة التي ترغب في وضعها في المفضلة والتحقق منها من وقت لآخر حيث نقوم بتبديل المحتوى شهريًا.
### 📣 إعلان - تحديات وضع GitHub Copilot Agent جديدة لإكمالها!
### 📣 إعلان - تحديات جديدة لوضع GitHub Copilot Agent لإكمالها!
تمت إضافة تحدي جديد، ابحث عن "تحدي GitHub Copilot Agent 🚀" في معظم الفصول. إنه تحدٍ جديد لك لتنجزه باستخدام GitHub Copilot ووضع Agent. إذا لم تستخدم وضع Agent من قبل، هو قادر ليس فقط على إنشاء النصوص بل يمكنه أيضًا إنشاء وتحرير الملفات، تشغيل الأوامر والمزيد.
تمت إضافة تحدٍ جديد، ابحث عن "تحدي GitHub Copilot Agent 🚀" في معظم الفصول. هذا تحدٍ جديد يجب عليك إكماله باستخدام GitHub Copilot ووضع Agent. إذا لم تستخدم وضع 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) حيث سيكون فريق المراقبين متاحًا للإجابة على أسئلتكم.
لتطوير تعليمك أكثر، نوصي بشدة باستكشاف [مايكروسوفت ليرن](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) للمزيد من مواد الدراسة.
هذا المنهج يحتوي على بيئة تطوير جاهزة للعمل! أثناء البدء يمكنك اختيار تشغيل المنهج في [Codespace](https://github.com/features/codespaces/) (_بيئة متصفح لا تحتاج تثبيتات_)، أو محليًا على جهاز الكمبيوتر الخاص بك باستخدام محرر نصوص مثل [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
يحتوي هذا المنهج على بيئة تطوير جاهزة! عند البدء يمكنك اختيار تشغيل المنهج في [Codespace](https://github.com/features/codespaces/) (_بيئة قائمة على المتصفح لا تتطلب تثبيت_)، أو محليًا على جهاز الكمبيوتر باستخدام محرر نصوص مثل [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### أنشئ مستودعك الخاص
لتمكينك من حفظ عملك بسهولة، يُنصح بأن تنشئ نسختك الخاصة من هذا المستودع. يمكنك فعل ذلك بالنقر على زر **Use this template** في أعلى الصفحة. هذا سينشئ مستودعًا جديدًا في حساب GitHub الخاص بك مع نسخة من المنهج.
#### أنشئ مستودعك
لكي تحفظ عملك بسهولة، يُنصح بإنشاء نسخة من هذا المستودع خاصتك. يمكنك فعل ذلك بالنقر على زر **Use this template** أعلى الصفحة. هذا سينشئ مستودعًا جديدًا في حساب GitHub الخاص بك مع نسخة من المنهج.
اتبع هذه الخطوات:
1. **فرع المستودع**: انقر على زر "Fork" في أعلى يمين هذه الصفحة.
#### تشغيل المنهج محليًا على جهاز الكمبيوتر الخاص بك
لتشغيل هذا المنهج محليًا على جهاز الكمبيوتر الخاص بك ستحتاج إلى محرر نصوص، متصفح أويب وأداة سطر الأوامر. درسنا الأول، [مقدمة إلى لغات البرمجة وأدوات التجارة](../../1-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).
1. قم باستنساخ مستودعك على جهاز الكمبيوتر الخاص بك. يمكنك القيام بذلك بالنقر على زر **Code** ونسخ عنوان URL:
1. انسخ المستودع الخاص بك إلى جهاز الكمبيوتر الخاص بك. يمكنك القيام بذلك عن طريق الضغط على زر **Code** ونسخ عنوان URL:
[CodeSpace](./images/createcodespace.png)
ثم، افتح [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) داخل [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) وشغّل الأمر التالي، مستبدلاً`<your-repository-url>` بعنوان URL الذي قمت بنسخه للتو:
ثم افتح [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) داخل [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) وقم بتشغيل الأمر التالي، مع استبدال`<your-repository-url>` بعنوان URL الذي قمت بنسخه للتو:
```bash
git clone <your-repository-url>
```
2. افتح المجلد في Visual Studio Code. يمكنك القيام بذلك بالنقر على **File** > **Open Folder** واختيار المجلد الذي قمت باستنساخه للتو.
2. افتح المجلد في Visual Studio Code. يمكنك القيام بذلك بالنقر على **File** > **Open Folder** واختيار المجلد الذي استنساخته للتو.
> التوصيات الخاصة بالامتدادات في Visual Studio Code:
> الإضافات الموصى بها لـ Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - لمعاينة صفحات HTML داخل Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - لمساعدتك في كتابة الشيفرة بسرعة أكبر
> * [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 and Christopher |
| 06 | أساسيات JS | اتخاذ القرارات بـ JS | تعلم كيفية إنشاء الشروط في الشيفرة باستخدام أساليب اتخاذ القرار | [اتخاذ القرارات](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | أساسيات JS | المصفوفات والحلقات | العمل مع البيانات باستخدام المصفوفات والحلقات في JavaScript | [المصفوفات والحلقات](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [التيراريوم](./3-terrarium/solution/README.md) | HTML في التطبيق | بناء HTML لإنشاء تيراريوم إلكتروني، مع التركيز على بناء التخطيط | [مقدمة إلى HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [التيراريوم](./3-terrarium/solution/README.md) | CSS في التطبيق | بناء CSS لتنسيق التيراريوم الإلكتروني، مع التركيز على أساسيات CSS بما في ذلك جعل الصفحة متجاوبة | [مقدمة إلى CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [التيراريوم](./3-terrarium/solution/README.md) | إغلاق جافا سكريبت، التلاعب بـ 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 باستخدام المتغيرات المخزنة في التخزين المحلي | [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) | تطوير ألعاب متقدم أكثر باستخدام 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 |
## 🏫 المنهجية التربوية
تم تصميم منهجنا الدراسي باستخدام مبدأين تربويين رئيسيين في الاعتبار:
* التعلم المبني على المشاريع
| 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 and Christopher |
| 06 | أساسيات JS | اتخاذ القرارات باستخدام JS | تعلم كيفية إنشاء الشروط في الكود باستخدام طرق اتخاذ القرار | [اتخاذ القرارات](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | أساسيات JS | المصفوفات والحلقات | العمل مع البيانات باستخدام المصفوفات والحلقات في جافاسكريبت | [المصفوفات والحلقات](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML في التطبيق | بناء HTML لإنشاء تيراريوم على الإنترنت، مع التركيز على بناء التخطيط | [مقدمة في HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS في التطبيق | بناء CSS لتنسيق التيراريوم على الإنترنت، مع التركيز على أساسيات CSS بما في ذلك جعل الصفحة متجاوبة | [مقدمة في CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | إغلاق الجافاسكريبت، معالجة DOM | بناء جافاسكريبت لجعل التيراريوم يعمل كواجهة السحب والإفلات، مع التركيز على الإغلاق ومعالجة DOM | [إغلاق الجافاسكريبت، معالجة DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | بناء لعبة الطباعة | تعلم كيفية استخدام أحداث لوحة المفاتيح للتحكم في منطق تطبيق جافاسكريبت | [برمجة معتمدة على الأحداث](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | العمل مع المتصفحات | تعلم كيفية عمل المتصفحات، تاريخها، وكيفية هيكلة العناصر الأولى لإضافة متصفح | [حول المتصفحات](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | بناء نموذج، استدعاء API وتخزين المتغيرات في التخزين المحلي | بناء عناصر جافاسكريبت لإضافة المتصفح لاستدعاء API باستخدام المتغيرات المخزنة في التخزين المحلي | [APIs، النماذج والتخزين المحلي](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | العمليات الخلفية في المتصفح، أداء الويب | استخدام العمليات الخلفية للمتصفح لإدارة أيقونة الإضافة؛ التعرف على أداء الويب وبعض التحسينات لجعل | [المهام الخلفية والأداء](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | تطوير الألعاب الأكثر تقدماً باستخدام جافاسكريبت | تعلم عن الوراثة باستخدام الفئات والتكوين ونمط Pub/Sub، تمهيدًا لبناء لعبة | [مقدمة في تطوير الألعاب المتقدم](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | الرسم على القماش | تعلم عن واجهة برمجة التطبيقات Canvas، المستخدمة لرسم العناصر على الشاشة | [الرسم على القماش](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | تحريك العناصر على الشاشة | اكتشف كيف يمكن للعناصر اكتساب الحركة باستخدام الإحداثيات الكارتيزية وواجهة API الخاصة بـ Canvas | [تحريك العناصر](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | كشف التصادم | جعل العناصر تتصادم وتتفاعل مع بعضها البعض باستخدام ضغطات المفاتيح وتوفير دالة تبريد لضمان أداء اللعبة | [كشف التصادم](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | تتبع النقاط | إجراء الحسابات الرياضية بناءً على حالة اللعبة وأدائها | [تتبع النقاط](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | إنهاء اللعبة وإعادة تشغيلها | التعرف على كيفية إنهاء اللعبة وإعادة تشغيلها، بما في ذلك تنظيف الموارد وإعادة تعيين قيم المتغيرات | [شروط النهاية](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | قوالب HTML والمسارات في تطبيق ويب | تعلم كيفية إنشاء هيكل موقع متعدد الصفحات باستخدام التوجيه وقوالب HTML | [قوالب HTML والمسارات](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | بناء نموذج تسجيل دخول وتسجيل | تعلم عن بناء النماذج والتعامل مع إجراءات التحقق | [النماذج](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | طرق جلب واستخدام البيانات | كيفية تدفق البيانات داخل التطبيق وخارجه، كيفية جلبها، تخزينها، والتخلص منها | [البيانات](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | مفاهيم إدارة الحالة | تعلم كيف يحتفظ تطبيقك بالحالة وكيفية إدارتها برمجيًا | [إدارة الحالة](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | العمل مع VScode | تعلم كيفية استخدام محرر الكود| [استخدام محرر VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | العمل مع الذكاء الاصطناعي | تعلم كيفية بناء مساعدك الذكي الخاص | [مشروع المساعد الذكي](./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 لتقديم المفاهيم، مقرونة بفيديو من مجموعة "[سلسلة للمبتدئين: 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)".
وبينما تجنبنا عمدًا تقديم أُطُر جافاسكريبت للتركيز على المهارات الأساسية المطلوبة كمطور ويب قبل تبني أُطُر، فإن خطوة جيدة تالية لإكمال هذا المنهج هي تعلم 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).
## 🎒 دورات أخرى
يقوم فريقنا بإنتاج دورات أخرى! تحقق من:
يقوم فريقنا بإنتاج دورات أخرى! تفقد:
<!-- 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)
[](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/edgeai-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)
[-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/datascience-beginners?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)
[](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). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر المعتمد. للمعلومات الهامة، يوصى بالترجمة المهنية البشرية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
Dies ist ein Bildungs-Curriculum-Repository zum Unterrichten der Grundlagen der Webentwicklung für Anfänger. Das Curriculum ist ein umfassender 12-wöchiger Kurs, entwickelt von Microsoft Cloud Advocates, mit 24 praktischen Lektionen zu JavaScript, CSS und HTML.
Dies ist ein Bildungs-Curriculum-Repository zum Vermitteln von Webentwicklungsgrundlagen für Anfänger. Das Curriculum ist ein umfassender 12-Wochen-Kurs, der von Microsoft Cloud Advocates entwickelt wurde und 24 praxisorientierte Lektionen zu JavaScript, CSS und HTML enthält.
### Hauptbestandteile
### Hauptkomponenten
- **Bildungsinhalt**: 24 strukturierte Lektionen, organisiert in projektbasierten Modulen
- `6-space-game/README.md` - Canvas-basiertes Spiel
- `9-chat-project/README.md` - KI-Chat-Assistent Projekt
### Monorepo-Struktur
Obwohl kein traditionelles Monorepo, enthält dieses Repository mehrere unabhängige Projekte:
- Jede Lektion ist eigenständig
- Projekte teilen keine Abhängigkeiten
- Arbeit an Einzelprojekten ohne Beeinflussung anderer
- Gesamtes Repo klonen für das komplette Curriculum-Erlebnis
Obwohl kein traditionelles Monorepo, enthält dieses Repository mehrere unabhängige Projekte:
- Jede Lektion ist eigenständig
- Projekte teilen keine Abhängigkeiten
- Arbeit an einzelnen Projekten ohne Beeinflussung anderer möglich
- Komplettes Repository klonen für das vollständige Curriculum-Erlebnis
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir auf Genauigkeit achten, bitten wir zu beachten, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner Ursprungssprache ist als maßgebliche Quelle zu betrachten. Für wichtige Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Verwendung dieser Übersetzung entstehen.
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner Ursprungssprache gilt als maßgebliche Quelle. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Verwendung dieser Übersetzung ergeben.
Lerne die Grundlagen der Webentwicklung mit unserem umfassenden 12-wöchigen Kurs von Microsoft Cloud Advocates. Jede der 24 Lektionen vertieft JavaScript, CSS und HTML durch praktische Projekte wie Terrarien, Browser-Erweiterungen und Weltraumspiele. Engagiere dich mit Quizzen, Diskussionen und praktischen Aufgaben. Verbessere deine Fähigkeiten und optimiere dein Wissensspeicher mit unserer effektiven projektbasierten Didaktik. Starte noch heute deine Programmierreise!
Lerne die Grundlagen der Webentwicklung mit unserem 12-wöchigen umfassenden Kurs von Microsoft Cloud Advocates. Jede der 24 Lektionen taucht durch praktische Projekte wie Terrarien, Browser-Erweiterungen und Weltraumspiele in JavaScript, CSS und HTML ein. Engagiere dich mit Quizzen, Diskussionen und praktischen Aufgaben. Verbessere deine Fähigkeiten und optimiere dein Wissensspeicherung mit unserer effektiven projektbasierten Pädagogik. Beginne noch heute deine Programmierreise!
> Dieses Repository enthält über 50 Sprachübersetzungen, was die Download-Größe erheblich erhöht. Um ohne Übersetzungen zu klonen, verwende Sparse Checkout:
> Dieses Repository enthält über 50 Sprachübersetzungen, die die Downloadgröße erheblich erhöhen. Um ohne Übersetzungen zu klonen, nutze Sparse Checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,44 +48,44 @@ Folge diesen Schritten, um die Ressourcen zu nutzen:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Damit erhältst du alles, um den Kurs zu absolvieren – und der Download geht viel schneller.
> Dies gibt dir alles, was du brauchst, um den Kurs mit einem viel schnelleren Download abzuschließen.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Wenn du weitere Übersetzungen wünschst, findest du die unterstützten Sprachen [hier](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Wenn du zusätzliche Übersetzungen möchtest, findest du unterstützte Sprachen [hier](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Bist du Student?_
Besuche die [**Student Hub-Seite**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), wo du Anfängerressourcen, Studentenpakete und sogar Möglichkeiten findest, einen kostenlosen Zertifikatsgutschein zu erhalten. Diese Seite solltest du als Lesezeichen speichern und regelmäßig besuchen, da wir monatlich Inhalte austauschen.
Besuche die [**Student Hub-Seite**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), wo du Anfängerressourcen, Studentenkits und sogar Möglichkeiten findest, einen kostenlosen Zertifikatsgutschein zu erhalten. Dies ist die Seite, die du bookmarken solltest und von Zeit zu Zeit überprüfst, da der Inhalt monatlich aktualisiert wird.
### 📣 Ankündigung – Neue GitHub Copilot Agent Mode Herausforderungen zum Abschließen!
### 📣 Ankündigung – Neue Herausforderungen im GitHub Copilot Agent-Modus zum Abschließen!
Neue Herausforderung hinzugefügt, suche nach "GitHub Copilot Agent Challenge 🚀" in den meisten Kapiteln. Das ist eine neue Challenge für dich, die du mit GitHub Copilot und dem Agent Mode abschließen kannst. Falls du den Agent Mode noch nicht benutzt hast: Er erzeugt nicht nur Text, sondern kann auch Dateien erstellen und bearbeiten, Befehle ausführen und mehr.
Neue Herausforderung hinzugefügt, suche nach „GitHub Copilot Agent Challenge 🚀“ in den meisten Kapiteln. Das ist eine neue Herausforderung für dich, die du mit GitHub Copilot und dem Agent-Modus abschließen kannst. Falls du den Agent-Modus noch nicht benutzt hast: Er kann nicht nur Text generieren, sondern auch Dateien erstellen und bearbeiten, Befehle ausführen und mehr.
### 📣 Ankündigung – _Neues Projekt mit Generativer KI_
### 📣 Ankündigung – _Neues Projekt zum Erstellen mit generativer KI_
Neues KI-Assistent-Projekt gerade hinzugefügt, schau es dir an [Projekt](./9-chat-project/README.md)
Neues AI Assistant-Projekt gerade hinzugefügt, schau es dir an [Projekt](./9-chat-project/README.md)
### 📣 Ankündigung –_Neuer Lehrplan_ zu Generativer KI für JavaScript wurde gerade veröffentlicht
### 📣 Ankündigung –_Neuer Lehrplan_ zu generativer KI für JavaScript wurde gerade veröffentlicht
Verpasse nicht unseren neuen Generative AI Lehrplan!
Verpasse nicht unseren neuen Lehrplan zur generativen KI!
Besuche [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), um loszulegen!
Jede Lektion enthält eine Aufgabe, einen Wissenscheck und eine Challenge, die dich beim Lernen von Themen wie den folgenden leitet:
Jede Lektion enthält eine Aufgabe, eine Wissensüberprüfung und eine Herausforderung, die dir beim Lernen von Themen wie:
- Prompting und Prompt-Engineering
- Text- und Bildanwendungs-Generierung
- Suchanwendungen
- Text- und Bild-App-Generierung
- Such-Apps helfen
Besuche [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), um loszulegen!
@ -93,125 +93,125 @@ Besuche [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), um los
## 🌱 Erste Schritte
> **Lehrkräfte**, wir haben [einige Vorschläge](for-teachers.md) aufgenommen, wie ihr diesen Lehrplan nutzen könnt. Wir freuen uns über euer Feedback [in unserem Diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Lehrer**, wir haben [einige Vorschläge](for-teachers.md) aufgenommen, wie dieser Lehrplan verwendet werden kann. Wir freuen uns auf dein Feedback [in unserem Diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Lernende](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, beginne jede Lektion mit einem Pre-Lecture-Quiz, lese dann das Vorlesungsmaterial, bearbeite die verschiedenen Aktivitäten und überprüfe dein Verständnis mit dem Post-Lecture-Quiz.
**[Lernende](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, beginne jede Lektion mit einem Pre-Lecture-Quiz, arbeite dich durch die Vorlesungsmaterialien, erledige die verschiedenen Aktivitäten und überprüfe dein Verständnis mit dem Post-Lecture-Quiz.
Um dein Lernen zu verbessern, vernetze dich mit deinen Mitlernenden, um gemeinsam an Projekten zu arbeiten! Diskussionen sind in unserem [Diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) erwünscht, wo unser Moderatorenteam deine Fragen beantwortet.
Um dein Lernerlebnis zu verbessern, verbinde dich mit deinen Mitlernenden, um gemeinsam an den Projekten zu arbeiten! Diskussionen sind in unserem [Diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) erwünscht, wo unser Moderatoren-Team deine Fragen beantwortet.
Für eine weiterführende Ausbildung empfehlen wir dringend, [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) für zusätzliche Lernmaterialien zu erkunden.
Zur Vertiefung empfehlen wir dir, [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) für zusätzliche Lernmaterialien zu erkunden.
### 📋 Einrichtung deiner Umgebung
### 📋 Einrichtung deiner Entwicklungsumgebung
Dieser Lehrplan verfügt über eine sofort einsatzbereite Entwicklungsumgebung! Du kannst zu Beginn wählen, ob du den Lehrplan in einem [Codespace](https://github.com/features/codespaces/) (_eine browserbasierte, installfreie Umgebung_) oder lokal auf deinem Computer mit einem Texteditor wie [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ausführen möchtest.
Dieser Lehrplan bietet eine sofort einsatzbereite Entwicklungsumgebung! Du kannst das Curriculum in einem [Codespace](https://github.com/features/codespaces/) (_einer browserbasierten, installationsfreien Umgebung_) oder lokal auf deinem Rechner mit einem Texteditor wie [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ausführen.
#### Erstelle dein eigenes Repository
Damit du deine Arbeit leicht speichern kannst, wird empfohlen, eine eigene Kopie dieses Repositorys zu erstellen. Dazu klicke auf den Button **Use this template** oben auf der Seite. Damit wird ein neues Repository in deinem GitHub-Konto mit einer Kopie des Lehrplans erstellt.
Damit du deine Arbeit einfach speichern kannst, wird empfohlen, eine eigene Kopie dieses Repositorys zu erstellen. Klicke dazu auf die Schaltfläche **Use this template** oben auf der Seite. Dadurch wird ein neues Repository in deinem GitHub-Konto mit einer Kopie des Lehrplans erstellt.
Folge diesen Schritten:
1. **Repository forken**: Klicke auf den „Fork“-Button rechts oben auf dieser Seite.
1. **Forke das Repository**: Klicke oben rechts auf dieser Seite auf die Schaltfläche „Fork“.
2. **Klone das Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Ausführen des Lehrplans in einem Codespace
In deiner eigenen Kopie dieses Repositorys, klicke auf den Button **Code** und wähle **Open with Codespaces**. Dies erstellt einen neuen Codespace, in dem du arbeiten kannst.
Klicke in deiner kopierten Version dieses Repositorys auf die Schaltfläche **Code** und wähle **Open with Codespaces**. Dadurch wird ein neuer Codespace für dich erstellt, in dem du arbeiten kannst.
#### Ausführen des Lehrplans lokal auf deinem Computer
#### Lokal auf deinem Computer ausführen
Um diesen Lehrplan lokal auf deinem Computer auszuführen, benötigst du einen Texteditor, einen Browser und ein Kommandozeilen-Tool. Unsere erste Lektion, [Einführung in Programmiersprachen und Werkzeuge](../../1-getting-started-lessons/1-intro-to-programming-languages), führt dich durch verschiedene Optionen für diese Werkzeuge, sodass du wählen kannst, was am besten zu dir passt.
Um diesen Lehrplan lokal auf deinem Computer auszuführen, benötigst du einen Texteditor, einen Browser und ein Kommandozeilentool. Unsere erste Lektion, [Einführung in Programmiersprachen und Tools](../../1-getting-started-lessons/1-intro-to-programming-languages), führt dich durch verschiedene Optionen für jedes dieser Werkzeuge, damit du das Beste für dich auswählen kannst.
Wir empfehlen die Nutzung von [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) als Editor, der auch ein integriertes [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) bietet. Visual Studio Code kannst du [hier herunterladen](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klone dein Repository auf deinen Computer. Du kannst dies tun, indem du auf die **Code**-Schaltfläche klickst und die URL kopierst:
Wir empfehlen die Verwendung von [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) als Editor, das auch ein integriertes [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) bietet. Du kannst Visual Studio Code [hier herunterladen](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klonen Sie Ihr Repository auf Ihren Computer. Sie können dies tun, indem Sie auf die Schaltfläche **Code** klicken und die URL kopieren:
[CodeSpace](./images/createcodespace.png)
Öffne dann [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) innerhalb von [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) und führe den folgenden Befehl aus, wobei du `<your-repository-url>` durch die gerade kopierte URL ersetzt:
Öffnen Sie dann das [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) innerhalb von [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) und führen Sie den folgenden Befehl aus, wobei Sie `<your-repository-url>` durch die gerade kopierte URL ersetzen:
```bash
git clone <your-repository-url>
```
2. Öffne den Ordner in Visual Studio Code. Du kannst dies tun, indem du auf **Datei** > **Ordner öffnen** klickst und den gerade geklonten Ordner auswählst.
2. Öffnen Sie den Ordner in Visual Studio Code. Sie können dies tun, indem Sie **Datei** > **Ordner öffnen** klicken und den gerade geklonten Ordner auswählen.
> Empfohlene Visual Studio Code-Erweiterungen:
> Empfohlene Erweiterungen für Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - um HTML-Seiten direkt in Visual Studio Code vorzuschauen
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - um dir beim schnelleren Schreiben von Code zu helfen
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - zum Vorschau von HTML-Seiten innerhalb von Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - um Ihnen zu helfen, Code schneller zu schreiben
## 📂 Jede Lektion beinhaltet:
- optionales Sketchnote
- optionale Sketchnote
- optionales ergänzendes Video
- Aufwärmquiz vor der Lektion
- schriftliche Lektion
- für projektbasierte Lektionen Schritt-für-Schritt-Anleitungen zum Erstellen des Projekts
- Wissensüberprüfungen
- Wissenschecks
- eine Herausforderung
- ergänzende Lektüre
- Aufgabe
- [Quiz nach der Lektion](https://ff-quizzes.netlify.app/web/)
> **Ein Hinweis zu den Quizzen**: Alle Quizze sind im Ordner Quiz-app enthalten, insgesamt 48 Quizze mit jeweils drei Fragen. Sie sind [hier](https://ff-quizzes.netlify.app/web/) verfügbar. Die Quiz-App kann lokal ausgeführt oder auf Azure bereitgestellt werden; folge den Anweisungen im Ordner `quiz-app`.
> **Ein Hinweis zu den Quizzen**: Alle Quizze befinden sich im Ordner Quiz-app, insgesamt 48 Quizze mit jeweils drei Fragen. Sie sind [hier](https://ff-quizzes.netlify.app/web/) verfügbar, die Quiz-App kann lokal ausgeführt oder auf Azure bereitgestellt werden; folgen Sie den Anweisungen im Ordner `quiz-app`.
| 01 | Erste Schritte | Einführung in Programmierung und Werkzeuge | Erlerne die grundlegenden Konzepte der meisten Programmiersprachen und Software, die professionelle Entwickler verwenden | [Einführung in Programmiersprachen und Werkzeuge](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Erste Schritte | Grundlagen von GitHub, inklusive Teamarbeit | Wie man GitHub im Projekt nutzt und mit anderen an einer Codebasis zusammenarbeitet | [Einführung in GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Erste Schritte | Barrierefreiheit | Erlerne die Grundlagen der Web-Barrierefreiheit | [Grundlagen der Barrierefreiheit](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS-Grundlagen | JavaScript-Datentypen | Die Grundlagen der JavaScript-Datentypen | [Datentypen](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS-Grundlagen | Funktionen und Methoden | Lerne Funktionen und Methoden kennen, um den Ablauf einer Anwendung zu steuern | [Funktionen und Methoden](./2-js-basics/2-functions-methods/README.md) | Jasmine und Christopher |
| 06 | JS-Grundlagen | Entscheidungen in JS treffen | Lerne, wie man Bedingungen im Code mit Entscheidungsstrukturen erstellt | [Entscheidungen treffen](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS-Grundlagen | Arrays und Schleifen | Arbeite mit Daten in JavaScript mithilfe von Arrays und Schleifen | [Arrays und Schleifen](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in der Praxis | Erstelle das HTML, um ein Online-Terrarium zu bauen, mit Schwerpunkt auf Layout | [Einführung in HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in der Praxis | Erstelle das CSS, um das Online-Terrarium zu stylen, mit Fokus auf CSS-Grundlagen und responsives Design | [Einführung in CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-Manipulation | Erstelle das JavaScript, damit das Terrarium als Drag/Drop-Oberfläche funktioniert, Fokus auf Closures und DOM-Manipulation | [JavaScript Closures, DOM-Manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Tipp-Spiel](./4-typing-game/solution/README.md) | Ein Tipp-Spiel bauen | Lerne, wie Tastaturereignisse zur Steuerung der Logik deiner JavaScript-App verwendet werden | [Ereignisgesteuerte Programmierung](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Grüne Browsererweiterung](./5-browser-extension/solution/README.md) | Arbeiten mit Browsern | Lerne, wie Browser funktionieren, ihre Geschichte und wie man erste Elemente einer Browsererweiterung erstellt | [Über Browser](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Grüne Browsererweiterung](./5-browser-extension/solution/README.md) | Formular erstellen, API aufrufen und Variablen im lokalen Speicher ablegen | Erstelle JavaScript-Elemente deiner Browsererweiterung, um eine API unter Verwendung lokal gespeicherter Variablen zu nutzen | [APIs, Formulare und lokaler Speicher](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Grüne Browsererweiterung](./5-browser-extension/solution/README.md) | Hintergrundprozesse im Browser, Web-Performance | Nutze die Hintergrundprozesse des Browsers, um das Symbol der Erweiterung zu verwalten; lerne über Web-Performance und Optimierungen | [Hintergrundaufgaben und Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Weltraum-Spiel](./6-space-game/solution/README.md) | Fortgeschrittene Spieleentwicklung mit JavaScript | Lerne Vererbung mittels Klassen und Komposition sowie das Pub/Sub-Muster, als Vorbereitung für den Bau eines Spiels | [Einführung in die fortgeschrittene Spieleentwicklung](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Weltraum-Spiel](./6-space-game/solution/README.md) | Zeichnen auf Canvas | Lerne die Canvas-API kennen, um Elemente auf einem Bildschirm zu zeichnen | [Zeichnen auf Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Weltraum-Spiel](./6-space-game/solution/README.md) | Elemente auf dem Bildschirm bewegen | Entdecke, wie Elemente Bewegung mit kartesischen Koordinaten und der Canvas-API erhalten | [Elemente bewegen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Weltraum-Spiel](./6-space-game/solution/README.md) | Kollisions-Erkennung | Lasse Elemente kollidieren und aufeinander reagieren, nutze Tastendrucke und implementiere eine Abklingfunktion zur Leistungssteigerung | [Kollisions-Erkennung](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Weltraum-Spiel](./6-space-game/solution/README.md) | Punkte zählen | Führe mathematische Berechnungen basierend auf Spielstatus und Leistung durch | [Punkte zählen](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Weltraum-Spiel](./6-space-game/solution/README.md) | Spiel beenden und neu starten | Lerne, wie man das Spiel beendet und neu startet, inklusive Bereinigung von Ressourcen und Zurücksetzen von Variablen | [Die Endbedingung](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankanwendung](./7-bank-project/solution/README.md) | HTML-Templates und Routen in einer Web-App | Lerne, wie man das Gerüst einer mehrseitigen Webseite mithilfe von Routing und HTML-Templates erstellt | [HTML-Templates und Routen](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bankanwendung](./7-bank-project/solution/README.md) | Login- und Registrierungsformular erstellen | Lerne, wie man Formulare baut und Validierungsroutinen behandelt | [Formulare](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankanwendung](./7-bank-project/solution/README.md) | Methoden zum Abrufen und Nutzen von Daten | Wie Daten in die App gelangen und wieder herausfließen, wie man sie abruft, speichert und entfernt | [Daten](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankanwendung](./7-bank-project/solution/README.md) | Konzepte des State-Managements | Lerne, wie deine App Zustände behält und wie man diese programmatisch verwaltet | [State-Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Arbeiten mit VScode | Lerne, wie du einen Code-Editor benutzt | [Visual Studio Code Editor verwenden](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [KI-Assistenten](./9-chat-project/README.md) | Arbeiten mit KI | Lerne, wie du deinen eigenen KI-Assistenten baust | [KI-Assistenten-Projekt](./9-chat-project/README.md) | Chris |
| 01 | Einstieg | Einführung in Programmierung und Werkzeuge der Branche | Lernen Sie die Grundlagen der meisten Programmiersprachen und Software kennen, die professionelle Entwickler bei ihrer Arbeit unterstützt | [Einführung in Programmiersprachen und Werkzeuge der Branche](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Einstieg | Grundlagen von GitHub, inklusive Teamarbeit | Wie man GitHub im eigenen Projekt verwendet, wie man mit anderen an einer Codebasis zusammenarbeitet | [Einführung in GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Einstieg | Zugänglichkeit | Lernen Sie die Grundlagen der Barrierefreiheit im Web | [Grundlagen der Zugänglichkeit](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Grundlagen | JavaScript-Datentypen | Die Grundlagen von JavaScript-Datentypen | [Datentypen](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Grundlagen | Funktionen und Methoden | Lernen Sie Funktionen und Methoden kennen, um den Anwendungslogikfluss zu steuern | [Funktionen und Methoden](./2-js-basics/2-functions-methods/README.md) | Jasmine und Christopher |
| 06 | JS Grundlagen | Entscheidungen treffen mit JS | Lernen Sie, wie Sie Bedingungen in Ihrem Code mit Entscheidungsstrukturen erstellen | [Entscheidungen treffen](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Grundlagen | Arrays und Schleifen | Arbeiten Sie mit Daten unter Verwendung von Arrays und Schleifen in JavaScript | [Arrays und Schleifen](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in der Praxis | Erstellen Sie das HTML, um ein Online-Terrarium zu bauen, mit Fokus auf das Layout | [Einführung in HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in der Praxis | Erstellen Sie das CSS, um das Online-Terrarium zu stylen, mit Fokus auf grundlegendes CSS einschließlich responsivem Design | [Einführung in CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-Manipulation | Erstellen Sie das JavaScript, um das Terrarium als Drag & Drop-Schnittstelle funktionsfähig zu machen, mit Fokus auf Closures und DOM-Manipulation | [JavaScript Closures, DOM-Manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Tipp-Spiel](./4-typing-game/solution/README.md) | Erstellen eines Tipp-Spiels | Lernen Sie, wie Sie Tastaturereignisse verwenden, um die Logik Ihrer JavaScript-App zu steuern | [Ereignisgesteuerte Programmierung](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Grünes Browser-Addon](./5-browser-extension/solution/README.md) | Arbeiten mit Browsern | Lernen Sie, wie Browser funktionieren, deren Geschichte und wie Sie die ersten Elemente eines Browser-Addons vorbereiten | [Über Browser](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Grünes Browser-Addon](./5-browser-extension/solution/README.md) | Formularerstellung, API-Aufrufe und lokale Speicherung von Variablen | Erstellen Sie die JavaScript-Elemente Ihres Browser-Addons, um eine API über in localStorage gespeicherte Variablen aufzurufen | [APIs, Formulare und lokale Speicherung](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Grünes Browser-Addon](./5-browser-extension/solution/README.md) | Hintergrundprozesse im Browser, Web-Performance | Verwenden Sie die Hintergrundprozesse des Browsers zur Verwaltung des Erweiterungssymbols; lernen Sie Web-Performance und Optimierungen kennen | [Hintergrundaufgaben und Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Weltraumspiel](./6-space-game/solution/README.md) | Fortgeschrittene Spieleentwicklung mit JavaScript | Lernen Sie Vererbung anhand von Klassen und Komposition sowie das Pub/Sub-Muster kennen, als Vorbereitung auf die Spieleentwicklung | [Einführung in die fortgeschrittene Spieleentwicklung](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Weltraumspiel](./6-space-game/solution/README.md) | Zeichnen auf der Leinwand | Lernen Sie die Canvas-API kennen, die zum Zeichnen von Elementen auf einem Bildschirm verwendet wird | [Zeichnen auf der Leinwand](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Weltraumspiel](./6-space-game/solution/README.md) | Bewegungen von Elementen auf dem Bildschirm | Entdecken Sie, wie Elemente durch kartesische Koordinaten und die Canvas-API Bewegung erhalten | [Bewegung von Elementen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Weltraumspiel](./6-space-game/solution/README.md) | Kollisions-Erkennung | Lassen Sie Elemente kollidieren und aufeinander reagieren, verwenden Sie Tastendrücke und eine Cooldown-Funktion, um die Performance des Spiels sicherzustellen | [Kollisionserkennung](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Weltraumspiel](./6-space-game/solution/README.md) | Punktestand führen | Führen Sie mathematische Berechnungen basierend auf dem Spielstatus und der Performance durch | [Punktestand führen](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Weltraumspiel](./6-space-game/solution/README.md) | Spiel beenden und neu starten | Lernen Sie, wie man ein Spiel beendet und neu startet, einschließlich Aufräumen von Assets und Zurücksetzen von Variablen | [Die Endbedingung](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-Vorlagen und Routen in einer Web-App | Lernen Sie, wie das Grundgerüst einer mehrseitigen Website mit Routing und HTML-Vorlagen erstellt wird | [HTML-Vorlagen und Routing](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Login- und Registrierungsformular erstellen | Lernen Sie, wie man Formulare erstellt und Validierungsroutinen handhabt | [Formulare](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Methoden zum Abrufen und Verwenden von Daten | Wie Daten in die App hinein- und herausfließen, wie sie abgerufen, gespeichert und entsorgt werden | [Daten](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Konzepte des Zustandsmanagements | Lernen Sie, wie Ihre App den Zustand beibehält und diesen programmatisch verwaltet | [Zustandsmanagement](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Arbeiten mit VScode | Lernen Sie, wie man einen Code-Editor benutzt | [VScode Code Editor verwenden](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [KI-Assistenten](./9-chat-project/README.md) | Arbeiten mit KI | Lernen Sie, wie Sie Ihren eigenen KI-Assistenten bauen | [KI-Assistenten-Projekt](./9-chat-project/README.md) | Chris |
## 🏫 Pädagogik
Unser Curriculum basiert auf zwei zentralen pädagogischen Prinzipien:
Unser Lehrplan basiert auf zwei wichtigen pädagogischen Prinzipien:
* projektbasiertes Lernen
* häufige Quizze
Das Programm vermittelt die Grundlagen von JavaScript, HTML und CSS sowie die neuesten Werkzeuge und Techniken, die heutige Webentwickler nutzen. Die Studierenden haben die Gelegenheit, praktische Erfahrungen zu sammeln, indem sie ein Tipp-Spiel, ein virtuelles Terrarium, eine umweltfreundliche Browser-Erweiterung, ein Weltraum-Invader-artiges Spiel und eine Bankanwendung für Unternehmen bauen. Am Ende der Reihe verfügen die Studierenden über ein solides Verständnis der Webentwicklung.
Das Programm vermittelt die Grundlagen von JavaScript, HTML und CSS sowie die neuesten Werkzeuge und Techniken, die heutige Webentwickler verwenden. Die Lernenden haben die Möglichkeit, praktische Erfahrungen zu sammeln, indem sie ein Tipp-Spiel, ein virtuelles Terrarium, eine umweltfreundliche Browsererweiterung, ein Weltraum-Invasoren-Spiel und eine Banking-App für Unternehmen erstellen. Am Ende der Reihe verfügen die Lernenden über ein solides Verständnis der Webentwicklung.
> 🎓 Die ersten Lektionen dieses Curriculums kannst du auch als [Learning Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) auf Microsoft Learn absolvieren!
> 🎓 Sie können die ersten Lektionen dieses Lehrplans als [Lernpfad](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) bei Microsoft Learn absolvieren!
Indem sichergestellt wird, dass die Inhalte auf Projekte abgestimmt sind, wird der Prozess für die Lernenden spannender und die Behaltensrate der Konzepte verbessert. Wir haben auch mehrere Einstiegskapitel zu den Grundlagen von JavaScript geschrieben und mit Videos aus der Tutorial-Reihe "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" kombiniert – einige der Autoren haben zu diesem Curriculum beigetragen.
Durch die Ausrichtung der Inhalte an Projekten wird der Prozess für die Lernenden ansprechender gestaltet und das Behalten der Konzepte verbessert. Wir haben auch mehrere Einstiegslektionen zu den Grundlagen von JavaScript geschrieben, um Konzepte vorzustellen, begleitet von einem Video aus der "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" Video-Tutorial-Sammlung, zu dessen Autoren einige zum Lehrplan beigetragen haben.
Darüber hinaus setzt ein niedrigschwelliges Quiz vor der Lektion die Lernabsicht der Studierenden, während ein weiteres Quiz danach die Behaltensrate sicherstellt. Das Curriculum wurde so konzipiert, dass es flexibel und unterhaltsam ist und sowohl vollständig als auch teilweise absolviert werden kann. Die Projekte starten klein und werden im Verlauf des 12-Wochen-Zyklus zunehmend komplexer.
Zudem setzt ein niedrigschwelliges Quiz vor der Lektion die Lernabsicht der Teilnehmer und ein zweites Quiz nach der Lektion sorgt für vertiefte Behaltensleistung. Dieser Lehrplan wurde so gestaltet, dass er flexibel und unterhaltsam ist und ganz oder teilweise absolviert werden kann. Die Projekte beginnen klein und werden bis zum Ende des 12-Wochen-Zyklus zunehmend komplexer.
Während wir bewusst darauf verzichtet haben, JavaScript-Frameworks einzuführen, um uns auf die grundlegenden Fähigkeiten eines Webentwicklers vor der Anwendung eines Frameworks zu konzentrieren, wäre ein guter nächster Schritt nach Abschluss dieses Curriculums das Erlernen von Node.js anhand einer weiteren Videoserie: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Während wir bewusst darauf verzichtet haben, JavaScript-Frameworks einzuführen, um die grundlegenden Fähigkeiten als Webentwickler vor der Einführung eines Frameworks zu vermitteln, wäre ein guter nächster Schritt nach Abschluss dieses Lehrplans das Lernen über Node.js mittels einer weiteren Videosammlung: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Besuche unsere [Verhaltensregeln](CODE_OF_CONDUCT.md) und [Beitragsrichtlinien](CONTRIBUTING.md). Wir freuen uns über dein konstruktives Feedback!
> Besuchen Sie unsere [Verhaltensrichtlinien](CODE_OF_CONDUCT.md) und [Beitragsrichtlinien](CONTRIBUTING.md). Wir freuen uns über Ihr konstruktives Feedback!
## 🧭 Offline-Zugriff
Du kannst diese Dokumentation offline mit [Docsify](https://docsify.js.org/#/) verwenden. Forke dieses Repo, [installiere Docsify](https://docsify.js.org/#/quickstart) auf deinem lokalen Rechner und gib dann im Stammordner dieses Repos `docsify serve` ein. Die Website wird auf Port 3000 auf deinem localhost ausgeführt: `localhost:3000`.
Sie können diese Dokumentation offline mit [Docsify](https://docsify.js.org/#/) ausführen. Forken Sie dieses Repository, [installieren Sie Docsify](https://docsify.js.org/#/quickstart) auf Ihrem lokalen Rechner und geben Sie dann im Stammverzeichnis dieses Repos `docsify serve` ein. Die Website wird lokal auf Port 3000 bereitgestellt: `localhost:3000`.
## 📘 PDF
Eine PDF mit allen Lektionen ist [hier](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) zu finden.
Ein PDF aller Lektionen kann [hier](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) gefunden werden.
## 🎒 Andere Kurse
@ -220,61 +220,61 @@ Unser Team produziert weitere Kurse! Schau dir an:
<!-- 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)
[](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 / Agenten
[](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)
---
### Generative KI-Serie
[](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)
### Generative AI Serie
[](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)
---
### Kernlernen
[](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-Serie
[](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)
Wenn du festhängst oder Fragen zum Erstellen von KI-Anwendungen hast: Trete anderen Lernenden und erfahrenen Entwicklern in den Diskussionen über MCP bei. Es ist eine unterstützende Community, in der Fragen willkommen sind und Wissen frei geteilt wird.
Wenn du feststeckst oder Fragen zum Erstellen von KI-Apps hast. Tritt mit anderen Lernenden und erfahrenen Entwicklern in Diskussionen über MCP ein. Es ist eine unterstützende Gemeinschaft, in der Fragen willkommen sind und Wissen frei geteilt wird.
Dieses Repository ist unter der MIT-Lizenz lizenziert. Siehe die [LICENSE](../../LICENSE)Datei für weitere Informationen.
Dieses Repository ist unter der MIT-Lizenz lizenziert. Siehe die [LICENSE](../../LICENSE)-Datei für weitere Informationen.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Haftungsausschluss**:
Dieses Dokument wurde mithilfe des KI-Übersetzungsdienstes [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir um Genauigkeit bemüht sind, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner Ursprungssprache gilt als maßgebliche Quelle. Für wichtige Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.
Dieses Dokument wurde mithilfe des KI-Übersetzungsdienstes [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir auf Genauigkeit achten, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner Ursprungssprache ist als maßgebliche Quelle zu betrachten. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Verwendung dieser Übersetzung entstehen.
Это образовательный репозиторий с учебной программой для обучения основам веб-разработки для начинающих. Учебная программа представляет собой комплексный 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
- **Технологии**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (для AI проектов)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) рекомендуется для учащихся
- Дополнительные курсы: генеративный AI, Data Science, ML, IoT
### Работа с конкретными проектами
Для подробных инструкций по отдельным проектам смотрите README файлы:
- `quiz-app/README.md` - приложение викторины на Vue 3
Подробные инструкции по отдельным проектам смотрите в README:
- `quiz-app/README.md` - quiz-приложение на Vue 3
- `7-bank-project/README.md` - банковское приложение с аутентификацией
- `5-browser-extension/README.md` - разработка расширения браузера
- `6-space-game/README.md` - разработка игры на Canvas
- `9-chat-project/README.md` - проект AI чат-ассистента
- `6-space-game/README.md` - игра на canvas
- `9-chat-project/README.md` - проект AI чат помощника
### Структура монорепозитория
Хотя это не традиционный монорепозиторий, данный репозиторий содержит несколько независимых проектов:
Хотя это не традиционный монорепозиторий, здесь содержится несколько независимых проектов:
- Каждый урок автономен
- Проекты не имеют общих зависимостей
- Работас отдельными проектами не влияет на другие
- Клонируйте весь репозиторий для полного опыта курса
- Проекты не разделяют зависимости
- Работайте с отдельными проектами, не затрагивая остальные
- Клонируйте весь репозиторий для полного курса
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Отказ от ответственности**:
Этот документ был переведен с помощью сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Несмотря на наши усилия по обеспечению точности, пожалуйста, имейте в виду, что автоматический перевод может содержать ошибки или неточности. Оригинальный документ на его исходном языке следует считать авторитетным источником. Для критически важной информации рекомендуется использовать профессиональный перевод, выполненный человеком. Мы не несем ответственности за любые недоразумения или искажения, возникшие в результате использования данного перевода.
Этот документ был переведен с помощью сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Несмотря на наши усилия по обеспечению точности, имейте в виду, что автоматические переводы могут содержать ошибки или неточности. Исходный документ на его оригинальном языке следует считать авторитетным источником. Для критически важной информации рекомендуется использовать профессиональный перевод, выполненный человеком. Мы не несем ответственности за любые недоразумения или неправильные толкования, возникающие в результате использования данного перевода.
# Веб-разработка для начинающих - учебная программа
# Веб-разработка для начинающих - Учебная программа
Изучите основы веб-разработки с нашим 12-недельным комплексным курсом от Microsoft Cloud Advocates. Каждое из 24 занятий посвящено JavaScript, CSS и HTML через практические проекты, такие как террариумы, расширения для браузера и космические игры. Участвуйте в викторинах, обсуждениях и практических заданиях. Повышайте свои навыки и оптимизируйте усвоение знаний с помощью нашей эффективной проектной педагогики. Начните свой путь в программировании уже сегодня!
Изучите основы веб-разработки с нашим 12-недельным комплексным курсом от Microsoft Cloud Advocates. Каждое из 24 занятий погружает в JavaScript, CSS и HTML через практические проекты, такие как террариумы, расширения для браузера и космические игры. Участвуйте в викторинах, обсуждениях и практических заданиях. Повышайте свои навыки и оптимизируйте усвоение знаний с помощью нашей эффективной проектной педагогики. Начните свое путешествие в программирование уже сегодня!
Присоединяйтесь к сообществу Azure AI Foundry Discord
> Этот репозиторий содержит более 50 переводов на разные языки, что значительно увеличивает размер скачиваемого файла. Чтобы склонировать без переводов, используйте sparse checkout:
> Этот репозиторий включает более 50 переводов на разные языки, что значительно увеличивает размер загрузки. Чтобы клонировать без переводов, используйте sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,43 +48,43 @@
> 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://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 mode!
### 📣 Анонс – Новые задачи режима GitHub Copilot Agent для выполнения!
Добавлено новое задание, ищите "GitHub Copilot Agent Challenge 🚀" в большинстве глав. Это новая задача для вас с использованием GitHub Copilot и режима агента. Если вы ранее не использовали режим агента, он способен не только генерировать текст, но и создавать и редактировать файлы, запускать команды и многое другое.
Добавлена новая задача, ищите "GitHub Copilot Agent Challenge 🚀" во многих главах. Это новая задача для вас, которую нужно выполнить с помощью GitHub Copilot и режима Agent. Если вы раньше не использовали режим Agent, он способен не только генерировать текст, но и создавать и редактировать файлы, запускать команды и многое другое.
### 📣 Объявление - _Новый проект с использованием Generative AI_
### 📣 Анонс – _Новый проект с использованием генеративного ИИ_
Новый проект AI Assistant только что добавлен, ознакомьтесь с [проектом](./9-chat-project/README.md)
Добавлен новый проект AI Assistant, посмотрите [проект](./9-chat-project/README.md)
### 📣 Объявление - _Новая учебная программа_ по Generative AI для JavaScript уже выпущена
### 📣 Анонс –_Новая учебная программа_ по генеративному ИИ для JavaScript только что выпущена
Не пропустите нашу новую учебную программу по Generative AI!
Не пропустите нашу новую учебную программу по генеративному ИИ!
Посетите [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), чтобы начать!
Каждый урок включает задание для выполнения, проверку знаний и вызов для самостоятельного изучения таких тем, как:
- Подсказки и их разработка
- Генерация приложений для текста и изображений
Каждый урок включает задание, проверку знаний и вызов, которые помогут вам освоить такие темы, как:
- Промптинги и создание промптов
- Генерация приложений с текстом и изображениями
- Поисковые приложения
Посетите [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), чтобы начать!
@ -93,37 +93,37 @@
## 🌱 Начало работы
> **Преподаватели**, мы включили [некоторые рекомендации](for-teachers.md) по использованию этой учебной программы. Мы будем рады вашим отзывам [в нашем форуме обсуждений](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Учителя**, мы включили [некоторые рекомендации](for-teachers.md) по использованию этой учебной программы. Мы будем рады вашему отзыву [в нашем форуме обсуждений](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Учащиеся](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, для каждого урока начните свикторины перед лекцией, затем прочитайте учебный материал, выполните различные задания и проверьте свои знания с помощью викторины после лекции.
**[Ученики](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, для каждого урока начните спредварительной викторины, затем изучите лекционный материал, выполните различные задания и проверьте понимание с помощью пост-лекторной викторины.
Для улучшения вашего опыта обучения связывайтесь с коллегами для совместной работы над проектами! Обсуждения приветствуются в нашем [форуме обсуждений](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), где команда модераторов готова отвечать на ваши вопросы.
Чтобы улучшить опыт обучения, объединяйтесь с вашими сверстниками для совместной работы над проектами! Обсуждения приветствуются в нашем [форуме обсуждений](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), где наша команда модераторов ответит на ваши вопросы.
Для дальнейшего обучения настоятельно рекомендуем изучать материалы на [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon).
Для дальнейшего образования мы настоятельно рекомендуем изучать материалы на [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon).
### 📋 Настройка вашей среды
### 📋 Настройка среды
Эта учебная программа уже имеет готовую среду для разработки! При старте вы можете выбрать запуск программы в [Codespace](https://github.com/features/codespaces/) (_среда в браузере, без необходимости установки_), либо локально на своем компьютере с использованием текстового редактора, например [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Эта учебная программа уже готова к работе в среде разработки! В начале вы можете выбрать запуск программы в [Codespace](https://github.com/features/codespaces/) (_окружение в браузере без необходимости установки_), или локально на вашем компьютере с помощью текстового редактора, такого как [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Создайте ваш репозиторий
Чтобы легко сохранять свою работу, рекомендуется создать собственную копию этого репозитория. Вы можете сделать это, нажав кнопку **Use this template** в верхней части страницы. Это создаст новый репозиторий в вашем аккаунте GitHub с копией учебной программы.
#### Создайте свой репозиторий
Для удобного сохранения своей работы рекомендуется создать вашу собственную копию этого репозитория. Вы можете сделать это, нажав кнопку **Use this template** в верхней части страницы. Это создаст новый репозиторий в вашем аккаунте GitHub с копией учебной программы.
Выполните следующие шаги:
1. **Форкните репозиторий**: Нажмите кнопку «Fork» в правом верхнем углу этой страницы.
#### Запуск учебной программы локально на вашем компьютере
Для запуска этой учебной программы локально вам понадобится текстовый редактор, браузер и инструмент командной строки. Наш первый урок, [Введение в языки программирования и инструменты](../../1-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).
1. Клонируйте свой репозиторий на компьютер. Для этого нажмите кнопку **Code** и скопируйте URL:
Мы рекомендуем использовать [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) в качестве редактора, он также имеет встроенный [Терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Скачать Visual Studio Code можно [здесь](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Клонируйте ваш репозиторий на компьютер. Вы можете сделать это, нажав кнопку **Code** и скопировав URL:
[CodeSpace](./images/createcodespace.png)
@ -133,90 +133,90 @@
git clone <your-repository-url>
```
2. Откройте папку в Visual Studio Code. Для этого нажмите **File** > **Open Folder** и выберите только что клонированную папку.
2. Откройте папку в Visual Studio Code. Вы можете сделать это, нажав **File** > **Open Folder** и выбрав только что склонированную папку.
> Рекомендуемые расширения Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) — для предпросмотра HTML-страниц прямо в Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) — для помощи в более быстром написании кода
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - для предварительного просмотра HTML-страниц внутри Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - помогает писать код быстрее
## 📂 Каждый урок включает:
- необязательные скетчноуты
- необязательное дополнительное видео
- разминка-квиз перед уроком
- необязательные зарисовки (sketchnote)
- необязательное сопутствующее видео
- разминку перед уроком в виде викторины
- письменный урок
- для проектных уроков — пошаговые руководства по созданию проекта
- для проектных уроков — пошаговые инструкции по созданию проекта
- проверки знаний
- вызов/челлендж
- дополнительные материалы для чтения
- вызов (челлендж)
- дополнительное чтение
- задание
- [квиз после урока](https://ff-quizzes.netlify.app/web/)
- [викторину после урока](https://ff-quizzes.netlify.app/web/)
> **Примечание оквизах**: Все квизы находятся в папке Quiz-app, всего 48 квизов по три вопроса. Они доступны [здесь](https://ff-quizzes.netlify.app/web/), приложение для квизов можно запустить локально или развернуть в Azure; следуйте инструкциям в папке `quiz-app`.
> **Примечание овикторинах**: Все викторины находятся в папке Quiz-app, всего 48 викторин по три вопроса каждая. Они доступны [здесь](https://ff-quizzes.netlify.app/web/). Приложение для викторин можно запускать локально или развертывать в Azure; следуйте инструкциям в папке `quiz-app`.
## 🗃️ Уроки
| | Название проекта | Изучаемые концепции | Цели обучения | Связанный урок | Автор |
| 01 | Начало работы | Введение в программирование и инструменты профессии | Изучить базовые основы большинства языков программирования и программы, которые помогают профессиональным разработчикам | [Введение в языки программирования и инструменты](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Начало работы | Основы GitHub, работа с командой | Как использовать GitHub в проекте, как сотрудничать с другими над кодом | [Введение в GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Начало работы | Доступность | Основы веб-доступности | [Основы доступности](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Основы JS | Типы данных JavaScript | Основы типов данных в JavaScript | [Типы данных](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Основы JS | Функции и методы | Узнатьо функциях и методах для управления логикой приложения | [Функции и методы](./2-js-basics/2-functions-methods/README.md) | Jasmine и Christopher |
| 06 | Основы JS | Принятие решений в JS | Научиться создавать условия в коде с помощью методов принятия решений | [Принятие решений](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Основы JS | Массивы и циклы | Работа с данными с помощью массивов и циклов в JavaScript | [Массивы и циклы](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Террариум](./3-terrarium/solution/README.md) | Практика HTML | Создать HTML для онлайн-террариума, с акцентом на построение разметки | [Введение в HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Террариум](./3-terrarium/solution/README.md) | Практика CSS | Создать CSS для стилизации онлайн-террариума, включая основы CSS и адаптивную верстку | [Введение в CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Террариум](./3-terrarium/solution/README.md) | Замыкания JavaScript, работа с DOM | Написать JavaScript, чтобы сделать террариум интерфейсом drag/drop, с фокусом на замыкания и манипуляции DOM | [Замыкания и 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 и сохранение данных в локальном хранилище | Создать JavaScript компоненты расширения для вызова API с использованием переменных в локальном хранилище | [API, формы и локальное хранилище](./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 and Christopher |
| 06 | Основы JS | Создание условий в JS | Узнайте, как создавать условия в коде с помощью конструкций для принятия решений | [Создание условий](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Основы JS | Массивы и циклы | Работа с данными сиспользованием массивов и циклов в JavaScript | [Массивы и циклы](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Террариум](./3-terrarium/solution/README.md) | Практика HTML | Создание HTML для онлайн-террариума с акцентом на построение макета | [Введение в HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Террариум](./3-terrarium/solution/README.md) | Практика CSS | Создание CSS для стилизации онлайн-террариума, включая основы CSS и адаптивность страницы | [Введение в CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Террариум](./3-terrarium/solution/README.md) | Замыкания в JavaScript, работа с DOM | Написание JavaScript для создания интерфейса перетаскивания в террариуме; изучение замыканий и манипуляций с DOM | [Замыкания в JavaScript, работа с DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Игра на набор текста](./4-typing-game/solution/README.md) | Создание игры на набор текста | Узнайте, как использовать события клавиатуры для управления логикой вашего JavaScript-приложения | [Событийно-ориентированное программирование](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Расширение браузера Green](./5-browser-extension/solution/README.md) | Работа с браузерами | Узнайте, как работают браузеры, их история и как создать первые элементы расширения | [О браузерах](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Расширение браузера Green](./5-browser-extension/solution/README.md) | Создание формы, вызов API и хранение данных в локальном хранилище | Создайте JavaScript-компоненты расширения браузера для вызова API с использованием данных из локального хранилища | [API, формы и локальное хранилище](./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) | Рисование на холсте | Узнайте об API Canvas для рисования элементов на экране | [Рисование на Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Игра в космосе](./6-space-game/solution/README.md) | Перемещение элементов по экрану | Узнайте, как элементы могут двигаться с использованием декартовых координат и API 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 | [AI Ассистенты](./9-chat-project/README.md) | Работа с ИИ | Узнайте, как создать собственного AI-ассистента | [Проект AI ассистента](./9-chat-project/README.md) | Chris |
## 🏫 Педагогика
Наша учебная программа разработана с учётом двух ключевых педагогических принципов:
Наша программа разработана с учётом двух ключевых педагогических принципов:
* обучение на основе проектов
* частые квизы
* частые викторины
Программа обучает основам JavaScript, HTML и CSS, а также последним инструментам и методикам, используемым современными веб-разработчиками. Студенты получат возможность получить практический опыт, создавая игру на набор текста, виртуальный террариум, экологичное расширение для браузера, игру в стиле space-invader и банковское приложение для бизнеса. К концу курса студенты будут уверенно владеть основами веб-разработки.
Программа обучает основам JavaScript, HTML и CSS, а также последним инструментам и техникам, используемым современными веб-разработчиками. Студенты получат практический опыт, создавая игру на набор текста, виртуальный террариум, экологичное расширение для браузера, игру в стиле «космический захватчик» и банковское приложение для бизнеса. К концу курса студенты приобретут прочное понимание веб-разработки.
> 🎓 Вы можете пройти первые несколько уроков этой программы как [Учебный путь](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn!
> 🎓 Вы можете пройти первые несколько уроков этого курса как [Учебный путь](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn!
Обеспечивая соответствие содержимого проектам, процесс становится более увлекательным для студентов, а усвоение концепций усиливается. Мы также подготовили несколько вводных уроков по основам JavaScript, сопровождаемых видео из серии "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", авторы которых частично участвовали в создании этой программы.
Обеспечение соответствия контента проектам делает процесс более увлекательным для студентов и улучшает усвоение концепций. Мы также написали несколько вводных уроков по основам JavaScript, сопровождаемых видео из серии "[Серия для начинающих: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", авторы которых внесли вклад в этот курс.
Кроме того, низкоценностный квиз перед занятием задаёт студенту намерение изучать тему, а второй квиз после занятия способствует дальнейшему запоминанию. Эта программа была разработана, чтобы быть гибкой и увлекательной и может проходиться целиком или частично. Проекты начинаются с малого и становятся всё более сложными к концу 12-недельного цикла.
Кроме того, викторина с низкой сложностью перед уроком настраивает студента на изучение темы, а вторая викторина после урока обеспечивает лучшее закрепление материала. Эта программа создана быть гибкой и интересной, её можно проходить полностью или частично. Проекты начинаются с простых и становятся все сложнее к концу 12-недельного цикла.
Хотя мы сознательно избегали введения JavaScript-фреймворков, чтобы сосредоточиться на базовых навыках веб-разработчика перед освоением фреймворка, следующим хорошим шагом после этой программы будет изучение Node.js через другую подборку видео: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Хотя мы сознательно избегали введения JavaScript-фреймворков, чтобы сосредоточиться на базовых навыках веб-разработчика до знакомства с фреймворком, хорошим следующим шагом после этого курса будет изучение Node.js через другую серию видео: "[Серия для начинающих: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Посетите наши руководства [Кодекс поведения](CODE_OF_CONDUCT.md) и [Вклад](CONTRIBUTING.md). Мы приветствуем ваши конструктивные отзывы!
> Посетите наши [Правила поведения](CODE_OF_CONDUCT.md) и руководство по [вкладу в проект](CONTRIBUTING.md). Мы приветствуем ваши конструктивные отзывы!
## 🧭 Оффлайн-доступ
## 🧭 Доступ офлайн
Вы можете просматривать эту документацию офлайн с помощью [Docsify](https://docsify.js.org/#/). Форкните этот репозиторий, [установите Docsify](https://docsify.js.org/#/quickstart) на вашем компьютере, затем в корневой папке этого репозитория введите команду `docsify serve`. Веб-сайт будет запущен на порту 3000 на вашем localhost: `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
@ -225,7 +225,7 @@ PDF со всеми уроками можно найти [здесь](https://mi
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Агенты
### 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)
@ -233,7 +233,7 @@ PDF со всеми уроками можно найти [здесь](https://mi
---
### Серия по генеративному ИИ
### Серия "Генеративный ИИ"
[](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)
@ -241,7 +241,7 @@ PDF со всеми уроками можно найти [здесь](https://mi
---
### Базовое обучение
### Основное обучение
[](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)
@ -260,21 +260,21 @@ PDF со всеми уроками можно найти [здесь](https://mi
## Получение помощи
Если вы застряли или у вас есть вопросы по созданию AI-приложений, присоединяйтесь к обсуждениям вместе с другими учащимися и опытными разработчиками о 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). Несмотря на наши усилия обеспечить точность, имейте в виду, что автоматический перевод может содержать ошибки или неточности. Оригинальный документ на исходном языке следует считать авторитетным источником. Для критически важной информации рекомендуется использовать профессиональный человеческий перевод. Мы не несем ответственности за любые недоразумения или неправильные толкования, возникающие в результате использования данного перевода.