msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

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

Browse Source
pull/1781/head
localizeflow[bot] 5 months ago
parent dc71b57eb7
commit 982375efbc
9 changed files with 864 additions and 864 deletions
Show Stats Download Patch File Download Diff File

6
translations/ar/.co-op-translator.json
Unescape View File

@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "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", "source_file": "AGENTS.md",
"language_code": "ar" "language_code": "ar"
}, },
@ -516,8 +516,8 @@
"language_code": "ar" "language_code": "ar"
}, },
"README.md": { "README.md": {
"original_hash": "a2c9eed480687319517c08a6319e5536", "original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-03-06T16:45:52+00:00", "translation_date": "2026-04-06T17:35:46+00:00",
"source_file": "README.md", "source_file": "README.md",
"language_code": "ar" "language_code": "ar"
}, },

334
translations/ar/AGENTS.md
Unescape View File

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

236
translations/ar/README.md
Unescape View File

@ -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) [![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) 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` 2. **انسخ المستودع**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**انضم إلى Azure AI Foundry على ديسكورد والتقِ بالخبراء والمطورين الآخرين**](https://discord.com/invite/ByRwuEEgH4) 3. [**انضم إلى Azure AI Foundry Discord والتق بخبراء وزملاء المطورين**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 دعم متعدد اللغات ### 🌐 دعم متعدد اللغات
#### مدعوم عبر إجراء GitHub (آلي ومحدث دائمًا) #### مدعوم عبر GitHub Action (مؤتمت ويُحدّث دائمًا)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START --> <!-- 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 / macOS / Linux:**
> ```bash > ```bash
@ -48,232 +48,232 @@
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" > git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ``` > ```
> >
> هذا يمنحك كل ما تحتاجه لإتمام الدورة بسرعة تنزيل أعلى. > هذا يمنحك كل ما تحتاجه لإكمال الدورة بسرعة تنزيل أعلى.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END --> <!-- 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. - دروس تغطي كل شيء من الأساسيات إلى RAG.
- تفاعل مع شخصيات تاريخية باستخدام GenAI وتطبيقنا المرافق. - تفاعل مع شخصيات تاريخية باستخدام 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" في أعلى يمين هذه الصفحة. 1. **انشئ فورك للمستودع**: اضغط على زر "Fork" في الركن العلوي الأيمن من هذه الصفحة.
2. **انسخ المستودع محليًا**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. **انسخ المستودع**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### تشغيل المنهج في Codespace #### تشغيل المنهج في Codespace
في نسختك من هذا المستودع التي أنشأتها، انقر زر **Code** واختر **Open with Codespaces**. سيُنشئ هذا مساحة عمل جديدة للعمل فيها. في نسختك من هذا المستودع التي أنشأتها، اضغط على زر **Code** واختر **Open with Codespaces**. هذا سينشئ لك مساحة عمل جديدة في Codespace للعمل فيها.
![Codespace](../../translated_images/ar/createcodespace.0238bbf4d7a8d955.webp) ![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). توصيتنا هي استخدام [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) [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 ```bash
git clone <your-repository-url> 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 > * [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/) - [اختبار بعد الدرس](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 | | 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 | | 02 | بدء الاستخدام | أساسيات GitHub، تشمل العمل مع فريق | كيفية استخدام GitHub في مشروعك وكيفية التعاون مع الآخرين على قاعدة كود | [مقدمة في GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | البداية | إمكانية الوصول | تعلم أساسيات إمكانية الوصول على الويب | [أساسيات إمكانية الوصول](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 03 | بدء الاستخدام | إمكانية الوصول | تعلم أساسيات إمكانية الوصول على الويب | [أساسيات إمكانية الوصول](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | أساسيات JS | أنواع بيانات JavaScript | أساسيات أنواع بيانات JavaScript | [أنواع البيانات](./2-js-basics/1-data-types/README.md) | Jasmine | | 04 | أساسيات JS | أنواع بيانات جافاسكريبت | الأساسيات المتعلقة بأنواع بيانات جافاسكريبت | [أنواع البيانات](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | أساسيات JS | الدوال والأساليب | تعلم عن الدوال والأساليب لإدارة تدفق منطق التطبيق | [الدوال والأساليب](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | | 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 | | 06 | أساسيات JS | اتخاذ القرارات باستخدام JS | تعلم كيفية إنشاء الشروط في الكود باستخدام طرق اتخاذ القرار | [اتخاذ القرارات](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | أساسيات JS | المصفوفات والحلقات | العمل مع البيانات باستخدام المصفوفات والحلقات في JavaScript | [المصفوفات والحلقات](./2-js-basics/4-arrays-loops/README.md) | Jasmine | | 07 | أساسيات JS | المصفوفات والحلقات | العمل مع البيانات باستخدام المصفوفات والحلقات في جافاسكريبت | [المصفوفات والحلقات](./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 | | 08 | [Terrarium](./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 | | 09 | [Terrarium](./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 | | 10 | [Terrarium](./3-terrarium/solution/README.md) | إغلاق الجافاسكريبت، معالجة DOM | بناء جافاسكريبت لجعل التيراريوم يعمل كواجهة السحب والإفلات، مع التركيز على الإغلاق ومعالجة DOM | [إغلاق الجافاسكريبت، معالجة DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [لعبة الطباعة](./4-typing-game/solution/README.md) | بناء لعبة الطباعة | تعلم كيفية استخدام أحداث لوحة المفاتيح لتحريك منطق تطبيق JavaScript | [البرمجة المعتمدة على الأحداث](./4-typing-game/typing-game/README.md) | Christopher | | 11 | [Typing Game](./4-typing-game/solution/README.md) | بناء لعبة الطباعة | تعلم كيفية استخدام أحداث لوحة المفاتيح للتحكم في منطق تطبيق جافاسكريبت | [برمجة معتمدة على الأحداث](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [امتداد المتصفح الأخضر](./5-browser-extension/solution/README.md) | العمل مع المتصفحات | تعلم كيف تعمل المتصفحات، تاريخها، وكيفية إنشاء العناصر الأولى لامتداد متصفح | [حول المتصفحات](./5-browser-extension/1-about-browsers/README.md) | Jen | | 12 | [Green Browser Extension](./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 | | 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 | [امتداد المتصفح الأخضر](./5-browser-extension/solution/README.md) | العمليات الخلفية في المتصفح، أداء الويب | استخدام عمليات المتصفح الخلفية لإدارة أيقونة الامتداد؛ تعلّم عن أداء الويب وبعض التحسينات لتحقيق أداء أفضل | [المهام الخلفية والأداء](./5-browser-extension/3-background-tasks-and-performance/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 | [لعبة الفضاء](./6-space-game/solution/README.md) | تطوير ألعاب متقدم أكثر باستخدام JavaScript | تعلّم عن الوراثة باستخدام الفئات والتكوين ونمط النشر/الاشتراك، استعدادًا لبناء لعبة | [مقدمة لتطوير الألعاب المتقدم](./6-space-game/1-introduction/README.md) | Chris | | 15 | [Space Game](./6-space-game/solution/README.md) | تطوير الألعاب الأكثر تقدماً باستخدام جافاسكريبت | تعلم عن الوراثة باستخدام الفئات والتكوين ونمط Pub/Sub، تمهيدًا لبناء لعبة | [مقدمة في تطوير الألعاب المتقدم](./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 | | 16 | [Space Game](./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 | | 17 | [Space Game](./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 | | 18 | [Space Game](./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 | | 19 | [Space Game](./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 | | 20 | [Space Game](./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 | | 21 | [Banking App](./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 | | 22 | [Banking App](./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 | | 23 | [Banking App](./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 | | 24 | [Banking App](./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 | | 25 | [Browser/VScode Code](../../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 | | 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). يمكن العثور على ملف PDF لجميع الدروس [هنا](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 دورات أخرى ## 🎒 دورات أخرى
يقوم فريقنا بإنتاج دورات أخرى! تحقق من: يقوم فريقنا بإنتاج دورات أخرى! تفقد:
<!-- CO-OP TRANSLATOR OTHER COURSES START --> <!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain ### 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) [![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 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.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 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) [![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 ### 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) [![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 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) [![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 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) [![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 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) [![وكلاء 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) [![الذكاء الاصطناعي التوليدي للمبتدئين](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) [![الذكاء الاصطناعي التوليدي (.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) [![الذكاء الاصطناعي التوليدي (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) [![الذكاء الاصطناعي التوليدي (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) [![تعلم الآلة للمبتدئين](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) [![علوم البيانات للمبتدئين](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) [![الذكاء الاصطناعي للمبتدئين](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) [![الأمن السيبراني للمبتدئين](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) [![تطوير الويب للمبتدئين](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) [![إنترنت الأشياء للمبتدئين](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) [![تطوير 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)
[![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) [![المساعد الشخصي للبرمجة الزوجية بالذكاء الاصطناعي](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) [![المساعد الشخصي لـ 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) [![مغامرة المساعد الشخصي](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 --> <!-- CO-OP TRANSLATOR OTHER COURSES END -->
## الحصول على المساعدة ## الحصول على المساعدة
إذا واجهت صعوبة أو كان لديك أي أسئلة حول بناء تطبيقات الذكاء الاصطناعي. انضم إلى المتعلمين والمطورين ذوي الخبرة في مناقشات حول MCP. إنها مجتمع داعم حيث الأسئلة مرحب بها والمعرفة تُشارك بحرية. إذا واجهت صعوبة أو كان لديك أي أسئلة حول بناء تطبيقات الذكاء الاصطناعي. انضم إلى المتعلمين والمطورين ذوي الخبرة في مناقشات حول MCP. إنها مجتمع داعم حيث الأسئلة مرحب بها والمعرفة تتم مشاركتها بحرية.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![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) [![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 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 --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

6
translations/de/.co-op-translator.json
Unescape View File

@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "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", "source_file": "AGENTS.md",
"language_code": "de" "language_code": "de"
}, },
@ -516,8 +516,8 @@
"language_code": "de" "language_code": "de"
}, },
"README.md": { "README.md": {
"original_hash": "a2c9eed480687319517c08a6319e5536", "original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-03-06T16:34:03+00:00", "translation_date": "2026-04-06T17:30:05+00:00",
"source_file": "README.md", "source_file": "README.md",
"language_code": "de" "language_code": "de"
}, },

300
translations/de/AGENTS.md
Unescape View File

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

222
translations/de/README.md
Unescape View File

@ -12,27 +12,27 @@
# Webentwicklung für Anfänger - Ein Lehrplan # 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) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Folge diesen Schritten, um die Ressourcen zu nutzen: Folge diesen Schritten, um mit diesen Ressourcen zu starten:
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) 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. **Repository klonen**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. **Klone das Repository**: `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) 3. [**Tritt der Azure AI Foundry Discord bei und triff Experten sowie andere Entwickler**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Mehrsprachige Unterstützung ### 🌐 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 --> <!-- 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 / macOS / Linux:**
> ```bash > ```bash
@ -48,44 +48,44 @@ Folge diesen Schritten, um die Ressourcen zu nutzen:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" > 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 --> <!-- 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) [![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?_ #### 🧑‍🎓 _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! Besuche [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), um loszulegen!
![Background](../../translated_images/de/background.148a8d43afde5730.webp) ![Background](../../translated_images/de/background.148a8d43afde5730.webp)
- Lektionen, die alles von den Grundlagen bis zu RAG abdecken. - Lektionen, die alles von den Grundlagen bis zu RAG abdecken.
- Interagiere mit historischen Figuren mit GenAI und unserer Begleit-App. - Interagiere mit historischen Persönlichkeiten mit GenAI und unserer Begleit-App.
- Spaßige und fesselnde Erzählweise, du reist durch die Zeit! - Spaßige und spannende Erzählung, du wirst durch die Zeit reisen!
![character](../../translated_images/de/character.5c0dd8e067ffd693.webp) ![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 - Prompting und Prompt-Engineering
- Text- und Bildanwendungs-Generierung - Text- und Bild-App-Generierung
- Suchanwendungen - Such-Apps helfen
Besuche [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), um loszulegen! 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 ## 🌱 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 #### 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: Folge diesen Schritten:
1. **Repository forken**: Klicke auf den „Fork“-Button rechts oben auf dieser Seite. 1. **Forke das Repository**: Klicke oben rechts auf dieser Seite auf die Schaltfläche „Fork“.
2. **Repository klonen**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. **Klone das Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Ausführen des Lehrplans in einem Codespace #### 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) ![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). 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. Klone dein Repository auf deinen Computer. Du kannst dies tun, indem du auf die **Code**-Schaltfläche klickst und die URL kopierst: 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) [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 ```bash
git clone <your-repository-url> 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 > * [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 dir beim schnelleren Schreiben von Code zu helfen > * [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: ## 📂 Jede Lektion beinhaltet:
- optionales Sketchnote - optionale Sketchnote
- optionales ergänzendes Video - optionales ergänzendes Video
- Aufwärmquiz vor der Lektion - Aufwärmquiz vor der Lektion
- schriftliche Lektion - schriftliche Lektion
- für projektbasierte Lektionen Schritt-für-Schritt-Anleitungen zum Erstellen des Projekts - für projektbasierte Lektionen Schritt-für-Schritt-Anleitungen zum Erstellen des Projekts
- Wissensüberprüfungen - Wissenschecks
- eine Herausforderung - eine Herausforderung
- ergänzende Lektüre - ergänzende Lektüre
- Aufgabe - Aufgabe
- [Quiz nach der Lektion](https://ff-quizzes.netlify.app/web/) - [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 ## 🗃️ Lektionen
| | Projektname | Erlernte Konzepte | Lernziele | Verknüpfte Lektion | Autor | | | Projektname | Vermittelte 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 | | 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 | 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 | | 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 | Erste Schritte | Barrierefreiheit | Erlerne die Grundlagen der Web-Barrierefreiheit | [Grundlagen der Barrierefreiheit](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 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 der JavaScript-Datentypen | [Datentypen](./2-js-basics/1-data-types/README.md) | Jasmine | | 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 | 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 | | 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 in JS treffen | Lerne, wie man Bedingungen im Code mit Entscheidungsstrukturen erstellt | [Entscheidungen treffen](./2-js-basics/3-making-decisions/README.md) | Jasmine | | 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 | Arbeite mit Daten in JavaScript mithilfe von Arrays und Schleifen | [Arrays und Schleifen](./2-js-basics/4-arrays-loops/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 | 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 | | 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 | 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 | | 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 | 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 | | 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) | 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 | | 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ü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 | | 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ü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 | | 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ü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 | | 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 | [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 | | 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 | [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 | | 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 | [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 | | 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 | [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 | | 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 | [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 | | 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 | [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 | | 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 | [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 | | 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 | [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 | | 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 | [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 | | 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 | [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 | | 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 | Lerne, wie du einen Code-Editor benutzt | [Visual Studio Code Editor verwenden](./8-code-editor/1-using-a-code-editor/README.md) | Chris | | 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 | Lerne, wie du deinen eigenen KI-Assistenten baust | [KI-Assistenten-Projekt](./9-chat-project/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 ## 🏫 Pädagogik
Unser Curriculum basiert auf zwei zentralen pädagogischen Prinzipien: Unser Lehrplan basiert auf zwei wichtigen pädagogischen Prinzipien:
* projektbasiertes Lernen * projektbasiertes Lernen
* häufige Quizze * 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 ## 🧭 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 ## 📘 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 ## 🎒 Andere Kurse
@ -220,61 +220,61 @@ Unser Team produziert weitere Kurse! Schau dir an:
<!-- CO-OP TRANSLATOR OTHER COURSES START --> <!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain ### 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) [![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 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.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 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) [![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 ### Azure / Edge / MCP / Agents
[![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) [![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 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) [![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 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) [![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)
[![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) [![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 AI 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 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 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 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 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 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 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 (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 ### 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) [![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)
[![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) [![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)
[![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) [![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)
[![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) [![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)
[![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) [![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 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) [![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-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) [![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 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 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 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 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-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 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 --> <!-- CO-OP TRANSLATOR OTHER COURSES END -->
## Hilfe erhalten ## 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) [![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) [![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 ## 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 --> <!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Haftungsausschluss**: **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 --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

6
translations/ru/.co-op-translator.json
Unescape View File

@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "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", "source_file": "AGENTS.md",
"language_code": "ru" "language_code": "ru"
}, },
@ -516,8 +516,8 @@
"language_code": "ru" "language_code": "ru"
}, },
"README.md": { "README.md": {
"original_hash": "a2c9eed480687319517c08a6319e5536", "original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-03-06T16:39:46+00:00", "translation_date": "2026-04-06T17:32:04+00:00",
"source_file": "README.md", "source_file": "README.md",
"language_code": "ru" "language_code": "ru"
}, },

310
translations/ru/AGENTS.md
Unescape View File

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

192
translations/ru/README.md
Unescape View File

@ -10,29 +10,29 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![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 Присоединяйтесь к сообществу Azure AI Foundry Discord
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![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) 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` 2. **Клонировать репозиторий**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Присоединяйтесь к Azure AI Foundry Discord и знакомьтесь с экспертами и другими разработчиками**](https://discord.com/invite/ByRwuEEgH4) 3. [**Присоединиться к Discord Azure AI Foundry, познакомиться с экспертами и другими разработчиками**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Поддержка нескольких языков ### 🌐 Многоязычная поддержка
#### Поддерживается через GitHub Action (автоматически и всегда актуально) #### Поддерживается через GitHub Action (автоматически и всегда актуально)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START --> <!-- 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 / macOS / Linux:**
> ```bash > ```bash
@ -48,43 +48,43 @@
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" > git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ``` > ```
> >
> Это даст вам все необходимое для прохождения курса с гораздо более быстрой загрузкой. > Это даст вам всё необходимое для прохождения курса с гораздо более быстрой загрузкой.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END --> <!-- 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) [![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), чтобы начать! Посетите [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), чтобы начать!
![Background](../../translated_images/ru/background.148a8d43afde5730.webp) ![Background](../../translated_images/ru/background.148a8d43afde5730.webp)
- Уроки охватывают все от основ до RAG. - Уроки, охватывающие всё от основ до RAG.
- Взаимодействуйте с историческими персонажами с помощью GenAI и нашего сопутствующего приложения. - Взаимодействуйте с историческими персонажами с помощью GenAI и нашего сопутствующего приложения.
- Веселый и увлекательный рассказ, вы путешествуете во времени! - Веселая и увлекательная история, словно путешествие во времени!
![character](../../translated_images/ru/character.5c0dd8e067ffd693.webp) ![character](../../translated_images/ru/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), чтобы начать!
@ -93,37 +93,37 @@
## 🌱 Начало работы ## 🌱 Начало работы
> **Преподаватели**, мы включили [некоторые рекомендации](for-teachers.md) по использованию этой учебной программы. Мы будем рады вашим отзывам [в нашем форуме обсуждений](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! > **Учителя**, мы включили [некоторые рекомендации](for-teachers.md) по использованию этой учебной программы. Мы будем рады вашему отзыву [в нашем форуме обсуждений](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Учащиеся](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, для каждого урока начните с викторины перед лекцией, затем прочитайте учебный материал, выполните различные задания и проверьте свои знания с помощью викторины после лекции. **[Ученики](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, для каждого урока начните с предварительной викторины, затем изучите лекционный материал, выполните различные задания и проверьте понимание с помощью пост-лекторной викторины.
Для улучшения вашего опыта обучения связывайтесь с коллегами для совместной работы над проектами! Обсуждения приветствуются в нашем [форуме обсуждений](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), где команда модераторов готова отвечать на ваши вопросы. Чтобы улучшить опыт обучения, объединяйтесь с вашими сверстниками для совместной работы над проектами! Обсуждения приветствуются в нашем [форуме обсуждений](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), где наша команда модераторов ответит на ваши вопросы.
Для дальнейшего обучения настоятельно рекомендуем изучать материалы на [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon). Для дальнейшего образования мы настоятельно рекомендуем изучать материалы на [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon).
### 📋 Настройка вашей среды ### 📋 Настройка среды
Эта учебная программа уже имеет готовую среду для разработки! При старте вы можете выбрать запуск программы в [Codespace](https://github.com/features/codespaces/) (_среда в браузере, без необходимости установки_), либо локально на своем компьютере с использованием текстового редактора, например [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). Эта учебная программа уже готова к работе в среде разработки! В начале вы можете выбрать запуск программы в [Codespace](https://github.com/features/codespaces/) (_окружение в браузере без необходимости установки_), или локально на вашем компьютере с помощью текстового редактора, такого как [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Создайте ваш репозиторий #### Создайте свой репозиторий
Чтобы легко сохранять свою работу, рекомендуется создать собственную копию этого репозитория. Вы можете сделать это, нажав кнопку **Use this template** в верхней части страницы. Это создаст новый репозиторий в вашем аккаунте GitHub с копией учебной программы. Для удобного сохранения своей работы рекомендуется создать вашу собственную копию этого репозитория. Вы можете сделать это, нажав кнопку **Use this template** в верхней части страницы. Это создаст новый репозиторий в вашем аккаунте GitHub с копией учебной программы.
Выполните следующие шаги: Следуйте этим шагам:
1. **Форкните репозиторий**: Нажмите кнопку «Fork» в правом верхнем углу этой страницы. 1. **Форкнуть репозиторий**: Нажмите кнопку "Fork" в правом верхнем углу этой страницы.
2. **Клонируйте репозиторий**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. **Клонировать репозиторий**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Запуск учебной программы в Codespace #### Запуск учебной программы в Codespace
В созданной вами копии репозитория нажмите кнопку **Code** и выберите **Open with Codespaces**. Это создаст для вас новый Codespace для работы. В вашей копии этого репозитория нажмите кнопку **Code** и выберите **Open with Codespaces**. Это создаст новый Codespace для работы.
![Codespace](../../translated_images/ru/createcodespace.0238bbf4d7a8d955.webp) ![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). Мы рекомендуем использовать [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) [CodeSpace](./images/createcodespace.png)
@ -133,90 +133,90 @@
git clone <your-repository-url> 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 > * [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) - помогает писать код быстрее
## 📂 Каждый урок включает: ## 📂 Каждый урок включает:
- необязательные скетчноуты - необязательные зарисовки (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 | | 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 | | 02 | Начало работы | Основы GitHub, включая работу в команде | Как использовать GitHub в проекте, как сотрудничать с другими над кодом | [Введение в GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Начало работы | Доступность | Основы веб-доступности | [Основы доступности](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 03 | Начало работы | Доступность | Узнайте основы доступности веб-сайтов | [Основы доступности](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Основы JS | Типы данных JavaScript | Основы типов данных в JavaScript | [Типы данных](./2-js-basics/1-data-types/README.md) | Jasmine | | 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 | | 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 | | 06 | Основы JS | Создание условий в JS | Узнайте, как создавать условия в коде с помощью конструкций для принятия решений | [Создание условий](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Основы JS | Массивы и циклы | Работа с данными с помощью массивов и циклов в JavaScript | [Массивы и циклы](./2-js-basics/4-arrays-loops/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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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) | Перемещение элементов по экрану | Узнать, как элементы движутся с помощью декартовых координат и Canvas API | [Перемещение элементов](./6-space-game/3-moving-elements-around/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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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
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 --> <!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain ### 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) [![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) [![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) [![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) [![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 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 (.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 (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) [![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) [![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) [![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 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) [![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 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 --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Write Preview
Loading…
Cancel
Save