chore(i18n): sync translations with latest source changes (chunk 1/1, 9 changes)

update-translations
localizeflow[bot] 6 days ago
parent dc71b57eb7
commit 982375efbc

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-27T21:44:05+00:00",
"translation_date": "2026-04-06T17:39:16+00:00",
"source_file": "AGENTS.md",
"language_code": "ar"
},
@ -516,8 +516,8 @@
"language_code": "ar"
},
"README.md": {
"original_hash": "a2c9eed480687319517c08a6319e5536",
"translation_date": "2026-03-06T16:45:52+00:00",
"original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-04-06T17:35:46+00:00",
"source_file": "README.md",
"language_code": "ar"
},

@ -2,27 +2,27 @@
## نظرة عامة على المشروع
هذا مستودع منهج تعليمي لتعليم أساسيات تطوير الويب للمبتدئين. المنهج عبارة عن دورة شاملة لمدة 12 أسبوعًا تم تطويرها من قبل دعاة سحابة مايكروسوفت، تتضمن 24 درسًا عمليًا تغطي جافا سكريبت، CSS، وHTML.
هذا مستودع منهج تعليمي لتعليم أساسيات تطوير الويب للمبتدئين. المنهج هو دورة شاملة مدتها 12 أسبوعًا تم تطويرها بواسطة Microsoft Cloud Advocates، ويشتمل على 24 درسًا عمليًا يغطي JavaScript وCSS وHTML.
### المكونات الرئيسية
- **المحتوى التعليمي**: 24 درسًا منظمًا في وحدات قائمة على المشاريع
- **مشاريع عملية**: Terrarium، لعبة الكتابة، امتداد المتصفح، لعبة الفضاء، تطبيق البنك، محرر التعليمات البرمجية، ومساعد دردشة بالذكاء الاصطناعي
- **اختبارات تفاعلية**: 48 اختبارًا مع 3 أسئلة لكل اختبار (تقييمات ما قبل/بعد الدرس)
- **دعم متعدد اللغات**: ترجمات آلية لأكثر من 50 لغة عبر GitHub Actions
- **التقنيات**: HTML، CSS، JavaScript، Vue.js 3، Vite، Node.js، Express، بايثون (لمشاريع الذكاء الاصطناعي)
- **المشاريع العملية**: تيراريوم، لعبة الطباعة، إضافة متصفح، لعبة الفضاء، تطبيق بنكي، محرر الشفرات، ومساعد دردشة الذكاء الاصطناعي
- **اختبارات تفاعلية**: 48 اختبارًا يحتوي كل منها على 3 أسئلة (تقييمات قبل وبعد الدرس)
- **دعم لغات متعددة**: ترجمات تلقائية لأكثر من 50 لغة عبر GitHub Actions
- **التقنيات**: HTML، CSS، JavaScript، Vue.js 3، Vite، Node.js، Express، Python (لمشاريع الذكاء الاصطناعي)
### الهيكلية
### البنية
- مستودع تعليمي به هيكل قائم على الدروس
- يحتوي كل مجلد درس على README، أمثلة تعليمية، وحلول
- مشاريع مستقلة في مجلدات منفصلة (quiz-app، مشاريع الدروس المختلفة)
- نظام الترجمة يستخدم GitHub Actions (co-op-translator)
- الوثائق مقدمة عبر Docsify ومتوفرة أيضًا كملف PDF
- يحتوي كل مجلد درس على README وأمثلة الشفرة والحلول
- مشاريع مستقلة في مجلدات منفصلة (quiz-app، مشاريع دروس متنوعة)
- نظام ترجمة يستخدم GitHub Actions (co-op-translator)
- التوثيق مقدم عبر Docsify ومتوفر كملف PDF
## أوامر الإعداد
هذا المستودع مخصص بشكل أساسي لاستهلاك المحتوى التعليمي. للعمل مع مشاريع محددة:
هذا المستودع موجه أساسًا لاستهلاك المحتوى التعليمي. للعمل على مشاريع محددة:
### إعداد المستودع الرئيسي
@ -41,22 +41,22 @@ npm run build # البناء للإنتاج
npm run lint # تشغيل ESLint
```
### API مشروع البنك (Node.js + Express)
### واجهة برمجة تطبيقات مشروع البنك (Node.js + Express)
```bash
cd 7-bank-project/api
npm install
npm start # بدء خادم API
npm run lint # تشغيل ESLint
npm run format # التنسيق باستخدام Prettier
npm run format # التنسيق مع Prettier
```
### مشاريع امتداد المتصفح
### مشاريع إضافة المتصفح
```bash
cd 5-browser-extension/solution
npm install
# اتبع تعليمات تحميل الإضافة الخاصة بالمتصفح
# اتبع التعليمات الخاصة بتحميل الامتداد لمتصفح معين
```
### مشاريع لعبة الفضاء
@ -64,53 +64,53 @@ npm install
```bash
cd 6-space-game/solution
npm install
# افتح index.html في المتصفح أو استخدم الخادم الحي
# افتح index.html في المتصفح أو استخدم Live Server
```
### مشروع الدردشة (خلفية بايثون)
### مشروع الدردشة (باك إند بايثون)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# تعيين المتغير البيئي GITHUB_TOKEN
# تعيين متغير البيئة GITHUB_TOKEN
python api.py
```
## سير عمل التطوير
## سير العمل في التطوير
### للمساهمين في المحتوى
1. **استنسخ المستودع** إلى حساب GitHub الخاص بك
2. **انسخ الاستنساخ محليًا**
1. **انشئ فورك للمستودع** في حساب GitHub الخاص بك
2. **استنسخ فوركك** محليًا
3. **أنشئ فرعًا جديدًا** لتغييراتك
4. قم بإجراء تغييرات على محتوى الدروس أو أمثلة الشيفرة
5. اختبر أي تغييرات على الشيفرة في مجلدات المشاريع المعنية
6. قدم طلبات سحب طبقًا لإرشادات المساهمة
4. قم بإجراء تغييرات على محتوى الدروس أو أمثلة الشفرة
5. اختبر أي تغييرات بالشفرة في مجلدات المشاريع المعنية
6. قدم طلبات سحب وفقًا لإرشادات المساهمة
### للمتعلمين
1. استنسخ أو انسخ المستودع
2. انتقل إلى مجلدات الدروس بالتسلسل
1. أنشئ فوركًا أو استنسخ المستودع
2. انتقل إلى مجلدات الدروس تباعًا
3. اقرأ ملفات README لكل درس
4. أكمل اختبارات ما قبل الدرس عبر https://ff-quizzes.netlify.app/web/
5. قم بتنفيذ الأمثلة البرمجية في مجلدات الدروس
4. أكمل اختبارات ما قبل الدرس على https://ff-quizzes.netlify.app/web/
5. اعمل على أمثلة الشفرة في مجلدات الدرس
6. أكمل الواجبات والتحديات
7. خذ اختبارات ما بعد الدرس
### التطوير المباشر
- **الوثائق**: قم بتشغيل `docsify serve` من الجذر (المنفذ 3000)
- **تطبيق الاختبار**: شغل `npm run dev` في مجلد quiz-app
- **المشاريع**: استخدم ملحق VS Code Live Server لمشاريع HTML
- **مشاريع API**: شغل `npm start` في مجلدات API المعنية
- **التوثيق**: شغل `docsify serve` من جذر المستودع (المنفذ 3000)
- **تطبيق الاختبارات**: شغل `npm run dev` في مجلد quiz-app
- **المشاريع**: استخدم امتداد VS Code Live Server لمشاريع HTML
- **مشاريع API**: شغل `npm start` في مجلدات الـ API ذات الصلة
## تعليمات الاختبار
### اختبار تطبيق الاختبار
### اختبار تطبيق الاختبارات
```bash
cd quiz-app
npm run lint # التحقق من مشاكل نمط الكود
npm run lint # التحقق من مشكلات نمط الشفرة
npm run build # التحقق من نجاح البناء
```
@ -118,69 +118,69 @@ npm run build # التحقق من نجاح البناء
```bash
cd 7-bank-project/api
npm run lint # التحقق من مشكلات نمط الكود
node server.js # التحقق من بدء الخادم بدون أخطاء
npm run lint # التحقق من مشاكل نمط الكود
node server.js # التأكد من بدء الخادم بدون أخطاء
```
### منهجية الاختبار العامة
### نهج الاختبار العام
- هذا مستودع تعليمي بدون اختبارات آلية شاملة
- تركيز الاختبار اليدوي على:
- تشغيل أمثلة الشيفرة بدون أخطاء
- عمل الروابط في الوثائق بشكل صحيح
- إتمام بناء المشاريع بنجاح
- اتباع أفضل الممارسات في الأمثلة
- التركيز على الاختبار اليدوي على:
- تشغيل أمثلة الشفرة بدون أخطاء
- عمل روابط التوثيق بشكل صحيح
- اكتمال بناء المشاريع بنجاح
- اتّباع أفضل الممارسات في الأمثلة
### فحوصات ما قبل الإرسال
- شغل `npm run lint` في المجلدات التي تحتوي على package.json
- تحقق من صحة روابط الماركداون
- اختبر أمثلة الشيفرة في المتصفح أو Node.js
- تأكد من أن الترجمة تحافظ على البنية الصحيحة
- شغل `npm run lint` في المجلدات التي تحوي ملف package.json
- تحقق من صلاحية روابط markdown
- اختبر أمثلة الشفرة في المتصفح أو Node.js
- تحقق من أن الترجمات تحافظ على البنية الصحيحة
## إرشادات نمط الشيفرة
## إرشادات أسلوب كتابة الشفرة
### جافا سكريبت
- استخدام صياغة ES6+ الحديثة
- اتباع تهيئات ESLint القياسية المقدمة في المشاريع
- استخدام أسماء متغيرات ودوال ذات معنى للتوضيح التعليمي
- إضافة تعليقات تشرح المفاهيم للمتعلمين
- التنسيق باستخدام Prettier حيثما تم التهيئة
- استخدم بناء جملة ES6+ الحديثة
- اتبع تكوين ESLint القياسي في المشاريع
- استخدم أسماء متغيرات ودوال واضحة للتوضيح التعليمي
- أضف تعليقات تشرح المفاهيم للمتعلمين
- نسق الشفرة باستخدام Prettier حيثما تم تكوينه
### HTML/CSS
- عناصر HTML5 الدلالية
- استخدم عناصر HTML5 الدلالية
- مبادئ التصميم المتجاوب
- تسميات واضحة للفئات (classes)
- قواعد تسمية واضحة للفئات
- تعليقات تشرح تقنيات CSS للمتعلمين
### بايثون
- إرشادات نمط PEP 8
- أمثلة شيفرة واضحة وتعليمية
- تعليمات النوع حيثما تسهل التعلم
- إرشادات الأسلوب PEP 8
- أمثلة شفرة واضحة وتعليمية
- تلميحات الأنواع حيث تساعد في التعلم
### توثيق ماركداون
### توثيق Markdown
- تسلسل عناوين واضحة
- كتل شيفرة مع تحديد اللغة
- تراتبية عناوين واضحة
- كتل شفرة مع تحديد اللغة
- روابط لمصادر إضافية
- لقطات وصور في مجلدات `images/`
- نص بديل للصور لدعم الوصول
- لقطات شاشة وصور في مجلدات `images/`
- نص بديل للصور لملائمة ذوي الاحتياجات
### تنظيم الملفات
- الدروس مرقمة بالتسلسل (1-getting-started-lessons, 2-js-basics,... )
- يحتوي كل مشروع على مجلد `solution/` وغالباً `start/` أو `your-work/`
- تخزين الصور في مجلدات `images/` الخاصة بكل درس
- الترجمة في هيكل `translations/{language-code}/`
- دروس مرقمة بالتسلسل (1-getting-started-lessons، 2-js-basics، إلخ)
- كل مشروع يحتوي على مجلد `solution/` وغالبًا `start/` أو `your-work/`
- الصور مخزنة في مجلدات `images/` الخاصة بكل درس
- الترجمات في هيكل `translations/{language-code}/`
## البناء والنشر
### نشر تطبيق الاختبار (Azure Static Web Apps)
تم تهيئة تطبيق الاختبار للنشر على Azure Static Web Apps:
تم تهيئة quiz-app لنشر Azure Static Web Apps:
```bash
cd quiz-app
@ -188,95 +188,95 @@ npm run build # ينشئ مجلد dist/
# ينشر عبر سير عمل GitHub Actions عند الدفع إلى الفرع الرئيسي
```
إعداد Azure Static Web Apps:
إعداد Azure Static Web Apps:
- **موقع التطبيق**: `/quiz-app`
- **موقع الإخراج**: `dist`
- **موقع الخرج**: `dist`
- **سير العمل**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### إنشاء ملفات PDF للوثائق
### إنشاء PDF للتوثيق
```bash
npm install # تثبيت docsify-to-pdf
npm run convert # توليد ملف PDF من المستندات
npm run convert # إنشاء ملف PDF من docs
```
### توثيق Docsify
```bash
npm install -g docsify-cli # تثبيت Docsify على مستوى النظام
docsify serve # الخدمة على localhost:3000
npm install -g docsify-cli # تثبيت دوكسفاي على مستوى النظام
docsify serve # الخادم على localhost:3000
```
### بناء خاص بكل مشروع
### عمليات بناء خاصة بالمشاريع
قد يحتوي كل مشروع على عملية بناء خاصة به:
- مشاريع Vue: أمر `npm run build` لإنشاء حزم الإنتاج
- المشاريع الثابتة: لا تحتاج لخطوة بناء، تقدم الملفات مباشرة
قد يحتوي كل مجلد مشروع على عملية بناء خاصة به:
- مشاريع Vue: `npm run build` لإنشاء حزَم الإنتاج
- المشاريع الثابتة: لا توجد خطوة بناء، يقدم الملفات مباشرة
## إرشادات طلب السحب
## إرشادات طلبات السحب
### صيغة العنوان
### تنسيق العنوان
استخدم عناوين واضحة ووصفيه تشير إلى مجال التغيير:
استخدم عناوين واضحة ووصّافية تشير إلى مجال التغيير:
- `[Quiz-app] إضافة اختبار جديد للدرس X`
- `[Lesson-3] تصحيح خطأ إملائي في مشروع terrarium`
- `[Lesson-3] إصلاح خطأ في مشروع التيراريوم`
- `[Translation] إضافة الترجمة الإسبانية للدرس 5`
- `[Docs] تحديث تعليمات الإعداد`
### الفحوصات المطلوبة
قبل تقديم طلب السحب:
قبل تقديم PR:
1. **جودة الشيفرة**:
- شغّل `npm run lint` في مجلدات المشاريع
- أصلح جميع أخطاء وإنذارات الفحص
1. **جودة الشفرة**:
- شغل `npm run lint` في مجلدات المشاريع المتأثرة
- أصلح كل أخطاء وتحذيرات اللينت
2. **التحقق من البناء**:
- نفذ `npm run build` إن استدعى الأمر
- تحقق من عدم وجود أخطاء في البناء
- شغل `npm run build` إذا كان مطبقًا
- تأكد من عدم وجود أخطاء في البناء
3. **التحقق من الروابط**:
- اختبر جميع روابط الماركداون
- تحقق من عمل إشارات الصور
- اختبر كل روابط markdown
- تحقق من عمل مراجع الصور
4. **مراجعة المحتوى**:
- تدقيق نحوي وإملائي
- التأكد من صحة أمثلة الشيفرات وجودتها التعليمية
- التأكد من دقة الترجمات ومعناها الأصلي
- تدقيق إملائي ونحوي
- التأكد من صحة وأهداف أمثلة الشفرة التعليمية
- مراجعة الترجمات للحفاظ على المعنى الأصلي
### متطلبات المساهمة
- الموافقة على اتفاقية ترخيص مساهمات مايكروسوفت (فحص آلي على أول طلب سحب)
- اتباع [مدونة قواعد السلوك المفتوح لمايكروسوفت](https://opensource.microsoft.com/codeofconduct/)
- راجع [CONTRIBUTING.md](./CONTRIBUTING.md) للتفاصيل
- المرجعية لأرقام القضايا في وصف طلب السحب إن وجد
- الموافقة على اتفاقية المساهمة مع مايكروسوفت (فحص تلقائي عند PR الأول)
- اتبع [مدونة قواعد السلوك المفتوح لمايكروسوفت](https://opensource.microsoft.com/codeofconduct/)
- راجع [CONTRIBUTING.md](./CONTRIBUTING.md) للإرشادات التفصيلية
- أدرج أرقام القضايا في وصف PR إن وجدت
### عملية المراجعة
- مراجعة طلبات السحب من قبل الصيانة والمجتمع
- التركيز على الوضوح التعليمي
- يجب أن تتبع أمثلة الشيفرة أفضل الممارسات الحالية
- مراجعة الترجمات للتحقق من الدقة والتوافق الثقافي
- تراجع PRs من قِبل القائمين والمجتمع
- تُعطى أولوية للوضوح التعليمي
- يجب أن تتبع أمثلة الشفرة أفضل الممارسات الحالية
- تراجع الترجمات من حيث الدقة والملاءمة الثقافية
## نظام الترجمة
### الترجمة الآلية
### الترجمة التلقائية
- يستخدم GitHub Actions مع سير العمل co-op-translator
- يترجم تلقائيًا لأكثر من 50 لغة
- ملفات المصدر في المجلدات الرئيسية
- يترجم تلقائيًا إلى أكثر من 50 لغة
- الملفات المصدرية في الدلائل الرئيسية
- الملفات المترجمة في مجلدات `translations/{language-code}/`
### إضافة تحسينات يدوية للترجمة
### إضافة تحسينات الترجمة يدويًا
1. حدد الملف في `translations/{language-code}/`
2. قم بالتحسينات مع الحفاظ على البنية
3. تأكد من بقاء أمثلة الشيفرة عاملة
1. حدّد الملف في `translations/{language-code}/`
2. قم بالتحسينات مع الحفاظ على الهيكل
3. تأكد من بقاء أمثلة الشفرة عملية
4. اختبر أي محتوى اختبارات محلي
### بيانات وصفية للترجمة
### بيانات تعريف الترجمة
الملفات المترجمة تتضمن رأس بيانات وصفية:
تشمل الملفات المترجمة رأس بيانات تعريف:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,120 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## تصحيح الأخطاء واستكشاف المشاكل
## تصحيح الأخطاء واستكشاف المشكلات
### مشاكل شائعة
### المشاكل الشائعة
**فشل بدء تطبيق الاختبار**:
- تحقق من إصدار Node.js (يفضل v14+)
- احذف `node_modules` و `package-lock.json`، ثم شغل `npm install` من جديد
- تحقق من تعارض المنافذ (Vite الافتراضي يستخدم المنفذ 5173)
**فشل تطبيق الاختبارات في بدء التشغيل**:
- تحقق من إصدار Node.js (v14+ موصى به)
- احذف `node_modules` و`package-lock.json` ثم شغّل `npm install` مرة أخرى
- تحقق من تعارض المنافذ (الافتراضي: Vite يستخدم المنفذ 5173)
**خادم API لا يبدأ**:
- تحقق من أن إصدار Node.js مناسب (node >=10)
- تحقق مما إذا كان المنفذ قيد الاستخدام بالفعل
- تأكد من تثبيت جميع التبعيات عبر `npm install`
- تحقق من أن إصدار Node.js يلبي الحد الأدنى (node >=10)
- تحقق مما إذا كان المنفذ مستخدمًا بالفعل
- تأكد من تثبيت كل التبعيات عبر `npm install`
**امتداد المتصفح لا يعمل**:
- تحقق من تنسيق manifest.json بشكل صحيح
- راجع أخطاء وحدة تحكم المتصفح
- اتبع تعليمات تثبيت الامتداد الخاصة بالمتصفح
**إضافة المتصفح لا تحمل**:
- تحقق من أن manifest.json منسق بشكل صحيح
- راجع وحدة تحكم المتصفح للأخطاء
- اتبع تعليمات تثبيت الإضافة الخاصة بالمتصفح
**مشاكل مشروع دردشة بايثون**:
**مشكلات مشروع الدردشة بايثون**:
- تأكد من تثبيت حزمة OpenAI: `pip install openai`
- تحقق من تعيين متغير البيئة GITHUB_TOKEN
- راجع أذونات الوصول لنماذج GitHub
**عدم عرض Docsify للوثائق**:
- ثبت docsify-cli عالميًا: `npm install -g docsify-cli`
- شغّل الأمر من جذر المستودع
- تحقق من وجود ملف `docs/_sidebar.md`
**عدم تقديم Docsify للتوثيق**:
- ثبت docsify-cli بشكل عام: `npm install -g docsify-cli`
- شغّل من مجلد جذر المستودع
- تأكد من وجود `docs/_sidebar.md`
### نصائح بيئة التطوير
- استخدم VS Code مع ملحق Live Server لمشاريع HTML
- ثبت ملحقات ESLint وPrettier للتنسيق المتسق
- استخدم أدوات المطورين في المتصفح لتصحيح JavaScript
- لمشاريع Vue، ثبت ملحق Vue DevTools للمتصفح
- استخدم VS Code مع امتداد Live Server لمشاريع HTML
- ثبت امتدادات ESLint وPrettier للتنسيق المتناسق
- استخدم أدوات مطوري المتصفح لتصحيح JavaScript
- لمشاريع Vue، ثبت امتداد Vue DevTools للمتصفح
### اعتبارات الأداء
- عدد كبير من الملفات المترجمة (>50 لغة) يعني أن الاستنساخ الكامل ضخم
- استخدم استنساخ ضحل إذا كنت تعمل فقط على المحتوى: `git clone --depth 1`
- استثنِ الترجمات من البحث عند العمل على المحتوى بالإنجليزية
- قد تكون عمليات البناء بطيئة في التشغيل الأول (npm install، بناء Vite)
- العدد الكبير من الملفات المترجمة (أكثر من 50 لغة) يجعل النسخ الكامل كبير الحجم
- استخدم استنساخًا ضحلًا إذا كنت تعمل على المحتوى فقط: `git clone --depth 1`
- استبعد الترجمات من البحث عند العمل على المحتوى الإنجليزي
- عمليات البناء قد تكون بطيئة عند التشغيل الأول (npm install، بناء Vite)
## اعتبارات الأمان
### متغيرات البيئة
- لا يجب أبدًا تضمين مفاتيح API في المستودع
- استخدم ملفات `.env`ضمّنة بالفعل في `.gitignore`)
- وثق متغيرات البيئة المطلوبة في ملفات README للمشاريع
- يجب ألا تُدرج مفاتيح API في المستودع
- استخدم ملفات `.env`درجة مسبقًا بسجل gitignore)
- وثّق متغيرات البيئة المطلوبة في ملفات README للمشاريع
### مشاريع بايثون
- استخدم بيئات افتراضية: `python -m venv venv`
- حافظ على تحديث التبعيات
- يجب أن تمتلك رموز GitHub أقل الصلاحيات المطلوبة
- يجب أن تمتلك رموز GitHub أذونات ضيقة
### وصول نماذج GitHub
### الوصول إلى نماذج GitHub
- تتطلب رموز وصول شخصية (PAT) لنماذج GitHub
- يجب تخزين الرموز كمتغيرات بيئية
- لا تقم أبدًا بتضمين الرموز أو بيانات الاعتماد في المستودع
- تتطلب تذاكر وصول شخصية (PAT) لنماذج GitHub
- يجب حفظ التذاكر كمتغيرات بيئية
- لا تُدرج التذاكر أو بيانات الاعتماد في المستودع
## ملاحظات إضافية
### الجمهور المستهدف
- المبتدئون الكاملون في تطوير الويب
- الطلاب والمتعلمون الذاتيّون
- المعلمون الذين يستخدمون المنهج داخل الفصول الدراسية
- تم تصميم المحتوى ليكون وصوليًا وبناء مهارات تدريجي
- مبتدئون كاملون في تطوير الويب
- الطلاب والمتعلمون ذاتيًا
- المعلمون الذين يستخدمون المنهج في الفصول الدراسية
- المحتوى مصمم للسهولة وبناء المهارات تدريجيًا
### فلسفة التعليم
### الفلسفة التعليمية
- نهج التعلم القائم على المشاريع
- منهج يعتمد على المشاريع
- فحوصات معرفية متكررة (اختبارات)
- تمارين تعليمية عملية
- أمثلة تطبيقية من الواقع
- التركيز على الأساسيات قبل الأُطُر البرمجية
- تمارين عملية في البرمجة
- أمثلة تطبيقية من العالم الحقيقي
- تركيز على الأساسيات قبل الأُطُر
### صيانة المستودع
- مجتمع نشط من المتعلمين والمساهمين
- تحديثات منتظمة للتبعيات والمحتوى
- مراقبة القضايا والنقاشات من قبل الصيانة
- تحديث الترجمة يتم تلقائيًا عبر GitHub Actions
- متابعة مستمرة للقضايا والنقاشات من قِبل القائمين
- تحديثات الترجمة مؤتمتة عبر GitHub Actions
### موارد ذات صلة
### الموارد ذات الصلة
- [وحدات Microsoft Learn](https://docs.microsoft.com/learn/)
- [موارد Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) موصى به للمتعلمين
- دورات إضافية: الذكاء الاصطناعي التوليدي، علم البيانات، تعلم الآلة، مناهج إنترنت الأشياء
- دورات إضافية: الذكاء الاصطناعي التوليدي، علم البيانات، التعلم الآلي، مناهج إنترنت الأشياء متاحة
### العمل مع مشاريع محددة
للحصول على تعليمات تفصيلية حول المشاريع الفردية، راجع ملفات 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). بينما نسعى للدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار الوثيقة الأصلية بلغتها الأصلية المصدر الموثوق. للمعلومات الحساسة، يُنصح بالترجمة البشرية المهنية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -12,27 +12,27 @@
# تطوير الويب للمبتدئين - منهج دراسي
تعلم أساسيات تطوير الويب مع دورتنا الشاملة التي تستمر 12 أسبوعًا من قِبل دعاة السحابة في مايكروسوفت. كل درس من الدروس الـ 24 يغوص في JavaScript و CSS و HTML من خلال مشاريع تطبيقية مثل التيراريومات، امتدادات المتصفح، وألعاب الفضاء. شارك في اختبارات، مناقشات، وواجبات عملية. حسن مهاراتك وعزز احتفاظك بالمعرفة من خلال منهجنا الفعال المبني على المشاريع. ابدأ رحلتك في الترميز اليوم!
تعلم أساسيات تطوير الويب مع دورتنا الشاملة التي تستمر 12 أسبوعًا من Microsoft Cloud Advocates. كل من الدروس الـ 24 تغوص في JavaScript وCSS وHTML من خلال مشاريع تطبيقية مثل التيراريوم، وإضافات المتصفح، وألعاب الفضاء. تفاعل مع الاختبارات والمناقشات والمهام العملية. حسن مهاراتك وعزز استيعابك للمعرفة باستخدام منهجية التعلم القائمة على المشاريع الفعالة لدينا. ابدأ رحلتك في البرمجة اليوم!
انضم إلى مجتمع Azure AI Foundry على ديسكورد
انضم إلى مجتمع Azure AI Foundry على Discord
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
اتبع هذه الخطوات للبدء باستخدام هذه الموارد:
1. **فرع المستودع**: انقر على [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **انسخ المستودع محليًا**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**انضم إلى Azure AI Foundry على ديسكورد والتقِ بالخبراء والمطورين الآخرين**](https://discord.com/invite/ByRwuEEgH4)
1. **انشئ فورك للمستودع**: اضغط [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **انسخ المستودع**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**انضم إلى Azure AI Foundry Discord والتق بخبراء وزملاء المطورين**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 دعم متعدد اللغات
#### مدعوم عبر إجراء GitHub (آلي ومحدث دائمًا)
#### مدعوم عبر GitHub Action (مؤتمت ويُحدّث دائمًا)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[العربية](./README.md) | [البنغالية](../bn/README.md) | [البلغارية](../bg/README.md) | [البورمية (ميانمار)](../my/README.md) | [الصينية (المبسطة)](../zh-CN/README.md) | [الصينية (التقليدية، هونغ كونغ)](../zh-HK/README.md) | [الصينية (التقليدية، ماكاو)](../zh-MO/README.md) | [الصينية (التقليدية، تايوان)](../zh-TW/README.md) | [الكرواتية](../hr/README.md) | [التشيكية](../cs/README.md) | [الدانماركية](../da/README.md) | [الهولندية](../nl/README.md) | [الإستونية](../et/README.md) | [الفنلندية](../fi/README.md) | [الفرنسية](../fr/README.md) | [الألمانية](../de/README.md) | [اليونانية](../el/README.md) | [العبرية](../he/README.md) | [الهندية](../hi/README.md) | [الهنغارية](../hu/README.md) | [الإندونيسية](../id/README.md) | [الإيطالية](../it/README.md) | [اليابانية](../ja/README.md) | [الكانتادية](../kn/README.md) | [الكورية](../ko/README.md) | [الليتوانية](../lt/README.md) | [الماليزية](../ms/README.md) | [المالايالامية](../ml/README.md) | [الماراثية](../mr/README.md) | [النيبالية](../ne/README.md) | [النيجيرية بيدجن](../pcm/README.md) | [النرويجية](../no/README.md) | [الفارسية (اللغة الفارسية)](../fa/README.md) | [البولندية](../pl/README.md) | [البرتغالية (البرازيل)](../pt-BR/README.md) | [البرتغالية (البرتغال)](../pt-PT/README.md) | [البنجابية (غورموخي)](../pa/README.md) | [الرومانية](../ro/README.md) | [الروسية](../ru/README.md) | [الصربية (السيريلية)](../sr/README.md) | [السلوفاكية](../sk/README.md) | [السلوفينية](../sl/README.md) | [الإسبانية](../es/README.md) | [السواحيلية](../sw/README.md) | [السويدية](../sv/README.md) | [التاغالوغ (الفلبينية)](../tl/README.md) | [التاميلية](../ta/README.md) | [التيلجو](../te/README.md) | [التايلاندية](../th/README.md) | [التركية](../tr/README.md) | [الأوكرانية](../uk/README.md) | [الأردية](../ur/README.md) | [الفيتنامية](../vi/README.md)
[Arabic](./README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Khmer](../km/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **تفضل النسخ محليًا؟**
> **هل تفضل النسخ المحلي؟**
>
> يحتوي هذا المستودع على أكثر من 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)**
[![افتح في Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _هل أنت طالب؟_
قم بزيارة [**صفحة مركز الطلاب**](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 تم إصداره للتو
لا تفوت منهجنا الجديد عن الذكاء الاصطناعي التوليدي!
لا تفوت منهج الذكاء الاصطناعي التوليدي الجديد!
زر [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) للبدء!
تفضل بزيارة [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) للبدء!
![Background](../../translated_images/ar/background.148a8d43afde5730.webp)
![الخلفية](../../translated_images/ar/background.148a8d43afde5730.webp)
- دروس تغطي كل شيء من الأساسيات إلى RAG.
- تفاعل مع شخصيات تاريخية باستخدام GenAI وتطبيقنا المرافق.
- سرد ممتع وجذاب، ستسافر عبر الزمن!
![character](../../translated_images/ar/character.5c0dd8e067ffd693.webp)
![الشخصية](../../translated_images/ar/character.5c0dd8e067ffd693.webp)
كل درس يتضمن واجبًا لإكماله، اختبار معرفة وتحديًا لترشدك على تعلم مواضيع مثل:
- الإرشاد والهندسة الموجهة للنصوص
- إنشاء تطبيقات نصية وصورية
كل درس يتضمن مهمة لإكمالها، اختبار معرفة، وتحدي يوجهك في تعلم مواضيع مثل:
- التوجيه وهندسة التوجيه
- توليد تطبيقات النص والصورة
- تطبيقات البحث
زر [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) للبدء!
تفضل بزيارة [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) للبدء!
## 🌱 بداية العمل
## 🌱 البدء
> **أيها المعلمون**، لقد قمنا [بإدراج بعض الاقتراحات](for-teachers.md) حول كيفية استخدام هذا المنهج. نحب سماع ملاحظاتكم [في منتدى النقاش الخاص بنا](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **أيها المعلمون**، لقد [ضمنّا بعض الاقتراحات](for-teachers.md) حول كيفية استخدام هذا المنهج. نود سماع ملاحظاتكم [في منتدى النقاش لدينا](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[المتعلمون](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**، لكل درس، ابدأ باختبار قبلي ثم تابع بقراءة مادة المحاضرة، إكمال الأنشطة المختلفة، وفحص فهمك باختبار بعد المحاضرة.
**[المتعلمون](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**، لكل درس، ابدأ بفحص قبلي واكمل بقراءة مادة المحاضرة، وإنجاز الأنشطة المختلفة وفحص فهمك من خلال الفحص البعدي للمحاضرة.
لتعزيز تجربتك التعليمية، تواصل مع زملائك للعمل معًا على المشاريع! ينصح بالمناقشات في [منتدى النقاش](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) حيث سيكون فريق المشرفين لدينا متاحًا للرد على أسئلتك.
لتعزيز تجربتك التعليمية، تواصل مع زملائك للعمل على المشاريع معًا! المناقشات مشجعة في [منتدى النقاش](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) حيث سيكون فريق المراقبين متاحًا للإجابة على أسئلتكم.
لتطوير تعليمك أكثر، نوصي بشدة باستكشاف [مايكروسوفت ليرن](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) للمزيد من مواد الدراسة.
لتعميق تعليمك، نوصي بشدة باستكشاف [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) لمواد دراسية إضافية.
### 📋 إعداد بيئتك
هذا المنهج يحتوي على بيئة تطوير جاهزة للعمل! أثناء البدء يمكنك اختيار تشغيل المنهج في [Codespace](https://github.com/features/codespaces/) (_بيئة متصفح لا تحتاج تثبيتات_)، أو محليًا على جهاز الكمبيوتر الخاص بك باستخدام محرر نصوص مثل [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
يحتوي هذا المنهج على بيئة تطوير جاهزة! عند البدء يمكنك اختيار تشغيل المنهج في [Codespace](https://github.com/features/codespaces/) (_بيئة قائمة على المتصفح لا تتطلب تثبيت_)، أو محليًا على جهاز الكمبيوتر باستخدام محرر نصوص مثل [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### أنشئ مستودعك الخاص
لتمكينك من حفظ عملك بسهولة، يُنصح بأن تنشئ نسختك الخاصة من هذا المستودع. يمكنك فعل ذلك بالنقر على زر **Use this template** في أعلى الصفحة. هذا سينشئ مستودعًا جديدًا في حساب GitHub الخاص بك مع نسخة من المنهج.
#### أنشئ مستودعك
لكي تحفظ عملك بسهولة، يُنصح بإنشاء نسخة من هذا المستودع خاصتك. يمكنك فعل ذلك بالنقر على زر **Use this template** أعلى الصفحة. هذا سينشئ مستودعًا جديدًا في حساب GitHub الخاص بك مع نسخة من المنهج.
اتبع هذه الخطوات:
1. **فرع المستودع**: انقر على زر "Fork" في أعلى يمين هذه الصفحة.
2. **انسخ المستودع محليًا**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
1. **انشئ فورك للمستودع**: اضغط على زر "Fork" في الركن العلوي الأيمن من هذه الصفحة.
2. **انسخ المستودع**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### تشغيل المنهج في Codespace
في نسختك من هذا المستودع التي أنشأتها، انقر زر **Code** واختر **Open with Codespaces**. سيُنشئ هذا مساحة عمل جديدة للعمل فيها.
في نسختك من هذا المستودع التي أنشأتها، اضغط على زر **Code** واختر **Open with Codespaces**. هذا سينشئ لك مساحة عمل جديدة في Codespace للعمل فيها.
![Codespace](../../translated_images/ar/createcodespace.0238bbf4d7a8d955.webp)
#### تشغيل المنهج محليًا على جهاز الكمبيوتر الخاص بك
لتشغيل هذا المنهج محليًا على جهاز الكمبيوتر الخاص بك ستحتاج إلى محرر نصوص، متصفح أويب وأداة سطر الأوامر. درسنا الأول، [مقدمة إلى لغات البرمجة وأدوات التجارة](../../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) الخاصة بنا. نحن نرحب بتعليقاتك البناءة!
> قم بزيارة [مدونة السلوك](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
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain4j للمبتدئين](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js للمبتدئين](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain للمبتدئين](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AZD للمبتدئين](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI للمبتدئين](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP للمبتدئين](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![وكلاء AI للمبتدئين](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### سلسلة الذكاء الاصطناعي التوليدي
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
[![الذكاء الاصطناعي التوليدي للمبتدئين](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![الذكاء الاصطناعي التوليدي (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![الذكاء الاصطناعي التوليدي (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![الذكاء الاصطناعي التوليدي (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### التعليم الأساسي
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### التعلم الأساسي
[![تعلم الآلة للمبتدئين](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![علوم البيانات للمبتدئين](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![الذكاء الاصطناعي للمبتدئين](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![الأمن السيبراني للمبتدئين](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![تطوير الويب للمبتدئين](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![إنترنت الأشياء للمبتدئين](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![تطوير XR للمبتدئين](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### سلسلة الكوبيلوت
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
### سلسلة المساعد الشخصي (Copilot)
[![المساعد الشخصي للبرمجة الزوجية بالذكاء الاصطناعي](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![المساعد الشخصي لـ C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![مغامرة المساعد الشخصي](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## الحصول على المساعدة
إذا واجهت صعوبة أو كان لديك أي أسئلة حول بناء تطبيقات الذكاء الاصطناعي. انضم إلى المتعلمين والمطورين ذوي الخبرة في مناقشات حول MCP. إنها مجتمع داعم حيث الأسئلة مرحب بها والمعرفة تُشارك بحرية.
إذا واجهت صعوبة أو كان لديك أي أسئلة حول بناء تطبيقات الذكاء الاصطناعي. انضم إلى المتعلمين والمطورين ذوي الخبرة في مناقشات حول MCP. إنها مجتمع داعم حيث الأسئلة مرحب بها والمعرفة تتم مشاركتها بحرية.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
إذا كان لديك ملاحظات على المنتج أو أخطاء أثناء البناء، قم بزيارة:
إذا كان لديك تعليقات على المنتج أو أخطاء أثناء البناء قم بزيارة:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## الترخيص
يتم ترخيص هذا المستودع بموجب ترخيص MIT. راجع ملف [LICENSE](../../LICENSE) لمزيد من المعلومات.
تم ترخيص هذا المستودع بموجب ترخيص MIT. راجع ملف [LICENSE](../../LICENSE) لمزيد من المعلومات.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**إخلاء المسؤولية**:
تمت ترجمة هذا المستند باستخدام خدمة الترجمة الآلية [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي والمعتمد. للمعلومات الحرجة، يُنصح بالترجمة المهنية البشرية. نحن غير مسؤولين عن أي سوء فهم أو تفسير ناتج عن استخدام هذه الترجمة.
تمت ترجمة هذا المستند باستخدام خدمة الترجمة الآلية [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر المعتمد. للمعلومات الهامة، يوصى بالترجمة المهنية البشرية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-27T21:42:04+00:00",
"translation_date": "2026-04-06T17:37:00+00:00",
"source_file": "AGENTS.md",
"language_code": "de"
},
@ -516,8 +516,8 @@
"language_code": "de"
},
"README.md": {
"original_hash": "a2c9eed480687319517c08a6319e5536",
"translation_date": "2026-03-06T16:34:03+00:00",
"original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-04-06T17:30:05+00:00",
"source_file": "README.md",
"language_code": "de"
},

@ -2,36 +2,36 @@
## Projektübersicht
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
- **Praktische Projekte**: Terrarium, Tipp-Spiel, Browser-Erweiterung, Weltraumspiel, Banking-App, Code-Editor und KI-Chat-Assistent
- **Interaktive Quizze**: 48 Quizze mit jeweils 3 Fragen (Vor-/Nach-Lektion-Bewertungen)
- **Mehrsprachige Unterstützung**: Automatisierte Übersetzungen für 50+ Sprachen via GitHub Actions
- **Technologien**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (für KI-Projekte)
- **Bildungsinhalte**: 24 strukturierte Lektionen, organisiert in projektbasierten Modulen
- **Praktische Projekte**: Terrarium, Tipp-Spiel, Browser-Erweiterung, Weltraumspiel, Banking-App, Code-Editor und KI-Chat-Assistent
- **Interaktive Quizze**: 48 Quizze mit je 3 Fragen (Vor-/Nach-Lektionsbewertungen)
- **Mehrsprachige Unterstützung**: Automatisierte Übersetzungen in über 50 Sprachen via GitHub Actions
- **Technologien**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (für KI-Projekte)
### Architektur
- Bildungsrepository mit lektionenbasierter Struktur
- Jeder Lektionenordner enthält README, Codebeispiele und Lösungen
- Eigenständige Projekte in separaten Verzeichnissen (quiz-app, verschiedene Lektionen-Projekte)
- Übersetzungssystem mit GitHub Actions (co-op-translator)
- Dokumentation bereitgestellt via Docsify und als PDF verfügbar
- Bildungsrepository mit lektionenbasierter Struktur
- Jeder Lektionen-Ordner enthält README, Codebeispiele und Lösungen
- Eigenständige Projekte in separaten Verzeichnissen (quiz-app, diverse Lektionenprojekte)
- Übersetzungssystem mittels GitHub Actions (co-op-translator)
- Dokumentation bereitgestellt via Docsify und als PDF verfügbar
## Einrichtung Befehle
## Setup-Befehle
Dieses Repository dient hauptsächlich zum Konsumieren von Bildungsinhalten. Für die Arbeit mit spezifischen Projekten:
### Haupt-Repository-Einrichtung
### Haupt-Repository Setup
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Quiz-App Einrichtung (Vue 3 + Vite)
### Quiz-App Setup (Vue 3 + Vite)
```bash
cd quiz-app
@ -41,7 +41,7 @@ npm run build # Für die Produktion bauen
npm run lint # ESLint ausführen
```
### Bank-Projekt API (Node.js + Express)
### Bankprojekt API (Node.js + Express)
```bash
cd 7-bank-project/api
@ -72,109 +72,109 @@ npm install
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Setze die Umgebungsvariable GITHUB_TOKEN
# Setzen Sie die Umgebungsvariable GITHUB_TOKEN
python api.py
```
## Entwicklungsablauf
## Entwicklungs-Workflow
### Für Inhaltsmitwirkende
### Für Inhaltsbeiträge
1. **Forke das Repository** in deinem GitHub-Konto
2. **Klonen deinen Fork** lokal
3. **Erstelle einen neuen Branch** für deine Änderungen
4. Änderungen an Lektionstexten oder Codebeispielen vornehmen
5. Codeänderungen in relevanten Projektverzeichnissen testen
6. Pull Requests entsprechend der Beitragsrichtlinien einreichen
1. **Forke das Repository** in dein GitHub-Konto
2. **Klone deinen Fork** lokal
3. **Erstelle einen neuen Branch** für deine Änderungen
4. Ändere Inhalte der Lektionen oder Codebeispiele
5. Teste alle Codeänderungen in den relevanten Projektverzeichnissen
6. Reiche Pull Requests entsprechend der Beitragsrichtlinien ein
### Für Lernende
1. Repository forken oder klonen
2. Nacheinander durch Lektionenverzeichnisse navigieren
3. README-Dateien jeder Lektion lesen
4. Vor-Lektion-Quizze auf https://ff-quizzes.netlify.app/web/ absolvieren
5. Codebeispiele in Lektionenordnern durcharbeiten
6. Aufgaben und Herausforderungen abschließen
7. Nach-Lektion-Quizze machen
1. Forke oder klone das Repository
2. Navigiere nacheinander zu den Lektionen-Ordnern
3. Lies die README-Dateien jeder Lektion
4. Mache Vorab-Quizze unter https://ff-quizzes.netlify.app/web/
5. Arbeite die Codebeispiele in den Lektionen durch
6. Bearbeite Aufgaben und Herausforderungen
7. Absolviere Nachbereitungs-Quizze
### Live-Entwicklung
- **Dokumentation**: `docsify serve` im Root ausführen (Port 3000)
- **Quiz-App**: `npm run dev` im quiz-app-Verzeichnis ausführen
- **Projekte**: Verwende VS Code Live Server Erweiterung für HTML-Projekte
- **API-Projekte**: `npm start` in jeweiligen API-Verzeichnissen ausführen
- **Dokumentation**: Führe `docsify serve` im Root aus (Port 3000)
- **Quiz-App**: Führe `npm run dev` im quiz-app-Verzeichnis aus
- **Projekte**: Nutze VS Code Live Server Erweiterung für HTML-Projekte
- **API-Projekte**: Führe `npm start` in jeweiligen API-Verzeichnissen aus
## Testanweisungen
## Testanleitungen
### Quiz-App Test
### Quiz-App Tests
```bash
cd quiz-app
npm run lint # Überprüfen Sie auf Probleme mit dem Code-Stil
npm run build # Überprüfen Sie, ob der Build erfolgreich ist
npm run lint # Überprüfen auf Code-Stilprobleme
npm run build # Überprüfen, ob der Build erfolgreich ist
```
### Bank API Test
### Bank API Tests
```bash
cd 7-bank-project/api
npm run lint # Überprüfen auf Probleme mit dem Code-Stil
node server.js # Überprüfen, ob der Server ohne Fehler startet
npm run lint # Überprüfen Sie auf Code-Stilprobleme
node server.js # Überprüfen Sie, ob der Server ohne Fehler startet
```
### Allgemeiner Testansatz
- Dies ist ein Bildungsrepository ohne umfassende automatisierte Tests
- Manueller Testfokus:
- Codebeispiele laufen fehlerfrei
- Links in der Dokumentation funktionieren korrekt
- Projekt-Builds werden erfolgreich abgeschlossen
- Beispiele folgen Best Practices
- Dies ist ein Bildungsrepository ohne umfassende automatisierte Tests
- Manuelle Tests konzentrieren sich auf:
- Codebeispiele laufen fehlerfrei
- Links in der Dokumentation funktionieren korrekt
- Projekt-Builds laufen erfolgreich durch
- Beispiele folgen Best Practices
### Vor-Einreichungs-Checks
- `npm run lint` in Verzeichnissen mit package.json ausführen
- Markdown-Links auf Gültigkeit prüfen
- Codebeispiele im Browser oder Node.js testen
- Prüfen, dass Übersetzungen die richtige Struktur beibehalten
- Führe `npm run lint` in Verzeichnissen mit package.json aus
- Überprüfe Markdown-Links auf Gültigkeit
- Teste Codebeispiele im Browser oder in Node.js
- Prüfe, dass Übersetzungen die korrekte Struktur beibehalten
## Code-Stilrichtlinien
### JavaScript
- Nutze moderne ES6+ Syntax
- Folge den standardmäßigen ESLint-Konfigurationen in Projekten
- Verwende aussagekräftige Variablen- und Funktionsnamen zur Bildungsklarheit
- Füge Kommentare hinzu, die Konzepte für Lernende erklären
- Formatierung mit Prettier, wenn konfiguriert
- Verwende moderne ES6+ Syntax
- Beachte Standard-ESLint-Konfigurationen der Projekte
- Nutze aussagekräftige Variablen- und Funktionsnamen zur besseren Verständlichkeit
- Füge erläuternde Kommentare für Lernende hinzu
- Formatiere mit Prettier, wo konfiguriert
### HTML/CSS
- Semantische HTML5-Elemente
- Responsive Design Prinzipien
- Klare Klassennamen-Konventionen
- Kommentare, die CSS-Techniken für Lernende erklären
- Semantische HTML5-Elemente
- Responsive Design Prinzipien
- Klare Klassennamen-Konventionen
- Kommentare, die CSS-Techniken für Lernende erklären
### Python
- PEP 8 Stilrichtlinien
- Klare, lehrreiche Codebeispiele
- Typ-Hinweise, wo hilfreich für das Lernen
- PEP 8 Stilrichtlinien
- Klare, didaktische Codebeispiele
- Typannotationen, wo sinnvoll für den Lernprozess
### Markdown-Dokumentation
- Klare Überschriften-Hierarchie
- Codeblöcke mit Sprachangabe
- Links zu zusätzlichen Ressourcen
- Screenshots und Bilder in `images/` Verzeichnissen
- Alt-Text für Bilder zur Barrierefreiheit
- Klare Überschriftenhierarchie
- Codeblöcke mit Sprachangabe
- Verlinkungen zu weiteren Ressourcen
- Screenshots und Bilder in `images/` Verzeichnissen
- Alt-Texte für Bilder zwecks Barrierefreiheit
### Datei-Organisation
### Dateiorganisation
- Lektionen sequenziell nummeriert (1-getting-started-lessons, 2-js-basics usw.)
- Jedes Projekt hat `solution/` und oft `start/` oder `your-work/` Verzeichnisse
- Bilder werden in lektion-spezifischen `images/` Ordnern gespeichert
- Übersetzungen in `translations/{language-code}/` Struktur
- Lektionen nummeriert und sequenziell (1-getting-started-lessons, 2-js-basics, etc.)
- Jedes Projekt mit `solution/` und oft `start/` oder `your-work/` Ordnern
- Bilder liegen in lektionenspezifischen `images/` Ordnern
- Übersetzungen in `translations/{language-code}/` Verzeichnisstruktur
## Build und Deployment
@ -184,99 +184,99 @@ Die quiz-app ist für Azure Static Web Apps Deployment konfiguriert:
```bash
cd quiz-app
npm run build # Erstellt den Ordner dist/
# Führt die Bereitstellung über GitHub Actions Workflow bei Push zum Branch main durch
npm run build # Erstellt Ordner dist/
# Setzt Bereitstellung per GitHub Actions Workflow bei Push auf main um
```
Azure Static Web Apps Konfiguration:
- **App Location**: `/quiz-app`
- **Output Location**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
Azure Static Web Apps Konfiguration:
- **App-Standort**: `/quiz-app`
- **Ausgabeort**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Dokumentation PDF-Erstellung
### PDF-Erstellung der Dokumentation
```bash
npm install # Installiere docsify-to-pdf
npm run convert # Erzeuge PDF aus docs
```
### Docsify Dokumentation
```bash
npm install -g docsify-cli # Installiere Docsify global
npm install -g docsify-cli # Docsify global installieren
docsify serve # Auf localhost:3000 bereitstellen
```
### Projekt-spezifische Builds
Jedes Projektverzeichnis kann einen eigenen Build-Prozess haben:
- Vue-Projekte: `npm run build` erzeugt Produktions-Bundles
- Statische Projekte: Kein Build Schritt, Dateien direkt servieren
Jedes Projektverzeichnis kann einen eigenen Buildprozess haben:
- Vue-Projekte: `npm run build` erstellt Produktions-Bundles
- Statische Projekte: Kein Build-Schritt, Dateien werden direkt bedient
## Pull-Request Richtlinien
## Pull-Request-Richtlinien
### Titel-Format
Verwende klare, beschreibende Titel, die den Änderungsbereich anzeigen:
- `[Quiz-app] Neues Quiz für Lektion X hinzufügen`
- `[Lesson-3] Tippfehler im Terrarium-Projekt beheben`
- `[Translation] Spanische Übersetzung für Lektion 5 hinzufügen`
- `[Docs] Setup-Anweisungen aktualisieren`
Verwende klare, beschreibende Titel, die den Änderungsbereich angeben:
- `[Quiz-app] Füge neues Quiz für Lektion X hinzu`
- `[Lesson-3] Rechtschreibfehler im Terrarium-Projekt beheben`
- `[Translation] Füge Spanisch-Übersetzung für Lektion 5 hinzu`
- `[Docs] Aktualisiere Setup-Anweisungen`
### Erforderliche Prüfungen
Vor dem Einreichen eines Pull Requests:
Vor dem PR-Einreichen:
1. **Code-Qualität**:
- `npm run lint` in betroffenen Projektverzeichnissen ausführen
- Alle Linting-Fehler und Warnungen beheben
1. **Codequalität**:
- Führe `npm run lint` in betroffenen Projektverzeichnissen aus
- Behebe alle Lint-Fehler und Warnungen
2. **Build-Verifikation**:
- `npm run build` wenn zutreffend ausführen
- Sicherstellen, dass keine Build-Fehler vorliegen
2. **Build-Verifikation**:
- Führe `npm run build` falls zutreffend aus
- Sicherstellen, dass keine Build-Fehler auftreten
3. **Link-Validierung**:
- Alle Markdown-Links testen
- Bildverweise prüfen
3. **Link-Validierung**:
- Teste alle Markdown-Links
- Verifiziere Bildreferenzen
4. **Inhaltsprüfung**:
- Korrekturlesen auf Rechtschreibung und Grammatik
- Sicherstellen, dass Codebeispiele korrekt und bildend sind
- Übersetzungen auf Bedeutungsintaktheit prüfen
4. **Inhaltsprüfung**:
- Korrekturlesen von Rechtschreibung und Grammatik
- Sicherstellen, dass Codebeispiele korrekt und didaktisch sind
- Übersetzungen auf Bedeutungsgenauigkeit prüfen
### Beitragsanforderungen
### Beitragspflichten
- Zustimmung zur Microsoft CLA (automatische Überprüfung beim ersten PR)
- Befolgung des [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Siehe [CONTRIBUTING.md](./CONTRIBUTING.md) für detaillierte Richtlinien
- Referenzierung von Issue-Nummern im PR-Beschreibung falls zutreffend
- Zustimmung zur Microsoft CLA (automatische Prüfung beim ersten PR)
- Befolgung des [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Details in [CONTRIBUTING.md](./CONTRIBUTING.md)
- Verweise auf Issue-Nummern im PR-Beschreibungstext falls zutreffend
### Review-Prozess
- PRs werden von Maintainers und Community geprüft
- Bildungsverständlichkeit hat Priorität
- Codebeispiele sollten aktuellen Best Practices folgen
- Übersetzungen auf Genauigkeit und kulturelle Angemessenheit geprüft
- PRs werden von Maintainer- und Community-Mitgliedern geprüft
- Bildungsklarheit hat Priorität
- Codebeispiele sollten aktuellen Best Practices entsprechen
- Übersetzungen auf Genauigkeit und kulturelle Angemessenheit geprüft
## Übersetzungssystem
### Automatisierte Übersetzung
- Verwendet GitHub Actions mit co-op-translator Workflow
- Übersetzt automatisch in 50+ Sprachen
- Quell-Dateien in Hauptverzeichnissen
- Übersetzte Dateien in `translations/{language-code}/` Verzeichnissen
- Verwendet GitHub Actions mit co-op-translator Workflow
- Übersetzt automatisiert in über 50 Sprachen
- Quell-Dateien in Hauptverzeichnissen
- Übersetzungen in `translations/{language-code}/` Verzeichnissen
### Manuelle Verbesserungen an Übersetzungen
1. Datei in `translations/{language-code}/` finden
2. Verbesserungen bei Erhalt der Struktur vornehmen
3. Sicherstellen, dass Codebeispiele funktionsfähig bleiben
4. Lokalisiertes Quiz-Material testen
1. Datei in `translations/{language-code}/` finden
2. Verbesserungen vornehmen, Struktur bewahren
3. Sicherstellen, dass Codebeispiele funktionsfähig bleiben
4. Lokalisierte Quizinhalte testen
### Übersetzungs-Metadaten
Übersetzte Dateien enthalten Metadaten-Header:
Übersetzte Dateien enthalten Metadaten-Header:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -288,121 +288,121 @@ CO_OP_TRANSLATOR_METADATA:
}
-->
```
## Debugging und Fehlersuche
## Debugging und Fehlerbehebung
### Häufige Probleme
**Quiz-App startet nicht**:
- Node.js Version prüfen (v14+ empfohlen)
- `node_modules` und `package-lock.json` löschen, danach `npm install` ausführen
- Auf Port-Konflikte prüfen (Standard: Vite verwendet Port 5173)
**Quiz-App startet nicht:**
- Prüfe Node.js Version (v14+ empfohlen)
- Lösche `node_modules` und `package-lock.json`, führe `npm install` erneut aus
- Prüfe Port-Konflikte (Standard: Vite nutzt Port 5173)
**API Server startet nicht**:
- Node.js Version >= 10 sicherstellen
- Prüfen, ob Port bereits belegt ist
- Alle Abhängigkeiten mit `npm install` installieren
**API-Server startet nicht:**
- Node.js Version mindestens v10 sicherstellen
- Prüfe, ob Port bereits belegt ist
- Alle Abhängigkeiten mit `npm install` installieren
**Browser-Erweiterung lädt nicht**:
- manifest.json auf korrekte Formatierung prüfen
- Browser-Konsole auf Fehler überprüfen
- Browser-spezifische Installationsanleitungen befolgen
**Browser-Erweiterung lädt nicht:**
- Prüfe Manifest.json auf korrekte Formatierung
- Browser-Konsole auf Fehler prüfen
- Browser-spezifische Installationshinweise beachten
**Python Chat-Projekt Probleme**:
- OpenAI-Paket installiert? `pip install openai`
- GITHUB_TOKEN Umgebungsvariable gesetzt?
- Zugriffsrechte für GitHub Models prüfen
**Python Chat-Projekt Probleme:**
- OpenAI-Paket installiert? `pip install openai`
- Umgebungsvariable GITHUB_TOKEN gesetzt?
- Zugriff auf GitHub Models überprüft?
**Docsify liefert keine Dokumentation**:
- docsify-cli global installieren: `npm install -g docsify-cli`
- Vom Repository-Root aus starten
- Prüfen, ob `docs/_sidebar.md` existiert
**Docsify liefert keine Docs aus:**
- docsify-cli global installieren: `npm install -g docsify-cli`
- Aus dem Root-Verzeichnis starten
- Prüfen, ob `docs/_sidebar.md` existiert
### Tipps zur Entwicklungsumgebung
### Entwicklungstipps
- VS Code mit Live Server Erweiterung für HTML-Projekte verwenden
- ESLint und Prettier Erweiterungen für einheitliche Formatierung installieren
- Browser DevTools zum JavaScript Debuggen nutzen
- Für Vue-Projekte Vue DevTools Browser-Erweiterung verwenden
- Nutze VS Code mit Live Server Erweiterung für HTML-Projekte
- Installiere ESLint und Prettier Extensions für konsistente Formatierung
- Verwende Browser DevTools zum Debuggen von JavaScript
- Für Vue-Projekte Vue DevTools Browser Extension installieren
### Performance Aspekt
### Performance-Aspekte
- Große Anzahl an Übersetzungsdateien (50+ Sprachen) führt zu großen Klonen
- Shallow Clone verwenden, wenn nur Inhaltsarbeit gewünscht: `git clone --depth 1`
- Übersetzungen bei Arbeit am englischen Inhalt von Suchvorgängen ausnehmen
- Build-Prozesse können beim ersten Lauf langsam sein (npm install, Vite Build)
- Große Anzahl übersetzter Dateien (50+ Sprachen) führt zu großen Klonen
- Nutze shallow clone, wenn nur mit Inhalten gearbeitet wird: `git clone --depth 1`
- Übersetzungen bei englischer Bearbeitung von Suchen ausschließen
- Build-Prozesse können beim ersten Mal langsam sein (npm install, Vite build)
## Sicherheitsüberlegungen
## Sicherheitsaspekte
### Umgebungsvariablen
- API-Schlüssel niemals ins Repository commiten
- `.env` Dateien verwenden (bereits in `.gitignore`)
- Benötigte Umgebungsvariablen in Projekt-READMEs dokumentieren
- API-Schlüssel niemals im Repository speichern
- `.env` Dateien nutzen (bereits in `.gitignore` enthalten)
- Benötigte Umgebungsvariablen in Projekt-README dokumentieren
### Python-Projekte
- Virtuelle Umgebungen verwenden: `python -m venv venv`
- Abhängigkeiten aktuell halten
- GitHub Tokens mit minimal erforderlichen Berechtigungen nutzen
- Virtuelle Umgebungen verwenden: `python -m venv venv`
- Abhängigkeiten aktuell halten
- GitHub-Tokens minimal erforderliche Rechte geben
### GitHub Models Zugriff
### Zugang zu GitHub Models
- Personal Access Tokens (PAT) für GitHub Models erforderlich
- Tokens als Umgebungsvariablen speichern
- Tokens oder Zugangsdaten niemals committen
- Personal Access Tokens (PAT) für GitHub Models erforderlich
- Tokens als Umgebungsvariablen speichern
- Keine Tokens oder Credentials commiten
## Zusätzliche Hinweise
## Weitere Hinweise
### Zielgruppe
- Absolute Anfänger in Webentwicklung
- Studierende und Selbstlernende
- Lehrkräfte, die das Curriculum im Unterricht einsetzen
- Inhalte sind auf Barrierefreiheit und schrittweise Kompetenzentwicklung ausgelegt
- Totale Anfänger in der Webentwicklung
- Studenten und autodidaktische Lernende
- Lehrende, die das Curriculum im Unterricht verwenden
- Inhalte sind auf Zugänglichkeit und graduelles Kompetenzaufbau ausgelegt
### Bildungskonzept
### Pädagogische Philosophie
- Projektbasiertes Lernen
- Häufige Wissensüberprüfungen (Quizze)
- Praktische Programmierübungen
- Beispiele mit realweltlichen Anwendungen
- Fokus auf Grundlagen vor Frameworks
- Projektbasierter Lernansatz
- Häufige Wissensüberprüfungen (Quizze)
- Praktische Programmierübungen
- Beispiele aus realen Anwendungsfällen
- Fokus auf Grundlagen vor Frameworks
### Repository-Wartung
### Repository-Pflege
- Aktive Gemeinschaft von Lernenden und Mitwirkenden
- Regelmäßige Aktualisierung von Abhängigkeiten und Inhalten
- Issues und Diskussionen werden von Maintainers überwacht
- Übersetzungsupdates automatisiert über GitHub Actions
- Aktive Community von Lernenden und Mitwirkenden
- Regelmäßige Aktualisierung der Abhängigkeiten und Inhalte
- Beobachtung von Issues und Diskussionen durch Maintainer
- Übersetzungsupdates automatisiert über GitHub Actions
### Verwandte Ressourcen
- [Microsoft Learn Module](https://docs.microsoft.com/learn/)
- [Student Hub Ressourcen](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) empfiehlt sich für Lernende
- Weitere Kurse: Generative AI, Data Science, ML, IoT Curricula verfügbar
- [Microsoft Learn Module](https://docs.microsoft.com/learn/)
- [Student Hub Ressourcen](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) empfohlen für Lernende
- Zusätzliche Kurse: Generative KI, Data Science, ML, IoT Curricula verfügbar
### Arbeit mit spezifischen Projekten
Für detaillierte Anleitungen zu einzelnen Projekten siehe README-Dateien in:
- `quiz-app/README.md` - Vue 3 Quiz-Anwendung
- `7-bank-project/README.md` - Banking-App mit Authentifizierung
- `5-browser-extension/README.md` - Browser-Erweiterungsentwicklung
- `6-space-game/README.md` - Canvas-basiertes Spiel
- `9-chat-project/README.md` - KI Chat-Assistent Projekt
Für detaillierte Anleitungen zu einzelnen Projekten siehe README-Dateien in:
- `quiz-app/README.md` - Vue 3 Quiz-Anwendung
- `7-bank-project/README.md` - Banking-Anwendung mit Authentifizierung
- `5-browser-extension/README.md` - Browsererweiterungsentwicklung
- `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.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -12,27 +12,27 @@
# Webentwicklung für Anfänger - Ein Lehrplan
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!
Tritt der Azure AI Foundry Discord Community bei
Tritt der Azure AI Foundry Discord-Community bei
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Folge diesen Schritten, um die Ressourcen zu nutzen:
1. **Repository forken**: Klicke [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Repository klonen**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Tritt dem Azure AI Foundry Discord bei und triff Experten und andere Entwickler**](https://discord.com/invite/ByRwuEEgH4)
Folge diesen Schritten, um mit diesen Ressourcen zu starten:
1. **Forke das Repository**: Klicke [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Klone das Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Tritt der Azure AI Foundry Discord bei und triff Experten sowie andere Entwickler**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Mehrsprachige Unterstützung
#### Unterstützt über GitHub Action (Automatisiert & immer aktuell)
#### Unterstützt durch GitHub Action (Automatisiert & Immer Aktuell)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabisch](../ar/README.md) | [Bengalisch](../bn/README.md) | [Bulgarisch](../bg/README.md) | [Birmanisch (Myanmar)](../my/README.md) | [Chinesisch (vereinfacht)](../zh-CN/README.md) | [Chinesisch (traditionell, Hongkong)](../zh-HK/README.md) | [Chinesisch (traditionell, Macau)](../zh-MO/README.md) | [Chinesisch (traditionell, Taiwan)](../zh-TW/README.md) | [Kroatisch](../hr/README.md) | [Tschechisch](../cs/README.md) | [Dänisch](../da/README.md) | [Niederländisch](../nl/README.md) | [Estnisch](../et/README.md) | [Finnisch](../fi/README.md) | [Französisch](../fr/README.md) | [Deutsch](./README.md) | [Griechisch](../el/README.md) | [Hebräisch](../he/README.md) | [Hindi](../hi/README.md) | [Ungarisch](../hu/README.md) | [Indonesisch](../id/README.md) | [Italienisch](../it/README.md) | [Japanisch](../ja/README.md) | [Kannada](../kn/README.md) | [Koreanisch](../ko/README.md) | [Litauisch](../lt/README.md) | [Malaiisch](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepalesisch](../ne/README.md) | [Nigerianisches Pidgin](../pcm/README.md) | [Norwegisch](../no/README.md) | [Persisch (Farsi)](../fa/README.md) | [Polnisch](../pl/README.md) | [Portugiesisch (Brasilien)](../pt-BR/README.md) | [Portugiesisch (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Rumänisch](../ro/README.md) | [Russisch](../ru/README.md) | [Serbisch (Kyrillisch)](../sr/README.md) | [Slowakisch](../sk/README.md) | [Slowenisch](../sl/README.md) | [Spanisch](../es/README.md) | [Suaheli](../sw/README.md) | [Schwedisch](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thailändisch](../th/README.md) | [Türkisch](../tr/README.md) | [Ukrainisch](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamesisch](../vi/README.md)
[Arabisch](../ar/README.md) | [Bengalisch](../bn/README.md) | [Bulgarisch](../bg/README.md) | [Birmanisch (Myanmar)](../my/README.md) | [Chinesisch (vereinfacht)](../zh-CN/README.md) | [Chinesisch (traditionell, Hongkong)](../zh-HK/README.md) | [Chinesisch (traditionell, Macau)](../zh-MO/README.md) | [Chinesisch (traditionell, Taiwan)](../zh-TW/README.md) | [Kroatisch](../hr/README.md) | [Tschechisch](../cs/README.md) | [Dänisch](../da/README.md) | [Niederländisch](../nl/README.md) | [Estnisch](../et/README.md) | [Finnisch](../fi/README.md) | [Französisch](../fr/README.md) | [Deutsch](./README.md) | [Griechisch](../el/README.md) | [Hebräisch](../he/README.md) | [Hindi](../hi/README.md) | [Ungarisch](../hu/README.md) | [Indonesisch](../id/README.md) | [Italienisch](../it/README.md) | [Japanisch](../ja/README.md) | [Kannada](../kn/README.md) | [Khmer](../km/README.md) | [Koreanisch](../ko/README.md) | [Litauisch](../lt/README.md) | [Malaiisch](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathisch](../mr/README.md) | [Nepalesisch](../ne/README.md) | [Nigerianisches Pidgin](../pcm/README.md) | [Norwegisch](../no/README.md) | [Persisch (Farsi)](../fa/README.md) | [Polnisch](../pl/README.md) | [Portugiesisch (Brasilien)](../pt-BR/README.md) | [Portugiesisch (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Rumänisch](../ro/README.md) | [Russisch](../ru/README.md) | [Serbisch (Kyrillisch)](../sr/README.md) | [Slowakisch](../sk/README.md) | [Slowenisch](../sl/README.md) | [Spanisch](../es/README.md) | [Suaheli](../sw/README.md) | [Schwedisch](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thailändisch](../th/README.md) | [Türkisch](../tr/README.md) | [Ukrainisch](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamesisch](../vi/README.md)
> **Lieber lokal klonen?**
> **Bevorzugst du das lokale Klonen?**
>
> 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)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _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!
![Background](../../translated_images/de/background.148a8d43afde5730.webp)
- Lektionen, die alles von den Grundlagen bis zu RAG abdecken.
- Interagiere mit historischen Figuren mit GenAI und unserer Begleit-App.
- Spaßige und fesselnde Erzählweise, du reist durch die Zeit!
- Interagiere mit historischen Persönlichkeiten mit GenAI und unserer Begleit-App.
- Spaßige und spannende Erzählung, du wirst durch die Zeit reisen!
![character](../../translated_images/de/character.5c0dd8e067ffd693.webp)
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.
2. **Repository klonen**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
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.
![Codespace](../../translated_images/de/createcodespace.0238bbf4d7a8d955.webp)
#### 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`.
## 🗃️ Lektionen
| | Projektname | Erlernte Konzepte | Lernziele | Verknüpfte Lektion | Autor |
| :-: | :----------------------------------------------------: | :------------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------: | :----------------: |
| 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 |
| | Projektname | Vermittelte Konzepte | Lernziele | Verknüpfte Lektion | Autor |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 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
[![LangChain4j für Anfänger](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js für Anfänger](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain für Anfänger](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agenten
[![AZD für Anfänger](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI für Anfänger](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP für Anfänger](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![KI-Agenten für Anfänger](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
### Azure / Edge / MCP / Agents
[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Generative KI-Serie
[![Generative KI für Anfänger](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative KI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative KI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![Generative KI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-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
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Kernlernen
[![ML für Anfänger](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Datenwissenschaft für Anfänger](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![KI für Anfänger](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Cybersicherheit für Anfänger](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Webentwicklung für Anfänger](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT für Anfänger](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![XR-Entwicklung für Anfänger](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Copilot-Serie
[![Copilot für KI-Paired-Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot für C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot-Abenteuer](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
### Copilot Serie
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## Hilfe erhalten
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.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Wenn du Produktfeedback hast oder beim Bauen auf Fehler stößt, besuche:
Wenn du Produktfeedback oder Fehler beim Erstellen hast, besuche:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## Lizenz
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.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-27T21:43:05+00:00",
"translation_date": "2026-04-06T17:38:08+00:00",
"source_file": "AGENTS.md",
"language_code": "ru"
},
@ -516,8 +516,8 @@
"language_code": "ru"
},
"README.md": {
"original_hash": "a2c9eed480687319517c08a6319e5536",
"translation_date": "2026-03-06T16:39:46+00:00",
"original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-04-06T17:32:04+00:00",
"source_file": "README.md",
"language_code": "ru"
},

@ -2,27 +2,27 @@
## Обзор проекта
Это образовательный репозиторий с учебной программой для обучения основам веб-разработки для начинающих. Учебная программа представляет собой комплексный 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 проектов)
### Архитектура
- Образовательный репозиторий с уроковой структурой
- В каждой папке урока находятся README, примеры кода и решения
- Отдельные проекты в отдельных директориях (quiz-app, различные проекты уроков)
- Образовательный репозиторий с структурой, основанной на уроках
- Каждая папка урока содержит README, примеры кода и решения
- Отдельные проекты в отдельных каталогах (quiz-app, разные проекты уроков)
- Система перевода с использованием GitHub Actions (co-op-translator)
- Документация предоставляется через Docsify и доступна в формате PDF
- Документация подается через Docsify и доступна в формате PDF
## Команды настройки
## Команды для настройки
Этот репозиторий предназначен в первую очередь для изучения образовательного контента. Для работы с конкретными проектами:
Этот репозиторий предназначен преимущественно для изучения образовательного контента. Для работы с конкретными проектами:
### Основная настройка репозитория
@ -31,13 +31,13 @@ git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Настройка Quiz App (Vue 3 + Vite)
### Настройка викторины (Vue 3 + Vite)
```bash
cd quiz-app
npm install
npm run dev # Запустить сервер разработки
npm run build # Собрать для продакшена
npm run build # Сборка для производства
npm run lint # Запустить ESLint
```
@ -51,7 +51,7 @@ npm run lint # Запустить ESLint
npm run format # Отформатировать с помощью Prettier
```
### Проекты расширения браузера
### Проекты расширений браузера
```bash
cd 5-browser-extension/solution
@ -80,33 +80,33 @@ python api.py
### Для контрибьюторов контента
1. **Сделайте форк репозитория** в свой аккаунт на GitHub
1. **Сделайте форк репозитория** в ваш аккаунт GitHub
2. **Клонируйте ваш форк** локально
3. **Создайте новую ветку** для ваших изменений
4. Внесите изменения в содержимое уроков или примеры кода
5. Протестируйте любые изменения кода в соответствующих директориях проектов
6. Отправьте pull request в соответствии с руководством по внесению изменений
5. Протестируйте любые изменения кода в соответствующих каталогах проектов
6. Отправьте pull-запросы согласно руководству по внесению изменений
### Для обучающихся
### Для учащихся
1. Форкайте или клонируйте репозиторий
2. Переходите по папкам уроков последовательно
3. Читайте README файлы для каждого урока
4. Выполните предварительные викторины по ссылке https://ff-quizzes.netlify.app/web/
5. Работайте с примерами кода в папках уроков
6. Выполняйте задания и вызовы
7. Проходите пост-урочные викторины
1. Форкните или клонируйте репозиторий
2. Переходите к каталогам уроков по порядку
3. Читайте README для каждого урока
4. Пройдите викторины до уроков на https://ff-quizzes.netlify.app/web/
5. Проработайте примеры кода в каталоге уроков
6. Выполните задания и челленджи
7. Пройдите викторины после уроков
### Живая разработка
- **Документация**: Запустите `docsify serve` в корне (порт 3000)
- **Quiz App**: Запустите `npm run dev` в директории quiz-app
- **Проекты**: Используйте расширение VS Code Live Server для HTML-проектов
- **API проекты**: Запустите `npm start` в соответствующих API папках
- **Викторина**: Запустите `npm run dev` в каталоге quiz-app
- **Проекты**: Используйте расширение VS Code Live Server для HTML проектов
- **API проекты**: Запустите `npm start` в соответствующих папках с API
## Инструкции по тестированию
### Тестирование Quiz App
### Тестирование викторины
```bash
cd quiz-app
@ -114,56 +114,56 @@ npm run lint # Проверить проблемы со стилем ко
npm run build # Проверить успешность сборки
```
### Тестирование Bank API
### Тестирование банковского API
```bash
cd 7-bank-project/api
npm run lint # Проверить проблемы с оформлением кода
node server.js # Проверить, что сервер запускается без ошибок
npm run lint # Проверить наличие проблем со стилем кода
node server.js # Убедиться, что сервер запускается без ошибок
```
### Общий подход к тестированию
- Это образовательный репозиторий без комплексных автоматических тестов
- Ручное тестирование сосредоточено на:
- успешном выполнении примеров кода
- корректной работе ссылок в документации
- успешной сборке проектов
- следовании примеров лучшим практикам
- Это образовательный репозиторий без полноценных автоматических тестов
- Ручное тестирование фокусируется на:
- Запуске примеров кода без ошибок
- Работе ссылок в документации
- Успешном сборке проектов
- Соответствии примеров рекомендуемым практикам
### Проверки перед отправкой
- Запустите `npm run lint` в директориях с package.json
- Проверьте, что markdown-ссылки корректны
- Протестируйте примеры кода в браузере или Node.js
- Убедитесь, что переводы сохраняют правильную структуру
- Проверьте валидность markdown ссылок
- Тестируйте примеры кода в браузере или Node.js
- Удостоверьтесь, что переводы сохраняют правильную структуру
## Руководства по стилю кода
## Руководство по стилю кода
### JavaScript
- Используйте современный синтаксис ES6+
- Следуйте стандартным конфигурациям ESLint, представленным в проектах
- Используйте осмысленные имена переменных и функций для образовательной ясности
- Добавляйте комментарии, объясняющие концепции для обучающихся
- Форматируйте с помощью Prettier, где настроено
- Следуйте стандартным конфигурациям ESLint в проектах
- Используйте понятные имена переменных и функций для учебной ясности
- Добавляйте комментарии, объясняющие концепции для учащихся
- Форматируйте код с помощью Prettier там, где настроено
### HTML/CSS
- Семантические элементы HTML5
- Принципы адаптивного дизайна
- Четкие правила именования классов
- Комментарии с объяснениями CSS-техник для обучающихся
- Четкие соглашения по именованию классов
- Комментарии, объясняющие CSS-методы для учащихся
### Python
- Соблюдайте стиль PEP 8
- Четкие, образовательные примеры кода
- Тайпинги, где полезно для обучения
- Следуйте стилю PEP 8
- Понятные, образовательные примеры кода
- Подсказки типов, полезные для обучения
### Markdown документация
### Документация в Markdown
- Чистая иерархия заголовков
- Четкая иерархия заголовков
- Блоки кода с указанием языка
- Ссылки на дополнительные ресурсы
- Скриншоты и изображения в папках `images/`
@ -172,111 +172,111 @@ node server.js # Проверить, что сервер запускает
### Организация файлов
- Уроки пронумерованы последовательно (1-getting-started-lessons, 2-js-basics и т.д.)
- Каждый проект имеет папки `solution/` и часто `start/` или `your-work/`
- Изображения хранятся в специфичных для урока папках `images/`
- Переводы в структуре `translations/{language-code}/`
- В каждом проекте есть папки `solution/` и часто `start/` или `your-work/`
- Изображения хранятся в папках `images/` каждого урока
- Переводы располагаются в структуре `translations/{language-code}/`
## Сборка и деплой
## Сборка и развертывание
### Деплой Quiz App (Azure Static Web Apps)
### Развертывание викторины (Azure Static Web Apps)
quiz-app настроен для деплоя в Azure Static Web Apps:
Викторина настроена для развертывания на Azure Static Web Apps:
```bash
cd quiz-app
npm run build # Создает папку dist/
# Выполняет деплой через GitHub Actions при push в main
npm run build # Создаёт папку dist/
# Развёртывание через workflow GitHub Actions при push в main
```
Конфигурация Azure Static Web Apps:
- **Местоположение приложения**: `/quiz-app`
- **Папка вывода**: `dist`
- **Расположение приложения**: `/quiz-app`
- **Расположение вывода**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Генерация PDF документации
```bash
npm install # Установить docsify-to-pdf
npm run convert # Создать PDF из документов
npm run convert # Создать PDF из документации
```
### Документация Docsify
### Документация в Docsify
```bash
npm install -g docsify-cli # Установите Docsify глобально
docsify serve # Запустить на localhost:3000
docsify serve # Запустите на localhost:3000
```
### Сборки для отдельных проектов
### Сборка по проектам
Каждый каталог проекта может иметь собственный процесс сборки:
- Vue проекты: `npm run build` создает продакшн-бандлы
- Статические проекты: сборка не требуется, файлы подаются напрямую
В каждом проекте может быть свой процесс сборки:
- Vue проекты: `npm run build` создает production сборки
- Статические проекты: сборка не требуется, файлы обслуживаются напрямую
## Руководство по Pull Request
## Руководство по pull request
### Формат названия
### Формат заголовка
Используйте четкие, описательные заголовки, указывающие область изменений:
- `[Quiz-app] Добавить новую викторину для урока X`
- `[Lesson-3] Исправить опечатку в проекте террариума`
- `[Translation] Добавить перевод на испанский для урока 5`
- `[Docs] Обновить инструкции по настройке`
Используйте ясные, описательные заголовки, указывающие область изменений:
- `[Quiz-app] Добавлен новый тест для урока X`
- `[Lesson-3] Исправлена опечатка в проекте террариума`
- `[Translation] Добавлен испанский перевод для урока 5`
- `[Docs] Обновлены инструкции по настройке`
### Необходимые проверки
### Требуемые проверки
Перед отправкой PR:
1. **Качество кода**:
- Запустите `npm run lint` в затронутых директориях проектов
- Исправьте все ошибки и предупреждения lint
- Запустите `npm run lint` в затронутых проектах
- Исправьте все ошибки и предупреждения линтера
2. **Проверка сборки**:
- Запустите `npm run build`, если применимо
- Убедитесь в отсутствии ошибок сборки
3. **Проверка ссылок**:
- Проверьте все markdown-ссылки
- Убедитесь, что ссылки на изображения работают
- Проверьте все markdown ссылки
- Убедитесь, что изображения отображаются корректно
4. **Проверка содержимого**:
- Проверьте орфографию и грамматику
- Убедитесь, что примеры кода верны и образовательны
- Проверьте, что переводы сохраняют первоначальный смысл
- Убедитесь в корректности и образовательной ценности примеров кода
- Дважды проверьте точность переводов
### Требования к вкладу
### Требования к контрибьюциям
- Необходимо согласиться с Microsoft CLA (автоматическая проверка при первом PR)
- Следовать [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- См [CONTRIBUTING.md](./CONTRIBUTING.md) для подробных инструкций
- Указывайте номера issues в описании PR, если применимо
- Согласие с CLA Microsoft (автоматическая проверка при первом PR)
- Следование [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- См. [CONTRIBUTING.md](./CONTRIBUTING.md) для подробных инструкций
- При необходимости указывайте номера issues в описании PR
### Процесс рецензирования
- PR рассматриваются мейнтейнерами и сообществом
- Приоритет на образовательную ясность
- Примеры кода должны соответствовать текущим лучшим практикам
- Переводы проверяются на точность и культурную соответствие
- PR рассматриваются мейнтейнерами и сообществом
- Приоритет — образовательная ясность
- Примеры кода должны соответствовать актуальным лучшим практикам
- Переводы проверяются на точность и культурную корректность
## Система перевода
### Автоматический перевод
- Использует GitHub Actions с workflow co-op-translator
- Автоматический перевод на 50+ языков
- Исходные файлы в основных директориях
- Используется GitHub Actions с workflow co-op-translator
- Переводит автоматически на более 50 языков
- Исходные файлы в основных каталогах
- Переведённые файлы в папках `translations/{language-code}/`
### Добавление ручных улучшений перевода
### Добавление вручную улучшений переводов
1. Найдите файл в `translations/{language-code}/`
2. Внесите улучшения, сохраняя структуру
3. Убедитесь, что примеры кода остаются работоспособными
4. Тестируйте локализованный контент викторин
3. Проверьте, что примеры кода работают
4. Протестируйте локализованный контент викторин
### Метаданные перевода
### Мета-информация о переводе
Переведённые файлы включают заголовок с метаданными:
Переведённые файлы включают мета-заголовок:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -293,116 +293,116 @@ CO_OP_TRANSLATOR_METADATA:
### Распространённые проблемы
**Quiz app не запускается**:
**Викторина не запускается**:
- Проверьте версию Node.js (рекомендуется v14+)
- Удалите `node_modules` и `package-lock.json`, затем выполните `npm install` заново
- Проверьте конфликты портов (по умолчанию Vite использует порт 5173)
**API сервер не запускается**:
**Сервер API не запускается**:
- Убедитесь, что версия Node.js не ниже 10
- Проверьте, не занят ли порт другим процессом
- Убедитесь, что все зависимости установлены с помощью `npm install`
- Проверьте, не занят ли порт
- Удостоверьтесь, что все зависимости установлены через `npm install`
**Расширение браузера не загружается**:
- Проверьте корректность манифеста manifest.json
- Посмотрите консоль браузера на наличие ошибок
**Расширение для браузера не загружается**:
- Проверьте правильность формата manifest.json
- Посмотрите ошибки в консоли браузера
- Следуйте инструкциям по установке расширения для конкретного браузера
**Проблемы с проектом чата на Python**:
- Убедитесь, что пакет OpenAI установлен: `pip install openai`
- Проверьте, что установлена переменная среды GITHUB_TOKEN
- Проверьте разрешения доступа GitHub Models
**Проблемы с Python проектом чата**:
- Убедитесь, что установлен пакет OpenAI: `pip install openai`
- Проверьте, что переменная окружения GITHUB_TOKEN задана
- Проверьте права доступа к GitHub Models
**Docsify не сервисит документацию**:
- Установите docsify-cli глобально: `npm install -g docsify-cli`
- Запускайте из корневой директории репозитория
- Проверьте наличие файла `docs/_sidebar.md`
**Docsify не подаёт документацию**:
- Установите глобально docsify-cli: `npm install -g docsify-cli`
- Запускайте из корня репозитория
- Убедитесь, что файл `docs/_sidebar.md` существует
### Советы по среде разработки
### Советы по окружению разработки
- Используйте VS Code с расширением Live Server для HTML проектов
- Установите расширения ESLint и Prettier для единообразного форматирования
- Используйте инструменты разработчика в браузере для отладки JavaScript
- Для Vue проектов установите расширение Vue DevTools для браузера
- Установите расширения ESLint и Prettier для единого форматирования
- Используйте инструменты разработчика браузера для отладки JavaScript
- Для Vue проектов установите Vue DevTools в браузер
### Особенности производительности
- Большое количество переведённых файлов (50+ языков) делает полное клонирование объёмным
- Используйте неглубокое клонирование для работы только с контентом: `git clone --depth 1`
- Исключайте переводы из поиска при работе с английским содержимым
- Первые сборки могут идти медленно (npm install, сборка Vite)
- Большое количество файлов переводов (50+ языков) увеличивает размер клона
- Используйте поверхностный клон, если работаете только с контентом: `git clone --depth 1`
- Исключайте переводы из поисков при работе с английским содержимым
- Сборка может быть медленной при первом запуске (npm install, сборка Vite)
## Вопросы безопасности
### Переменные окружения
- API ключи нельзя коммитить в репозиторий
- Ключи API никогда не должны попадать в репозиторий
- Используйте `.env` файлы (уже в `.gitignore`)
- Документируйте необходимые переменные окружения в README проектов
### Python проекты
- Используйте виртуальные окружения: `python -m venv venv`
- Поддерживайте зависимости в актуальном состоянии
- Токены GitHub должны иметь минимально необходимые разрешения
- Держите зависимости в актуальном состоянии
- GitHub токены должны иметь минимально необходимые права
### Доступ к GitHub Models
- Для доступа к GitHub Models необходимы Personal Access Tokens (PAT)
- Токены должны храниться в переменных окружения
- Никогда не коммитьте токены и учетные данные
- Для доступа требуются персональные токены доступа (PAT)
- Токены следует хранить в переменных окружения
- Никогда не коммитьте токены или учетные данные
## Дополнительные заметки
### Целевая аудитория
- Полные новички в веб-разработке
- Абсолютные новички в веб-разработке
- Студенты и самоучки
- Преподаватели, применяющие учебную программу в классе
- Контент разработан с учетом доступности и постепенного наращивания навыков
- Учителя, использующие программу в классах
- Контент разработан для доступности и поэтапного обучения
### Образовательная философия
- Подход, основанный на обучении через проекты
- Частая проверка знаний (викторины)
- Практические упражнения по кодированию
- Примеры применения в реальных сценариях
- Акцент на фундаментальных знаниях до изучения фреймворков
- Обучение на основе проектов
- Частые проверки знаний (викторины)
- Практические упражнения с кодом
- Примеры из реального мира
- Фокус на основах перед изучением фреймворков
### Поддержка репозитория
- Активное сообщество обучающихся и контрибьюторов
- Регулярные обновления зависимостей и содержания
- Вопросы и обсуждения под контролем мейнтейнеров
- Автоматическое обновление переводов с помощью GitHub Actions
- Активное сообщество учащихся и участников
- Регулярные обновления зависимостей и контента
- Мониторинг проблем и обсуждений мейнтейнерами
- Автоматическое обновление переводов через GitHub Actions
### Связанные ресурсы
- [Microsoft Learn modules](https://docs.microsoft.com/learn/)
- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) рекомендован для обучающихся
- Дополнительные курсы: генеративный ИИ, дата-сайенс, машинное обучение, IoT учебные программы
- [Microsoft Learn модули](https://docs.microsoft.com/learn/)
- [Ресурсы Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [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). Несмотря на наши усилия по обеспечению точности, имейте в виду, что автоматические переводы могут содержать ошибки или неточности. Исходный документ на его оригинальном языке следует считать авторитетным источником. Для критически важной информации рекомендуется использовать профессиональный перевод, выполненный человеком. Мы не несем ответственности за любые недоразумения или неправильные толкования, возникающие в результате использования данного перевода.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -10,29 +10,29 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Веб-разработка для начинающих - учебная программа
# Веб-разработка для начинающих - Учебная программа
Изучите основы веб-разработки с нашим 12-недельным комплексным курсом от Microsoft Cloud Advocates. Каждое из 24 занятий посвящено JavaScript, CSS и HTML через практические проекты, такие как террариумы, расширения для браузера и космические игры. Участвуйте в викторинах, обсуждениях и практических заданиях. Повышайте свои навыки и оптимизируйте усвоение знаний с помощью нашей эффективной проектной педагогики. Начните свой путь в программировании уже сегодня!
Изучите основы веб-разработки с нашим 12-недельным комплексным курсом от Microsoft Cloud Advocates. Каждое из 24 занятий погружает в JavaScript, CSS и HTML через практические проекты, такие как террариумы, расширения для браузера и космические игры. Участвуйте в викторинах, обсуждениях и практических заданиях. Повышайте свои навыки и оптимизируйте усвоение знаний с помощью нашей эффективной проектной педагогики. Начните свое путешествие в программирование уже сегодня!
Присоединяйтесь к сообществу Azure AI Foundry Discord
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Выполните следующие шаги, чтобы начать использовать эти ресурсы:
1. **Форкните репозиторий**: Нажмите [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Клонируйте репозиторий**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Присоединяйтесь к Azure AI Foundry Discord и знакомьтесь с экспертами и другими разработчиками**](https://discord.com/invite/ByRwuEEgH4)
Следуйте этим шагам, чтобы начать использовать эти ресурсы:
1. **Форкнуть репозиторий**: Нажмите [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Клонировать репозиторий**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Присоединиться к Discord Azure AI Foundry, познакомиться с экспертами и другими разработчиками**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Поддержка нескольких языков
### 🌐 Многоязычная поддержка
#### Поддерживается через GitHub Action (автоматически и всегда актуально)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](./README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Khmer](../km/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](./README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **Предпочитаете клонировать локально?**
>
> Этот репозиторий содержит более 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)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _Вы студент?_
Посетите [**Страничку студента**](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), чтобы начать!
![Background](../../translated_images/ru/background.148a8d43afde5730.webp)
- Уроки охватывают все от основ до RAG.
- Уроки, охватывающие всё от основ до RAG.
- Взаимодействуйте с историческими персонажами с помощью GenAI и нашего сопутствующего приложения.
- Веселый и увлекательный рассказ, вы путешествуете во времени!
- Веселая и увлекательная история, словно путешествие во времени!
![character](../../translated_images/ru/character.5c0dd8e067ffd693.webp)
Каждый урок включает задание для выполнения, проверку знаний и вызов для самостоятельного изучения таких тем, как:
- Подсказки и их разработка
- Генерация приложений для текста и изображений
Каждый урок включает задание, проверку знаний и вызов, которые помогут вам освоить такие темы, как:
- Промптинги и создание промптов
- Генерация приложений с текстом и изображениями
- Поисковые приложения
Посетите [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» в правом верхнем углу этой страницы.
2. **Клонируйте репозиторий**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Следуйте этим шагам:
1. **Форкнуть репозиторий**: Нажмите кнопку "Fork" в правом верхнем углу этой страницы.
2. **Клонировать репозиторий**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Запуск учебной программы в Codespace
В созданной вами копии репозитория нажмите кнопку **Code** и выберите **Open with Codespaces**. Это создаст для вас новый Codespace для работы.
В вашей копии этого репозитория нажмите кнопку **Code** и выберите **Open with Codespaces**. Это создаст новый Codespace для работы.
![Codespace](../../translated_images/ru/createcodespace.0238bbf4d7a8d955.webp)
#### Запуск учебной программы локально на вашем компьютере
Для запуска этой учебной программы локально вам понадобится текстовый редактор, браузер и инструмент командной строки. Наш первый урок, [Введение в языки программирования и инструменты](../../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
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Агенты
### Azure / Edge / MCP / Agents
[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -233,7 +233,7 @@ PDF со всеми уроками можно найти [здесь](https://mi
---
### Серия по генеративному ИИ
### Серия "Генеративный ИИ"
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-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
---
### Базовое обучение
### Основное обучение
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -260,21 +260,21 @@ PDF со всеми уроками можно найти [здесь](https://mi
## Получение помощи
Если вы застряли или у вас есть вопросы по созданию AI-приложений, присоединяйтесь к обсуждениям вместе с другими учащимися и опытными разработчиками о MCP. Это поддерживающее сообщество, где приветствуются вопросы и свободно делятся знаниями.
Если вы застряли или у вас есть вопросы по созданию приложений на базе ИИ. Присоединяйтесь к другим учащимся и опытным разработчикам для обсуждения MCP. Это поддерживающее сообщество, где вопросы приветствуются, а знания свободно обмениваются.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Если у вас есть отзывы о продукте или ошибки во время разработки, посетите:
Если у вас есть отзывы о продукте или ошибки во время создания, посетите:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## Лицензия
Этот репозиторий лицензирован по лицензии MIT. Подробнее см. в файле [LICENSE](../../LICENSE).
Этот репозиторий лицензирован по лицензии MIT. Дополнительную информацию смотрите в файле [LICENSE](../../LICENSE).
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Отказ от ответственности**:
Этот документ был переведен с помощью автоматического сервиса перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Несмотря на наши усилия обеспечить точность, имейте в виду, что автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на языке оригинала следует считать главным и официальным источником. Для получения критически важной информации рекомендуется обращаться к профессиональному человеческому переводу. Мы не несем ответственности за любые недоразумения или неправильные толкования, возникшие в результате использования данного перевода.
Этот документ был переведён с помощью сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Несмотря на наши усилия обеспечить точность, имейте в виду, что автоматический перевод может содержать ошибки или неточности. Оригинальный документ на исходном языке следует считать авторитетным источником. Для критически важной информации рекомендуется использовать профессиональный человеческий перевод. Мы не несем ответственности за любые недоразумения или неправильные толкования, возникающие в результате использования данного перевода.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
Loading…
Cancel
Save