leestott
9 months ago
committed by
GitHub
parent
fa80d581e4
commit
88264e8bfd
@ -1,23 +1,31 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "1ce4deaec80130d3a0a3c906568459fc",
|
||||
"translation_date": "2025-08-25T23:14:01+00:00",
|
||||
"original_hash": "9e2f84e351a6fcb44bfc4066d98525f0",
|
||||
"translation_date": "2025-10-03T08:38:28+00:00",
|
||||
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
|
||||
"language_code": "ar"
|
||||
}
|
||||
-->
|
||||
# قراءة الوثائق
|
||||
|
||||
## التعليمات
|
||||
|
||||
هناك العديد من الأدوات التي قد يحتاجها مطور الويب والمتوفرة في [وثائق MDN الخاصة بأدوات الجانب العميل](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). اختر 3 أدوات لم يتم تغطيتها في الدرس، واشرح لماذا قد يستخدمها مطور الويب، وابحث عن أداة تندرج تحت هذه الفئة وشارك وثائقها. لا تستخدم نفس أمثلة الأدوات الموجودة في وثائق MDN.
|
||||
هناك العديد من الأدوات التي قد يحتاجها مطور الويب والتي تم ذكرها في [وثائق MDN لأدوات الجانب العميل](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). اختر **ثلاث أدوات** التي **لم يتم تغطيتها في هذا الدرس** (باستثناء [ذكر أدوات محددة أو الإشارة إلى محتوى الدرس])، واشرح **لماذا** قد يستخدم مطور الويب كل أداة، وابحث عن أداة تناسب كل فئة. لكل أداة، شارك رابطًا إلى وثائقها الرسمية (وليس المثال المستخدم في MDN).
|
||||
|
||||
**التنسيق:**
|
||||
- اسم الأداة
|
||||
- لماذا قد يستخدمها مطور الويب (2-3 جمل)
|
||||
- رابط الوثائق
|
||||
|
||||
## معايير التقييم
|
||||
**الطول:**
|
||||
- يجب أن يكون الشرح لكل أداة من 2-3 جمل.
|
||||
|
||||
## المعيار
|
||||
|
||||
ممتاز | مقبول | يحتاج إلى تحسين
|
||||
--- | --- | --- |
|
||||
| تم شرح سبب استخدام مطور الويب للأداة | تم شرح كيفية الاستخدام، ولكن لم يتم توضيح السبب | لم يتم ذكر كيفية أو سبب استخدام مطور الويب للأداة |
|
||||
--- | --- | -- |
|
||||
شرح لماذا قد يستخدم مطور الويب الأداة | شرح كيف، ولكن ليس لماذا قد يستخدم المطور الأداة | لم يذكر كيف أو لماذا قد يستخدم المطور الأداة |
|
||||
|
||||
---
|
||||
|
||||
**إخلاء المسؤولية**:
|
||||
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.
|
||||
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
|
||||
@ -1,23 +1,41 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "9d4d75af51aaccfe9af778f792c62919",
|
||||
"translation_date": "2025-08-25T21:29:06+00:00",
|
||||
"original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
|
||||
"translation_date": "2025-10-03T08:38:36+00:00",
|
||||
"source_file": "3-terrarium/2-intro-to-css/assignment.md",
|
||||
"language_code": "ar"
|
||||
}
|
||||
-->
|
||||
# إعادة هيكلة CSS
|
||||
# مهمة إعادة هيكلة CSS
|
||||
|
||||
## الهدف
|
||||
|
||||
إعادة هيكلة مشروع التيراريوم باستخدام **Flexbox** أو **CSS Grid** لتنسيق التصميم. قم بتحديث HTML و CSS حسب الحاجة لتحقيق تصميم حديث ومتجاوب. لا تحتاج إلى تنفيذ العناصر القابلة للسحب—ركز فقط على التنسيق والتصميم.
|
||||
|
||||
## التعليمات
|
||||
|
||||
قم بإعادة تصميم التيراريوم باستخدام إما Flexbox أو CSS Grid، والتقط لقطات شاشة لتظهر أنك اختبرت التصميم على عدة متصفحات. قد تحتاج إلى تعديل العلامات، لذا قم بإنشاء نسخة جديدة من التطبيق مع الفن في مكانه لإعادة الهيكلة. لا تقلق بشأن جعل العناصر قابلة للسحب؛ فقط قم بإعادة هيكلة HTML وCSS في الوقت الحالي.
|
||||
1. **قم بإنشاء نسخة جديدة** من تطبيق التيراريوم. قم بتحديث التعليمات البرمجية لـ HTML و CSS لاستخدام Flexbox أو CSS Grid لتنسيق التصميم.
|
||||
2. **تأكد من أن الفن والعناصر موجودة** كما في النسخة الأصلية.
|
||||
3. **اختبر تصميمك** في متصفحين مختلفين على الأقل (مثل Chrome، Firefox، Edge).
|
||||
4. **التقط لقطات شاشة** لتطبيق التيراريوم في كل متصفح لإظهار التوافق بين المتصفحات.
|
||||
5. **قم بتقديم** التعليمات البرمجية المحدثة ولقطات الشاشة.
|
||||
|
||||
## معايير التقييم
|
||||
|
||||
| المعايير | ممتاز | مقبول | يحتاج إلى تحسين |
|
||||
|------------|-----------------------------------------------------------------------|------------------------------------|--------------------------------------|
|
||||
| التنسيق | إعادة هيكلة كاملة باستخدام Flexbox أو CSS Grid؛ تصميم جذاب ومتجاوب | إعادة هيكلة جزئية؛ استخدام محدود لـ Flexbox أو Grid | عدم استخدام Flexbox أو Grid؛ التصميم غير محدث |
|
||||
| التوافق بين المتصفحات | تقديم لقطات شاشة لعدة متصفحات؛ مظهر متناسق | لقطات شاشة لمتصفح واحد؛ اختلافات طفيفة | عدم تقديم لقطات شاشة أو وجود اختلافات كبيرة |
|
||||
| جودة الكود | HTML/CSS منظم ونظيف؛ تعليقات واضحة | تنظيم جزئي؛ تعليقات قليلة | كود غير منظم؛ يفتقر إلى التعليقات |
|
||||
|
||||
## نصائح
|
||||
|
||||
## المعيار
|
||||
- راجع [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) و [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) للحصول على إرشادات.
|
||||
- استخدم أدوات المطور في المتصفح لاختبار التوافق.
|
||||
- قم بإضافة تعليقات إلى الكود لتوضيح الأفكار.
|
||||
|
||||
| المعايير | مثالي | مقبول | يحتاج إلى تحسين |
|
||||
| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
|
||||
| | تقديم تيراريوم معاد تصميمه بالكامل باستخدام Flexbox أو CSS Grid | إعادة تصميم بعض العناصر | الفشل في إعادة تصميم التيراريوم تمامًا |
|
||||
---
|
||||
|
||||
**إخلاء المسؤولية**:
|
||||
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
|
||||
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
|
||||
@ -0,0 +1,415 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
|
||||
"translation_date": "2025-10-03T11:14:41+00:00",
|
||||
"source_file": "AGENTS.md",
|
||||
"language_code": "ar"
|
||||
}
|
||||
-->
|
||||
# AGENTS.md
|
||||
|
||||
## نظرة عامة على المشروع
|
||||
|
||||
هذا مستودع منهجي تعليمي لتعليم أساسيات تطوير الويب للمبتدئين. المنهج عبارة عن دورة شاملة لمدة 12 أسبوعًا تم تطويرها بواسطة Microsoft Cloud Advocates، ويشمل 24 درسًا عمليًا يغطي JavaScript وCSS وHTML.
|
||||
|
||||
### المكونات الرئيسية
|
||||
|
||||
- **المحتوى التعليمي**: 24 درسًا منظمًا في وحدات قائمة على المشاريع
|
||||
- **المشاريع العملية**: Terrarium، لعبة الكتابة، إضافة المتصفح، لعبة الفضاء، تطبيق البنك، محرر الأكواد، ومساعد الدردشة بالذكاء الاصطناعي
|
||||
- **الاختبارات التفاعلية**: 48 اختبارًا يحتوي كل منها على 3 أسئلة (تقييمات قبل وبعد الدرس)
|
||||
- **دعم متعدد اللغات**: ترجمات تلقائية لأكثر من 50 لغة عبر GitHub Actions
|
||||
- **التقنيات**: HTML، CSS، JavaScript، Vue.js 3، Vite، Node.js، Express، Python (للمشاريع المتعلقة بالذكاء الاصطناعي)
|
||||
|
||||
### الهيكلية
|
||||
|
||||
- مستودع تعليمي مع هيكلية قائمة على الدروس
|
||||
- يحتوي كل مجلد درس على README، أمثلة أكواد، وحلول
|
||||
- مشاريع مستقلة في أدلة منفصلة (quiz-app، مشاريع الدروس المختلفة)
|
||||
- نظام ترجمة باستخدام GitHub Actions (co-op-translator)
|
||||
- الوثائق تُعرض عبر Docsify ومتاحة كملف PDF
|
||||
|
||||
## أوامر الإعداد
|
||||
|
||||
هذا المستودع مخصص بشكل أساسي لاستهلاك المحتوى التعليمي. للعمل مع مشاريع محددة:
|
||||
|
||||
### إعداد المستودع الرئيسي
|
||||
|
||||
```bash
|
||||
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
|
||||
cd Web-Dev-For-Beginners
|
||||
```
|
||||
|
||||
### إعداد تطبيق الاختبارات (Vue 3 + Vite)
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm install
|
||||
npm run dev # Start development server
|
||||
npm run build # Build for production
|
||||
npm run lint # Run ESLint
|
||||
```
|
||||
|
||||
### إعداد واجهة برمجة تطبيقات البنك (Node.js + Express)
|
||||
|
||||
```bash
|
||||
cd 7-bank-project/api
|
||||
npm install
|
||||
npm start # Start API server
|
||||
npm run lint # Run ESLint
|
||||
npm run format # Format with Prettier
|
||||
```
|
||||
|
||||
### مشاريع إضافات المتصفح
|
||||
|
||||
```bash
|
||||
cd 5-browser-extension/solution
|
||||
npm install
|
||||
# Follow browser-specific extension loading instructions
|
||||
```
|
||||
|
||||
### مشاريع لعبة الفضاء
|
||||
|
||||
```bash
|
||||
cd 6-space-game/solution
|
||||
npm install
|
||||
# Open index.html in browser or use Live Server
|
||||
```
|
||||
|
||||
### مشروع الدردشة (Python Backend)
|
||||
|
||||
```bash
|
||||
cd 9-chat-project/solution/backend/python
|
||||
pip install openai
|
||||
# Set GITHUB_TOKEN environment variable
|
||||
python api.py
|
||||
```
|
||||
|
||||
## سير العمل التطويري
|
||||
|
||||
### للمساهمين في المحتوى
|
||||
|
||||
1. **قم بعمل Fork للمستودع** إلى حساب GitHub الخاص بك
|
||||
2. **قم باستنساخ النسخة الخاصة بك** محليًا
|
||||
3. **أنشئ فرعًا جديدًا** للتعديلات الخاصة بك
|
||||
4. قم بإجراء تغييرات على محتوى الدروس أو أمثلة الأكواد
|
||||
5. اختبر أي تغييرات في الأكواد في أدلة المشاريع ذات الصلة
|
||||
6. قدم طلبات السحب وفقًا لإرشادات المساهمة
|
||||
|
||||
### للمتعلمين
|
||||
|
||||
1. قم بعمل Fork أو استنساخ المستودع
|
||||
2. انتقل إلى أدلة الدروس بالتسلسل
|
||||
3. اقرأ ملفات README لكل درس
|
||||
4. أكمل اختبارات ما قبل الدرس على https://ff-quizzes.netlify.app/web/
|
||||
5. اعمل على أمثلة الأكواد في مجلدات الدروس
|
||||
6. أكمل المهام والتحديات
|
||||
7. قم بأداء اختبارات ما بعد الدرس
|
||||
|
||||
### التطوير المباشر
|
||||
|
||||
- **الوثائق**: قم بتشغيل `docsify serve` في الجذر (المنفذ 3000)
|
||||
- **تطبيق الاختبارات**: قم بتشغيل `npm run dev` في دليل quiz-app
|
||||
- **المشاريع**: استخدم إضافة Live Server في VS Code لمشاريع HTML
|
||||
- **مشاريع واجهة برمجة التطبيقات**: قم بتشغيل `npm start` في أدلة واجهة برمجة التطبيقات ذات الصلة
|
||||
|
||||
## تعليمات الاختبار
|
||||
|
||||
### اختبار تطبيق الاختبارات
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm run lint # Check for code style issues
|
||||
npm run build # Verify build succeeds
|
||||
```
|
||||
|
||||
### اختبار واجهة برمجة تطبيقات البنك
|
||||
|
||||
```bash
|
||||
cd 7-bank-project/api
|
||||
npm run lint # Check for code style issues
|
||||
node server.js # Verify server starts without errors
|
||||
```
|
||||
|
||||
### نهج الاختبار العام
|
||||
|
||||
- هذا مستودع تعليمي بدون اختبارات آلية شاملة
|
||||
- يركز الاختبار اليدوي على:
|
||||
- تشغيل أمثلة الأكواد بدون أخطاء
|
||||
- عمل الروابط في الوثائق بشكل صحيح
|
||||
- اكتمال بناء المشاريع بنجاح
|
||||
- اتباع الأمثلة لأفضل الممارسات
|
||||
|
||||
### الفحوصات قبل التقديم
|
||||
|
||||
- قم بتشغيل `npm run lint` في الأدلة التي تحتوي على package.json
|
||||
- تحقق من صحة روابط Markdown
|
||||
- اختبر أمثلة الأكواد في المتصفح أو Node.js
|
||||
- تأكد من أن الترجمات تحافظ على الهيكل الصحيح
|
||||
|
||||
## إرشادات نمط الأكواد
|
||||
|
||||
### JavaScript
|
||||
|
||||
- استخدم صيغة ES6+ الحديثة
|
||||
- اتبع تكوينات ESLint القياسية المقدمة في المشاريع
|
||||
- استخدم أسماء متغيرات ووظائف ذات معنى لتوضيح التعليم
|
||||
- أضف تعليقات تشرح المفاهيم للمتعلمين
|
||||
- قم بالتنسيق باستخدام Prettier حيث تم تكوينه
|
||||
|
||||
### HTML/CSS
|
||||
|
||||
- عناصر HTML5 دلالية
|
||||
- مبادئ التصميم المتجاوب
|
||||
- اتفاقيات تسمية واضحة للفئات
|
||||
- تعليقات تشرح تقنيات CSS للمتعلمين
|
||||
|
||||
### Python
|
||||
|
||||
- إرشادات نمط PEP 8
|
||||
- أمثلة أكواد واضحة وتعليمية
|
||||
- تلميحات النوع حيث تكون مفيدة للتعلم
|
||||
|
||||
### وثائق Markdown
|
||||
|
||||
- تسلسل واضح للعناوين
|
||||
- كتل الأكواد مع تحديد اللغة
|
||||
- روابط إلى موارد إضافية
|
||||
- لقطات وصور في أدلة `images/`
|
||||
- نص بديل للصور لتحسين الوصول
|
||||
|
||||
### تنظيم الملفات
|
||||
|
||||
- الدروس مرقمة بالتسلسل (1-getting-started-lessons، 2-js-basics، إلخ)
|
||||
- يحتوي كل مشروع على `solution/` وغالبًا `start/` أو `your-work/` أدلة
|
||||
- الصور مخزنة في مجلدات `images/` الخاصة بالدروس
|
||||
- الترجمات في هيكل `translations/{language-code}/`
|
||||
|
||||
## البناء والنشر
|
||||
|
||||
### نشر تطبيق الاختبارات (Azure Static Web Apps)
|
||||
|
||||
تم تكوين quiz-app للنشر عبر Azure Static Web Apps:
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm run build # Creates dist/ folder
|
||||
# Deploys via GitHub Actions workflow on push to main
|
||||
```
|
||||
|
||||
تكوين Azure Static Web Apps:
|
||||
- **موقع التطبيق**: `/quiz-app`
|
||||
- **موقع الإخراج**: `dist`
|
||||
- **سير العمل**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
|
||||
|
||||
### إنشاء وثائق PDF
|
||||
|
||||
```bash
|
||||
npm install # Install docsify-to-pdf
|
||||
npm run convert # Generate PDF from docs
|
||||
```
|
||||
|
||||
### وثائق Docsify
|
||||
|
||||
```bash
|
||||
npm install -g docsify-cli # Install Docsify globally
|
||||
docsify serve # Serve on localhost:3000
|
||||
```
|
||||
|
||||
### عمليات بناء المشاريع المحددة
|
||||
|
||||
قد يحتوي كل دليل مشروع على عملية بناء خاصة به:
|
||||
- مشاريع Vue: `npm run build` لإنشاء حزم الإنتاج
|
||||
- المشاريع الثابتة: لا توجد خطوة بناء، قم بخدمة الملفات مباشرة
|
||||
|
||||
## إرشادات طلب السحب
|
||||
|
||||
### تنسيق العنوان
|
||||
|
||||
استخدم عناوين واضحة وواصفة تشير إلى منطقة التغيير:
|
||||
- `[Quiz-app] إضافة اختبار جديد للدرس X`
|
||||
- `[Lesson-3] إصلاح خطأ في مشروع terrarium`
|
||||
- `[Translation] إضافة ترجمة إسبانية للدرس 5`
|
||||
- `[Docs] تحديث تعليمات الإعداد`
|
||||
|
||||
### الفحوصات المطلوبة
|
||||
|
||||
قبل تقديم طلب السحب:
|
||||
|
||||
1. **جودة الأكواد**:
|
||||
- قم بتشغيل `npm run lint` في أدلة المشاريع المتأثرة
|
||||
- أصلح جميع أخطاء وتحذيرات التحقق
|
||||
|
||||
2. **التحقق من البناء**:
|
||||
- قم بتشغيل `npm run build` إذا كان ذلك ممكنًا
|
||||
- تأكد من عدم وجود أخطاء في البناء
|
||||
|
||||
3. **التحقق من الروابط**:
|
||||
- اختبر جميع روابط Markdown
|
||||
- تحقق من عمل مراجع الصور
|
||||
|
||||
4. **مراجعة المحتوى**:
|
||||
- قم بمراجعة الأخطاء الإملائية والنحوية
|
||||
- تأكد من صحة أمثلة الأكواد وتعليمها
|
||||
- تحقق من أن الترجمات تحافظ على المعنى الأصلي
|
||||
|
||||
### متطلبات المساهمة
|
||||
|
||||
- الموافقة على Microsoft CLA (التحقق الآلي عند أول طلب سحب)
|
||||
- اتباع [مدونة قواعد السلوك المفتوحة المصدر من Microsoft](https://opensource.microsoft.com/codeofconduct/)
|
||||
- راجع [CONTRIBUTING.md](./CONTRIBUTING.md) للحصول على إرشادات مفصلة
|
||||
- أشر إلى أرقام القضايا في وصف طلب السحب إذا كان ذلك ممكنًا
|
||||
|
||||
### عملية المراجعة
|
||||
|
||||
- يتم مراجعة طلبات السحب بواسطة المشرفين والمجتمع
|
||||
- يتم إعطاء الأولوية للوضوح التعليمي
|
||||
- يجب أن تتبع أمثلة الأكواد أفضل الممارسات الحالية
|
||||
- يتم مراجعة الترجمات للتأكد من دقتها وملاءمتها الثقافية
|
||||
|
||||
## نظام الترجمة
|
||||
|
||||
### الترجمة التلقائية
|
||||
|
||||
- يستخدم GitHub Actions مع سير عمل co-op-translator
|
||||
- يترجم تلقائيًا إلى أكثر من 50 لغة
|
||||
- الملفات المصدر في الأدلة الرئيسية
|
||||
- الملفات المترجمة في هيكل `translations/{language-code}/`
|
||||
|
||||
### إضافة تحسينات الترجمة اليدوية
|
||||
|
||||
1. حدد الملف في `translations/{language-code}/`
|
||||
2. قم بإجراء تحسينات مع الحفاظ على الهيكل
|
||||
3. تأكد من أن أمثلة الأكواد تظل وظيفية
|
||||
4. اختبر أي محتوى اختبارات محلي
|
||||
|
||||
### بيانات الترجمة الوصفية
|
||||
|
||||
تتضمن الملفات المترجمة رأس بيانات وصفية:
|
||||
```markdown
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "...",
|
||||
"translation_date": "...",
|
||||
"source_file": "...",
|
||||
"language_code": "..."
|
||||
}
|
||||
-->
|
||||
```
|
||||
|
||||
## تصحيح الأخطاء واستكشاف المشكلات
|
||||
|
||||
### المشكلات الشائعة
|
||||
|
||||
**فشل تشغيل تطبيق الاختبارات**:
|
||||
- تحقق من إصدار Node.js (يوصى بـ v14+)
|
||||
- احذف `node_modules` و`package-lock.json`، ثم قم بتشغيل `npm install` مرة أخرى
|
||||
- تحقق من تعارض المنافذ (الافتراضي: يستخدم Vite المنفذ 5173)
|
||||
|
||||
**فشل تشغيل خادم واجهة برمجة التطبيقات**:
|
||||
- تحقق من أن إصدار Node.js يلبي الحد الأدنى (node >=10)
|
||||
- تحقق مما إذا كان المنفذ قيد الاستخدام بالفعل
|
||||
- تأكد من تثبيت جميع التبعيات باستخدام `npm install`
|
||||
|
||||
**فشل تحميل إضافة المتصفح**:
|
||||
- تحقق من أن manifest.json تم تنسيقه بشكل صحيح
|
||||
- تحقق من أخطاء وحدة التحكم في المتصفح
|
||||
- اتبع تعليمات تثبيت الإضافة الخاصة بالمتصفح
|
||||
|
||||
**مشكلات مشروع الدردشة Python**:
|
||||
- تأكد من تثبيت حزمة OpenAI: `pip install openai`
|
||||
- تحقق من تعيين متغير البيئة GITHUB_TOKEN
|
||||
- تحقق من أذونات الوصول إلى نماذج GitHub
|
||||
|
||||
**Docsify لا يعرض الوثائق**:
|
||||
- قم بتثبيت docsify-cli عالميًا: `npm install -g docsify-cli`
|
||||
- قم بتشغيله من دليل الجذر للمستودع
|
||||
- تحقق من وجود `docs/_sidebar.md`
|
||||
|
||||
### نصائح بيئة التطوير
|
||||
|
||||
- استخدم VS Code مع إضافة Live Server لمشاريع HTML
|
||||
- قم بتثبيت إضافات ESLint وPrettier للتنسيق المتسق
|
||||
- استخدم أدوات DevTools في المتصفح لتصحيح أخطاء JavaScript
|
||||
- لمشاريع Vue، قم بتثبيت إضافة Vue DevTools للمتصفح
|
||||
|
||||
### اعتبارات الأداء
|
||||
|
||||
- العدد الكبير من الملفات المترجمة (50+ لغة) يعني أن النسخ الكامل كبير
|
||||
- استخدم النسخ الضحل إذا كنت تعمل فقط على المحتوى: `git clone --depth 1`
|
||||
- استبعد الترجمات من عمليات البحث عند العمل على المحتوى باللغة الإنجليزية
|
||||
- قد تكون عمليات البناء بطيئة في التشغيل الأول (npm install، Vite build)
|
||||
|
||||
## اعتبارات الأمان
|
||||
|
||||
### متغيرات البيئة
|
||||
|
||||
- يجب ألا يتم الالتزام بمفاتيح واجهة برمجة التطبيقات إلى المستودع
|
||||
- استخدم ملفات `.env` (موجودة بالفعل في `.gitignore`)
|
||||
- قم بتوثيق متغيرات البيئة المطلوبة في ملفات README الخاصة بالمشاريع
|
||||
|
||||
### مشاريع Python
|
||||
|
||||
- استخدم البيئات الافتراضية: `python -m venv venv`
|
||||
- حافظ على تحديث التبعيات
|
||||
- يجب أن تحتوي رموز الوصول إلى GitHub على الحد الأدنى من الأذونات المطلوبة
|
||||
|
||||
### الوصول إلى نماذج GitHub
|
||||
|
||||
- مطلوب رموز الوصول الشخصي (PAT) لنماذج GitHub
|
||||
- يجب تخزين الرموز كمتغيرات بيئة
|
||||
- لا تقم أبدًا بالالتزام بالرموز أو بيانات الاعتماد
|
||||
|
||||
## ملاحظات إضافية
|
||||
|
||||
### الجمهور المستهدف
|
||||
|
||||
- المبتدئين تمامًا في تطوير الويب
|
||||
- الطلاب والمتعلمين ذاتيًا
|
||||
- المعلمون الذين يستخدمون المنهج في الفصول الدراسية
|
||||
- المحتوى مصمم ليكون سهل الوصول وبناء المهارات تدريجيًا
|
||||
|
||||
### فلسفة التعليم
|
||||
|
||||
- نهج التعلم القائم على المشاريع
|
||||
- فحوصات المعرفة المتكررة (اختبارات)
|
||||
- تمارين البرمجة العملية
|
||||
- أمثلة تطبيقية من العالم الحقيقي
|
||||
- التركيز على الأساسيات قبل الإطارات
|
||||
|
||||
### صيانة المستودع
|
||||
|
||||
- مجتمع نشط من المتعلمين والمساهمين
|
||||
- تحديثات منتظمة للتبعيات والمحتوى
|
||||
- يتم مراقبة القضايا والمناقشات بواسطة المشرفين
|
||||
- تحديثات الترجمة تلقائية عبر GitHub Actions
|
||||
|
||||
### الموارد ذات الصلة
|
||||
|
||||
- [وحدات Microsoft Learn](https://docs.microsoft.com/learn/)
|
||||
- [موارد مركز الطلاب](https://docs.microsoft.com/learn/student-hub/)
|
||||
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) موصى به للمتعلمين
|
||||
- دورات إضافية: الذكاء الاصطناعي التوليدي، علم البيانات، التعلم الآلي، مناهج إنترنت الأشياء متاحة
|
||||
|
||||
### العمل مع مشاريع محددة
|
||||
|
||||
للحصول على تعليمات مفصلة حول المشاريع الفردية، راجع ملفات README في:
|
||||
- `quiz-app/README.md` - تطبيق الاختبارات Vue 3
|
||||
- `7-bank-project/README.md` - تطبيق البنك مع المصادقة
|
||||
- `5-browser-extension/README.md` - تطوير إضافات المتصفح
|
||||
- `6-space-game/README.md` - تطوير الألعاب القائمة على Canvas
|
||||
- `9-chat-project/README.md` - مشروع مساعد الدردشة بالذكاء الاصطناعي
|
||||
|
||||
### هيكلية Monorepo
|
||||
|
||||
على الرغم من أنه ليس مستودعًا تقليديًا متعدد المشاريع، يحتوي هذا المستودع على مشاريع مستقلة متعددة:
|
||||
- كل درس مكتفٍ ذاتيًا
|
||||
- المشاريع لا تشترك في التبعيات
|
||||
- العمل على المشاريع الفردية دون التأثير على الآخرين
|
||||
- استنساخ المستودع بالكامل لتجربة المنهج الكامل
|
||||
|
||||
---
|
||||
|
||||
**إخلاء المسؤولية**:
|
||||
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
|
||||
@ -1,23 +1,31 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "1ce4deaec80130d3a0a3c906568459fc",
|
||||
"translation_date": "2025-08-25T23:14:20+00:00",
|
||||
"original_hash": "9e2f84e351a6fcb44bfc4066d98525f0",
|
||||
"translation_date": "2025-10-03T09:14:51+00:00",
|
||||
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
|
||||
"language_code": "bn"
|
||||
}
|
||||
-->
|
||||
# ডকুমেন্ট পড়া
|
||||
|
||||
## নির্দেশাবলী
|
||||
|
||||
ওয়েব ডেভেলপারের জন্য অনেক দরকারী টুল রয়েছে যা [ক্লায়েন্ট-সাইড টুলিংয়ের জন্য MDN ডকুমেন্টেশন](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)-এ পাওয়া যায়। পাঠে আলোচনা করা হয়নি এমন ৩টি টুল নির্বাচন করুন, ব্যাখ্যা করুন কেন একটি ওয়েব ডেভেলপার এটি ব্যবহার করবেন, এবং এই ক্যাটাগরির অধীনে একটি টুল খুঁজে তার ডকুমেন্টেশন শেয়ার করুন। MDN ডকুমেন্টেশনে উল্লেখিত একই টুল উদাহরণ ব্যবহার করবেন না।
|
||||
ওয়েব ডেভেলপারদের জন্য প্রয়োজনীয় অনেক টুল [MDN ডকুমেন্টেশনে ক্লায়েন্ট-সাইড টুলিং](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)-এ তালিকাভুক্ত রয়েছে। এই পাঠে আলোচনা করা হয়নি এমন **তিনটি টুল** নির্বাচন করুন (পাঠের বিষয়বস্তু বা নির্দিষ্ট টুল বাদ দিয়ে), ব্যাখ্যা করুন **কেন** একটি ওয়েব ডেভেলপার এই টুল ব্যবহার করবেন এবং প্রতিটি বিভাগে একটি টুল খুঁজে বের করুন। প্রতিটির জন্য, এর অফিসিয়াল ডকুমেন্টেশনের একটি লিঙ্ক শেয়ার করুন (MDN-এ ব্যবহৃত উদাহরণ নয়)।
|
||||
|
||||
**ফরম্যাট:**
|
||||
- টুলের নাম
|
||||
- কেন একটি ওয়েব ডেভেলপার এটি ব্যবহার করবেন (২-৩টি বাক্য)
|
||||
- ডকুমেন্টেশনের লিঙ্ক
|
||||
|
||||
## মূল্যায়ন মানদণ্ড
|
||||
**দৈর্ঘ্য:**
|
||||
- প্রতিটি ব্যাখ্যা ২-৩টি বাক্যের মধ্যে হওয়া উচিত।
|
||||
|
||||
উদাহরণস্বরূপ | পর্যাপ্ত | উন্নতির প্রয়োজন
|
||||
## মূল্যায়ন
|
||||
|
||||
উৎকৃষ্ট | পর্যাপ্ত | উন্নতির প্রয়োজন
|
||||
--- | --- | -- |
|
||||
| কেন ওয়েব ডেভেলপার টুলটি ব্যবহার করবেন তা ব্যাখ্যা করা হয়েছে | কিভাবে ব্যবহার করবেন তা ব্যাখ্যা করা হয়েছে, কিন্তু কেন ব্যবহার করবেন তা উল্লেখ করা হয়নি | কিভাবে বা কেন ডেভেলপার টুলটি ব্যবহার করবেন তা উল্লেখ করা হয়নি |
|
||||
কেন ওয়েব ডেভেলপার টুল ব্যবহার করবেন তা ব্যাখ্যা করা হয়েছে | কীভাবে ব্যবহার করবেন তা ব্যাখ্যা করা হয়েছে, কিন্তু কেন ব্যবহার করবেন তা উল্লেখ করা হয়নি | কীভাবে বা কেন ব্যবহার করবেন তা উল্লেখ করা হয়নি |
|
||||
|
||||
---
|
||||
|
||||
**অস্বীকৃতি**:
|
||||
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতা নিশ্চিত করার চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না।
|
||||
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না।
|
||||
@ -1,23 +1,25 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "3869244ceda606c4969d8cdd82679867",
|
||||
"translation_date": "2025-08-25T21:57:32+00:00",
|
||||
"original_hash": "de0ec12c337394806425c7fd2f003b62",
|
||||
"translation_date": "2025-10-03T09:12:53+00:00",
|
||||
"source_file": "2-js-basics/1-data-types/assignment.md",
|
||||
"language_code": "bn"
|
||||
}
|
||||
-->
|
||||
# ডেটা টাইপ অনুশীলন
|
||||
|
||||
## নির্দেশাবলী
|
||||
## নির্দেশনা
|
||||
|
||||
ধরুন আপনি একটি শপিং কার্ট তৈরি করছেন। সেই অভিজ্ঞতা সম্পূর্ণ করতে আপনার যেসব ডেটা টাইপ প্রয়োজন হবে, সেগুলোর উপর কিছু ডকুমেন্টেশন লিখুন। আপনি কীভাবে আপনার পছন্দগুলোতে পৌঁছালেন তা ব্যাখ্যা করুন।
|
||||
ধরুন আপনি একটি শপিং কার্ট তৈরি করছেন। আপনার শপিং অভিজ্ঞতা সম্পূর্ণ করতে যে ডেটা টাইপগুলো প্রয়োজন হবে, তার উপর ডকুমেন্টেশন লিখুন। প্রতিটি ডেটা টাইপের জন্য ব্যাখ্যা করুন কীভাবে এবং কেন আপনি এটি ব্যবহার করবেন, এবং একটি উদাহরণ দিন। জাভাস্ক্রিপ্টের ছয়টি ডেটা টাইপ হলো: String, Number, Boolean, Null, Undefined, এবং Object।
|
||||
|
||||
## মূল্যায়ন
|
||||
|
||||
মানদণ্ড | চমৎকার | পর্যাপ্ত | উন্নতির প্রয়োজন
|
||||
--- | --- | --- | --- |
|
||||
||ছয়টি ডেটা টাইপ তালিকাভুক্ত এবং বিস্তারিতভাবে ব্যাখ্যা করা হয়েছে, তাদের ব্যবহার ডকুমেন্ট করা হয়েছে|চারটি ডেটা টাইপ ব্যাখ্যা করা হয়েছে|দুটি ডেটা টাইপ ব্যাখ্যা করা হয়েছে|
|
||||
ডেটা টাইপ | ছয়টি ডেটা টাইপই তালিকাভুক্ত, বিস্তারিতভাবে ব্যাখ্যা করা হয়েছে এবং উদাহরণসহ ডকুমেন্ট করা হয়েছে | চারটি ডেটা টাইপ ব্যাখ্যা করা হয়েছে কিছুটা বিশ্লেষণ সহ | দুইটি ডেটা টাইপ ব্যাখ্যা করা হয়েছে ন্যূনতম বিশ্লেষণ সহ |
|
||||
|
||||
---
|
||||
|
||||
**অস্বীকৃতি**:
|
||||
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। এর মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না।
|
||||
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না।
|
||||
@ -1,23 +1,41 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "9d4d75af51aaccfe9af778f792c62919",
|
||||
"translation_date": "2025-08-25T21:29:24+00:00",
|
||||
"original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
|
||||
"translation_date": "2025-10-03T09:14:58+00:00",
|
||||
"source_file": "3-terrarium/2-intro-to-css/assignment.md",
|
||||
"language_code": "bn"
|
||||
}
|
||||
-->
|
||||
# CSS পুনর্গঠন
|
||||
# CSS রিফ্যাক্টরিং অ্যাসাইনমেন্ট
|
||||
|
||||
## লক্ষ্য
|
||||
|
||||
**Flexbox** বা **CSS Grid** ব্যবহার করে টেরারিয়াম প্রকল্পের লেআউট রিফ্যাক্টর করুন। আধুনিক, রেসপন্সিভ ডিজাইন অর্জনের জন্য HTML এবং CSS আপডেট করুন। আপনাকে ড্র্যাগযোগ্য উপাদানগুলি বাস্তবায়ন করতে হবে না—শুধুমাত্র লেআউট এবং স্টাইলিংয়ে মনোযোগ দিন।
|
||||
|
||||
## নির্দেশনা
|
||||
|
||||
Flexbox বা CSS Grid ব্যবহার করে টেরারিয়ামটি পুনরায় স্টাইল করুন এবং বিভিন্ন ব্রাউজারে এটি পরীক্ষা করার স্ক্রিনশট নিন। আপনাকে মার্কআপ পরিবর্তন করতে হতে পারে, তাই আপনার পুনর্গঠনের জন্য অ্যাপটির একটি নতুন সংস্করণ তৈরি করুন যেখানে শিল্পকর্মটি সঠিকভাবে স্থাপন করা হয়েছে। উপাদানগুলোকে ড্র্যাগযোগ্য করার চিন্তা করবেন না; আপাতত শুধুমাত্র HTML এবং CSS পুনর্গঠন করুন।
|
||||
1. **টেরারিয়াম অ্যাপের একটি নতুন সংস্করণ তৈরি করুন।** লেআউটের জন্য Flexbox বা CSS Grid ব্যবহার করতে মার্কআপ এবং CSS আপডেট করুন।
|
||||
2. **শিল্পকর্ম এবং উপাদানগুলি সঠিকভাবে স্থাপন করুন** যেন এগুলো মূল সংস্করণের মতো থাকে।
|
||||
3. **আপনার ডিজাইন পরীক্ষা করুন** অন্তত দুটি ভিন্ন ব্রাউজারে (যেমন, Chrome, Firefox, Edge)।
|
||||
4. **প্রতিটি ব্রাউজারে আপনার টেরারিয়ামের স্ক্রিনশট নিন** ক্রস-ব্রাউজার সামঞ্জস্য প্রদর্শনের জন্য।
|
||||
5. **আপডেট করা কোড এবং স্ক্রিনশট জমা দিন।**
|
||||
|
||||
## মূল্যায়ন
|
||||
|
||||
| মানদণ্ড | চমৎকার | পর্যাপ্ত | উন্নতির প্রয়োজন |
|
||||
| -------- | ------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
|
||||
| | Flexbox বা CSS Grid ব্যবহার করে সম্পূর্ণ পুনরায় স্টাইল করা টেরারিয়াম উপস্থাপন করুন | কয়েকটি উপাদান পুনরায় স্টাইল করুন | টেরারিয়াম পুনরায় স্টাইল করতে ব্যর্থ |
|
||||
| মানদণ্ড | চমৎকার | পর্যাপ্ত | উন্নতির প্রয়োজন |
|
||||
|------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
|
||||
| লেআউট | Flexbox বা CSS Grid ব্যবহার করে সম্পূর্ণ রিফ্যাক্টর করা; দৃষ্টিনন্দন এবং রেসপন্সিভ | কিছু উপাদান রিফ্যাক্টর করা; Flexbox বা Grid আংশিকভাবে ব্যবহার করা | Flexbox বা Grid সামান্য বা একেবারেই ব্যবহার করা হয়নি; লেআউট অপরিবর্তিত |
|
||||
| ক্রস-ব্রাউজার | একাধিক ব্রাউজারের জন্য স্ক্রিনশট প্রদান করা হয়েছে; সামঞ্জস্যপূর্ণ চেহারা | একটি ব্রাউজারের স্ক্রিনশট; ছোটখাটো অসামঞ্জস্য | স্ক্রিনশট নেই বা বড় অসামঞ্জস্য |
|
||||
| কোডের গুণমান | পরিষ্কার, সুসংগঠিত HTML/CSS; স্পষ্ট মন্তব্য | কিছুটা সংগঠিত; কয়েকটি মন্তব্য | বিশৃঙ্খল কোড; মন্তব্যের অভাব |
|
||||
|
||||
## টিপস
|
||||
|
||||
- [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) এবং [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) গাইড পর্যালোচনা করুন।
|
||||
- রেসপন্সিভনেস পরীক্ষা করতে ব্রাউজারের ডেভেলপার টুল ব্যবহার করুন।
|
||||
- কোডের স্পষ্টতার জন্য মন্তব্য যোগ করুন।
|
||||
|
||||
---
|
||||
|
||||
**অস্বীকৃতি**:
|
||||
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা তার জন্য দায়ী থাকব না।
|
||||
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না।
|
||||
@ -0,0 +1,415 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
|
||||
"translation_date": "2025-10-03T11:20:50+00:00",
|
||||
"source_file": "AGENTS.md",
|
||||
"language_code": "bn"
|
||||
}
|
||||
-->
|
||||
# AGENTS.md
|
||||
|
||||
## প্রকল্পের সংক্ষিপ্ত বিবরণ
|
||||
|
||||
এটি ওয়েব ডেভেলপমেন্টের মৌলিক বিষয় শেখানোর জন্য একটি শিক্ষামূলক কারিকুলাম রিপোজিটরি। কারিকুলামটি মাইক্রোসফট ক্লাউড অ্যাডভোকেটদের দ্বারা তৈরি একটি ১২-সপ্তাহের কোর্স, যেখানে জাভাস্ক্রিপ্ট, CSS এবং HTML নিয়ে ২৪টি হাতে-কলমে শেখার পাঠ অন্তর্ভুক্ত রয়েছে।
|
||||
|
||||
### প্রধান উপাদানসমূহ
|
||||
|
||||
- **শিক্ষামূলক বিষয়বস্তু**: প্রকল্পভিত্তিক মডিউলে সংগঠিত ২৪টি কাঠামোগত পাঠ
|
||||
- **প্রায়োগিক প্রকল্পসমূহ**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, এবং AI Chat Assistant
|
||||
- **ইন্টারঅ্যাকটিভ কুইজ**: ৪৮টি কুইজ, প্রতিটিতে ৩টি প্রশ্ন (পাঠের আগে/পরে মূল্যায়ন)
|
||||
- **বহুভাষা সমর্থন**: GitHub Actions এর মাধ্যমে ৫০+ ভাষায় স্বয়ংক্রিয় অনুবাদ
|
||||
- **প্রযুক্তি**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI প্রকল্পের জন্য)
|
||||
|
||||
### স্থাপত্য
|
||||
|
||||
- পাঠভিত্তিক কাঠামো সহ শিক্ষামূলক রিপোজিটরি
|
||||
- প্রতিটি পাঠের ফোল্ডারে README, কোড উদাহরণ এবং সমাধান অন্তর্ভুক্ত
|
||||
- পৃথক ডিরেক্টরিতে স্বতন্ত্র প্রকল্প (quiz-app, বিভিন্ন পাঠ প্রকল্প)
|
||||
- GitHub Actions ব্যবহার করে অনুবাদ ব্যবস্থা (co-op-translator)
|
||||
- Docsify এর মাধ্যমে ডকুমেন্টেশন পরিবেশন এবং PDF আকারে উপলব্ধ
|
||||
|
||||
## সেটআপ কমান্ডসমূহ
|
||||
|
||||
এই রিপোজিটরি মূলত শিক্ষামূলক বিষয়বস্তু ব্যবহারের জন্য। নির্দিষ্ট প্রকল্প নিয়ে কাজ করার জন্য:
|
||||
|
||||
### প্রধান রিপোজিটরি সেটআপ
|
||||
|
||||
```bash
|
||||
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
|
||||
cd Web-Dev-For-Beginners
|
||||
```
|
||||
|
||||
### কুইজ অ্যাপ সেটআপ (Vue 3 + Vite)
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm install
|
||||
npm run dev # Start development server
|
||||
npm run build # Build for production
|
||||
npm run lint # Run ESLint
|
||||
```
|
||||
|
||||
### ব্যাংক প্রকল্প API (Node.js + Express)
|
||||
|
||||
```bash
|
||||
cd 7-bank-project/api
|
||||
npm install
|
||||
npm start # Start API server
|
||||
npm run lint # Run ESLint
|
||||
npm run format # Format with Prettier
|
||||
```
|
||||
|
||||
### ব্রাউজার এক্সটেনশন প্রকল্পসমূহ
|
||||
|
||||
```bash
|
||||
cd 5-browser-extension/solution
|
||||
npm install
|
||||
# Follow browser-specific extension loading instructions
|
||||
```
|
||||
|
||||
### স্পেস গেম প্রকল্পসমূহ
|
||||
|
||||
```bash
|
||||
cd 6-space-game/solution
|
||||
npm install
|
||||
# Open index.html in browser or use Live Server
|
||||
```
|
||||
|
||||
### চ্যাট প্রকল্প (Python Backend)
|
||||
|
||||
```bash
|
||||
cd 9-chat-project/solution/backend/python
|
||||
pip install openai
|
||||
# Set GITHUB_TOKEN environment variable
|
||||
python api.py
|
||||
```
|
||||
|
||||
## ডেভেলপমেন্ট ওয়ার্কফ্লো
|
||||
|
||||
### বিষয়বস্তু অবদানকারীদের জন্য
|
||||
|
||||
1. **রিপোজিটরি ফর্ক করুন** আপনার GitHub অ্যাকাউন্টে
|
||||
2. **আপনার ফর্ক লোকালি ক্লোন করুন**
|
||||
3. **আপনার পরিবর্তনের জন্য একটি নতুন ব্রাঞ্চ তৈরি করুন**
|
||||
4. পাঠের বিষয়বস্তু বা কোড উদাহরণে পরিবর্তন করুন
|
||||
5. সংশ্লিষ্ট প্রকল্প ডিরেক্টরিতে কোড পরিবর্তন পরীক্ষা করুন
|
||||
6. অবদান নির্দেশিকা অনুসরণ করে পুল রিকোয়েস্ট জমা দিন
|
||||
|
||||
### শিক্ষার্থীদের জন্য
|
||||
|
||||
1. রিপোজিটরি ফর্ক বা ক্লোন করুন
|
||||
2. ক্রমানুসারে পাঠের ডিরেক্টরিতে যান
|
||||
3. প্রতিটি পাঠের README ফাইল পড়ুন
|
||||
4. https://ff-quizzes.netlify.app/web/ এ প্রি-লেসন কুইজ সম্পন্ন করুন
|
||||
5. পাঠের ফোল্ডারে কোড উদাহরণ নিয়ে কাজ করুন
|
||||
6. অ্যাসাইনমেন্ট এবং চ্যালেঞ্জ সম্পন্ন করুন
|
||||
7. পোস্ট-লেসন কুইজ নিন
|
||||
|
||||
### লাইভ ডেভেলপমেন্ট
|
||||
|
||||
- **ডকুমেন্টেশন**: রুটে `docsify serve` চালান (পোর্ট ৩০০০)
|
||||
- **কুইজ অ্যাপ**: quiz-app ডিরেক্টরিতে `npm run dev` চালান
|
||||
- **প্রকল্পসমূহ**: HTML প্রকল্পের জন্য VS Code Live Server এক্সটেনশন ব্যবহার করুন
|
||||
- **API প্রকল্পসমূহ**: সংশ্লিষ্ট API ডিরেক্টরিতে `npm start` চালান
|
||||
|
||||
## পরীক্ষার নির্দেশনা
|
||||
|
||||
### কুইজ অ্যাপ পরীক্ষা
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm run lint # Check for code style issues
|
||||
npm run build # Verify build succeeds
|
||||
```
|
||||
|
||||
### ব্যাংক API পরীক্ষা
|
||||
|
||||
```bash
|
||||
cd 7-bank-project/api
|
||||
npm run lint # Check for code style issues
|
||||
node server.js # Verify server starts without errors
|
||||
```
|
||||
|
||||
### সাধারণ পরীক্ষার পদ্ধতি
|
||||
|
||||
- এটি একটি শিক্ষামূলক রিপোজিটরি, যেখানে ব্যাপক স্বয়ংক্রিয় পরীক্ষা নেই
|
||||
- ম্যানুয়াল পরীক্ষার লক্ষ্য:
|
||||
- কোড উদাহরণগুলো ত্রুটি ছাড়াই চলা
|
||||
- ডকুমেন্টেশনের লিঙ্কগুলো সঠিকভাবে কাজ করা
|
||||
- প্রকল্প বিল্ড সফলভাবে সম্পন্ন হওয়া
|
||||
- উদাহরণগুলো সেরা অনুশীলন অনুসরণ করা
|
||||
|
||||
### প্রি-সাবমিশন চেক
|
||||
|
||||
- `npm run lint` চালান প্যাকেজ.json থাকা ডিরেক্টরিতে
|
||||
- নিশ্চিত করুন যে মার্কডাউন লিঙ্কগুলো বৈধ
|
||||
- ব্রাউজার বা Node.js এ কোড উদাহরণ পরীক্ষা করুন
|
||||
- নিশ্চিত করুন যে অনুবাদ সঠিক কাঠামো বজায় রেখেছে
|
||||
|
||||
## কোড স্টাইল নির্দেশিকা
|
||||
|
||||
### জাভাস্ক্রিপ্ট
|
||||
|
||||
- আধুনিক ES6+ সিনট্যাক্স ব্যবহার করুন
|
||||
- প্রকল্পে প্রদত্ত স্ট্যান্ডার্ড ESLint কনফিগারেশন অনুসরণ করুন
|
||||
- শিক্ষামূলক স্পষ্টতার জন্য অর্থবহ ভেরিয়েবল এবং ফাংশন নাম ব্যবহার করুন
|
||||
- শিক্ষার্থীদের জন্য ধারণা ব্যাখ্যা করতে মন্তব্য যোগ করুন
|
||||
- যেখানে কনফিগার করা আছে, Prettier ব্যবহার করে ফরম্যাট করুন
|
||||
|
||||
### HTML/CSS
|
||||
|
||||
- সেমান্টিক HTML5 এলিমেন্ট
|
||||
- রেসপন্সিভ ডিজাইন নীতিমালা
|
||||
- স্পষ্ট ক্লাস নামকরণ কনভেনশন
|
||||
- শিক্ষার্থীদের জন্য CSS কৌশল ব্যাখ্যা করতে মন্তব্য যোগ করুন
|
||||
|
||||
### পাইথন
|
||||
|
||||
- PEP 8 স্টাইল নির্দেশিকা
|
||||
- স্পষ্ট, শিক্ষামূলক কোড উদাহরণ
|
||||
- শিক্ষার জন্য সহায়ক টাইপ হিন্ট যোগ করুন
|
||||
|
||||
### মার্কডাউন ডকুমেন্টেশন
|
||||
|
||||
- স্পষ্ট শিরোনাম শ্রেণিবিন্যাস
|
||||
- ভাষা নির্দিষ্টকরণ সহ কোড ব্লক
|
||||
- অতিরিক্ত সম্পদের লিঙ্ক
|
||||
- `images/` ডিরেক্টরিতে স্ক্রিনশট এবং ছবি
|
||||
- অ্যাক্সেসিবিলিটির জন্য ছবির জন্য Alt টেক্সট
|
||||
|
||||
### ফাইল সংগঠন
|
||||
|
||||
- পাঠগুলো ক্রমানুসারে নম্বরযুক্ত (1-getting-started-lessons, 2-js-basics, ইত্যাদি)
|
||||
- প্রতিটি প্রকল্পে `solution/` এবং প্রায়ই `start/` বা `your-work/` ডিরেক্টরি থাকে
|
||||
- পাঠ-নির্দিষ্ট `images/` ফোল্ডারে ছবি সংরক্ষণ
|
||||
- `translations/{language-code}/` কাঠামোতে অনুবাদ
|
||||
|
||||
## বিল্ড এবং ডিপ্লয়মেন্ট
|
||||
|
||||
### কুইজ অ্যাপ ডিপ্লয়মেন্ট (Azure Static Web Apps)
|
||||
|
||||
কুইজ-অ্যাপ Azure Static Web Apps ডিপ্লয়মেন্টের জন্য কনফিগার করা হয়েছে:
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm run build # Creates dist/ folder
|
||||
# Deploys via GitHub Actions workflow on push to main
|
||||
```
|
||||
|
||||
Azure Static Web Apps কনফিগারেশন:
|
||||
- **অ্যাপ লোকেশন**: `/quiz-app`
|
||||
- **আউটপুট লোকেশন**: `dist`
|
||||
- **ওয়ার্কফ্লো**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
|
||||
|
||||
### ডকুমেন্টেশন PDF তৈরি
|
||||
|
||||
```bash
|
||||
npm install # Install docsify-to-pdf
|
||||
npm run convert # Generate PDF from docs
|
||||
```
|
||||
|
||||
### Docsify ডকুমেন্টেশন
|
||||
|
||||
```bash
|
||||
npm install -g docsify-cli # Install Docsify globally
|
||||
docsify serve # Serve on localhost:3000
|
||||
```
|
||||
|
||||
### প্রকল্প-নির্দিষ্ট বিল্ড
|
||||
|
||||
প্রতিটি প্রকল্প ডিরেক্টরির নিজস্ব বিল্ড প্রক্রিয়া থাকতে পারে:
|
||||
- Vue প্রকল্প: `npm run build` প্রোডাকশন বান্ডেল তৈরি করে
|
||||
- স্ট্যাটিক প্রকল্প: কোনো বিল্ড ধাপ নেই, সরাসরি ফাইল পরিবেশন করুন
|
||||
|
||||
## পুল রিকোয়েস্ট নির্দেশিকা
|
||||
|
||||
### শিরোনাম ফরম্যাট
|
||||
|
||||
পরিবর্তনের ক্ষেত্র নির্দেশ করে স্পষ্ট, বর্ণনামূলক শিরোনাম ব্যবহার করুন:
|
||||
- `[Quiz-app] Add new quiz for lesson X`
|
||||
- `[Lesson-3] Fix typo in terrarium project`
|
||||
- `[Translation] Add Spanish translation for lesson 5`
|
||||
- `[Docs] Update setup instructions`
|
||||
|
||||
### প্রয়োজনীয় চেক
|
||||
|
||||
PR জমা দেওয়ার আগে:
|
||||
|
||||
1. **কোডের গুণমান**:
|
||||
- প্রভাবিত প্রকল্প ডিরেক্টরিতে `npm run lint` চালান
|
||||
- সমস্ত লিন্টিং ত্রুটি এবং সতর্কতা ঠিক করুন
|
||||
|
||||
2. **বিল্ড যাচাইকরণ**:
|
||||
- প্রযোজ্য হলে `npm run build` চালান
|
||||
- নিশ্চিত করুন যে কোনো বিল্ড ত্রুটি নেই
|
||||
|
||||
3. **লিঙ্ক যাচাইকরণ**:
|
||||
- সমস্ত মার্কডাউন লিঙ্ক পরীক্ষা করুন
|
||||
- নিশ্চিত করুন যে ছবির রেফারেন্স কাজ করছে
|
||||
|
||||
4. **বিষয়বস্তু পর্যালোচনা**:
|
||||
- বানান এবং ব্যাকরণ যাচাই করুন
|
||||
- নিশ্চিত করুন যে কোড উদাহরণ সঠিক এবং শিক্ষামূলক
|
||||
- নিশ্চিত করুন যে অনুবাদ মূল অর্থ বজায় রেখেছে
|
||||
|
||||
### অবদান প্রয়োজনীয়তা
|
||||
|
||||
- Microsoft CLA-তে সম্মতি দিন (প্রথম PR-এ স্বয়ংক্রিয় চেক)
|
||||
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) অনুসরণ করুন
|
||||
- বিস্তারিত নির্দেশিকার জন্য [CONTRIBUTING.md](./CONTRIBUTING.md) দেখুন
|
||||
- প্রযোজ্য হলে PR বিবরণে ইস্যু নম্বর উল্লেখ করুন
|
||||
|
||||
### পর্যালোচনা প্রক্রিয়া
|
||||
|
||||
- PR গুলো রক্ষণাবেক্ষণকারী এবং সম্প্রদায় দ্বারা পর্যালোচনা করা হয়
|
||||
- শিক্ষামূলক স্পষ্টতাকে অগ্রাধিকার দেওয়া হয়
|
||||
- কোড উদাহরণগুলো বর্তমান সেরা অনুশীলন অনুসরণ করা উচিত
|
||||
- অনুবাদগুলো সঠিকতা এবং সাংস্কৃতিক উপযুক্ততার জন্য পর্যালোচনা করা হয়
|
||||
|
||||
## অনুবাদ ব্যবস্থা
|
||||
|
||||
### স্বয়ংক্রিয় অনুবাদ
|
||||
|
||||
- co-op-translator ওয়ার্কফ্লো সহ GitHub Actions ব্যবহার করে
|
||||
- স্বয়ংক্রিয়ভাবে ৫০+ ভাষায় অনুবাদ করে
|
||||
- মূল ফাইলগুলো প্রধান ডিরেক্টরিতে
|
||||
- অনুবাদকৃত ফাইলগুলো `translations/{language-code}/` ডিরেক্টরিতে
|
||||
|
||||
### ম্যানুয়াল অনুবাদ উন্নতি যোগ করা
|
||||
|
||||
1. `translations/{language-code}/` এ ফাইলটি খুঁজুন
|
||||
2. কাঠামো বজায় রেখে উন্নতি করুন
|
||||
3. নিশ্চিত করুন যে কোড উদাহরণ কার্যকর থাকে
|
||||
4. স্থানীয় কুইজ বিষয়বস্তু পরীক্ষা করুন
|
||||
|
||||
### অনুবাদ মেটাডেটা
|
||||
|
||||
অনুবাদকৃত ফাইলগুলোতে মেটাডেটা হেডার অন্তর্ভুক্ত থাকে:
|
||||
```markdown
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "...",
|
||||
"translation_date": "...",
|
||||
"source_file": "...",
|
||||
"language_code": "..."
|
||||
}
|
||||
-->
|
||||
```
|
||||
|
||||
## ডিবাগিং এবং সমস্যা সমাধান
|
||||
|
||||
### সাধারণ সমস্যা
|
||||
|
||||
**কুইজ অ্যাপ চালু হচ্ছে না**:
|
||||
- Node.js সংস্করণ পরীক্ষা করুন (v14+ সুপারিশকৃত)
|
||||
- `node_modules` এবং `package-lock.json` মুছে ফেলুন, পুনরায় `npm install` চালান
|
||||
- পোর্ট কনফ্লিক্ট পরীক্ষা করুন (ডিফল্ট: Vite পোর্ট 5173 ব্যবহার করে)
|
||||
|
||||
**API সার্ভার চালু হচ্ছে না**:
|
||||
- নিশ্চিত করুন যে Node.js সংস্করণ ন্যূনতম প্রয়োজনীয়তা পূরণ করছে (node >=10)
|
||||
- পরীক্ষা করুন পোর্ট ইতিমধ্যে ব্যবহৃত হচ্ছে কিনা
|
||||
- `npm install` দিয়ে সমস্ত ডিপেনডেন্সি ইনস্টল নিশ্চিত করুন
|
||||
|
||||
**ব্রাউজার এক্সটেনশন লোড হচ্ছে না**:
|
||||
- নিশ্চিত করুন manifest.json সঠিকভাবে ফরম্যাট করা আছে
|
||||
- ব্রাউজার কনসোলে ত্রুটি পরীক্ষা করুন
|
||||
- ব্রাউজার-নির্দিষ্ট এক্সটেনশন ইনস্টল নির্দেশিকা অনুসরণ করুন
|
||||
|
||||
**পাইথন চ্যাট প্রকল্প সমস্যা**:
|
||||
- নিশ্চিত করুন OpenAI প্যাকেজ ইনস্টল করা আছে: `pip install openai`
|
||||
- নিশ্চিত করুন GITHUB_TOKEN পরিবেশ ভেরিয়েবল সেট করা আছে
|
||||
- GitHub Models অ্যাক্সেস অনুমতি পরীক্ষা করুন
|
||||
|
||||
**Docsify ডকস পরিবেশন করছে না**:
|
||||
- Docsify-cli গ্লোবালি ইনস্টল করুন: `npm install -g docsify-cli`
|
||||
- রিপোজিটরি রুট ডিরেক্টরি থেকে চালান
|
||||
- নিশ্চিত করুন যে `docs/_sidebar.md` বিদ্যমান
|
||||
|
||||
### ডেভেলপমেন্ট পরিবেশ টিপস
|
||||
|
||||
- HTML প্রকল্পের জন্য VS Code এর Live Server এক্সটেনশন ব্যবহার করুন
|
||||
- ধারাবাহিক ফরম্যাটিংয়ের জন্য ESLint এবং Prettier এক্সটেনশন ইনস্টল করুন
|
||||
- জাভাস্ক্রিপ্ট ডিবাগিংয়ের জন্য ব্রাউজার DevTools ব্যবহার করুন
|
||||
- Vue প্রকল্পের জন্য Vue DevTools ব্রাউজার এক্সটেনশন ইনস্টল করুন
|
||||
|
||||
### কর্মক্ষমতা বিবেচনা
|
||||
|
||||
- অনুবাদকৃত ফাইলের বড় সংখ্যা (৫০+ ভাষা) মানে সম্পূর্ণ ক্লোন বড় হয়
|
||||
- শুধুমাত্র বিষয়বস্তু নিয়ে কাজ করলে শ্যালো ক্লোন ব্যবহার করুন: `git clone --depth 1`
|
||||
- ইংরেজি বিষয়বস্তু নিয়ে কাজ করার সময় অনুবাদগুলো অনুসন্ধান থেকে বাদ দিন
|
||||
- প্রথম রান (npm install, Vite build) এ বিল্ড প্রক্রিয়া ধীর হতে পারে
|
||||
|
||||
## নিরাপত্তা বিবেচনা
|
||||
|
||||
### পরিবেশ ভেরিয়েবল
|
||||
|
||||
- API কী কখনোই রিপোজিটরিতে কমিট করা উচিত নয়
|
||||
- `.env` ফাইল ব্যবহার করুন (ইতিমধ্যে `.gitignore` এ অন্তর্ভুক্ত)
|
||||
- প্রকল্প README-তে প্রয়োজনীয় পরিবেশ ভেরিয়েবল ডকুমেন্ট করুন
|
||||
|
||||
### পাইথন প্রকল্প
|
||||
|
||||
- ভার্চুয়াল পরিবেশ ব্যবহার করুন: `python -m venv venv`
|
||||
- ডিপেনডেন্সি আপডেট রাখুন
|
||||
- GitHub টোকেনের ন্যূনতম প্রয়োজনীয় অনুমতি থাকা উচিত
|
||||
|
||||
### GitHub Models অ্যাক্সেস
|
||||
|
||||
- GitHub Models এর জন্য Personal Access Tokens (PAT) প্রয়োজন
|
||||
- টোকেনগুলো পরিবেশ ভেরিয়েবল হিসেবে সংরক্ষণ করা উচিত
|
||||
- কখনোই টোকেন বা ক্রেডেনশিয়াল কমিট করবেন না
|
||||
|
||||
## অতিরিক্ত নোট
|
||||
|
||||
### লক্ষ্য শ্রোতা
|
||||
|
||||
- ওয়েব ডেভেলপমেন্টে সম্পূর্ণ নতুন
|
||||
- শিক্ষার্থী এবং স্ব-শিক্ষার্থী
|
||||
- শিক্ষক যারা শ্রেণীকক্ষে কারিকুলাম ব্যবহার করছেন
|
||||
- বিষয়বস্তু অ্যাক্সেসিবিলিটি এবং ধাপে ধাপে দক্ষতা বৃদ্ধির জন্য ডিজাইন করা হয়েছে
|
||||
|
||||
### শিক্ষামূলক দর্শন
|
||||
|
||||
- প্রকল্পভিত্তিক শেখার পদ্ধতি
|
||||
- ঘন ঘন জ্ঞান যাচাই (কুইজ)
|
||||
- হাতে-কলমে কোডিং অনুশীলন
|
||||
- বাস্তব জীবনের প্রয়োগ উদাহরণ
|
||||
- ফ্রেমওয়ার্কের আগে মৌলিক বিষয়গুলোর উপর জোর
|
||||
|
||||
### রিপোজিটরি রক্ষণাবেক্ষণ
|
||||
|
||||
- শিক্ষার্থী এবং অবদানকারীদের সক্রিয় সম্প্রদায়
|
||||
- ডিপেনডেন্সি এবং বিষয়বস্তুতে নিয়মিত আপডেট
|
||||
- রক্ষণাবেক্ষণকারী দ্বারা ইস্যু এবং আলোচনা পর্যবেক্ষণ
|
||||
- GitHub Actions এর মাধ্যমে অনুবাদ আপডেট স্বয়ংক্রিয়
|
||||
|
||||
### সম্পর্কিত সম্পদ
|
||||
|
||||
- [Microsoft Learn মডিউল](https://docs.microsoft.com/learn/)
|
||||
- [Student Hub সম্পদ](https://docs.microsoft.com/learn/student-hub/)
|
||||
- শিক্ষার্থীদের জন্য [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) সুপারিশকৃত
|
||||
- অতিরিক্ত কোর্স: Generative AI, Data Science, ML, IoT কারিকুলাম উপলব্ধ
|
||||
|
||||
### নির্দিষ্ট প্রকল্প নিয়ে কাজ করা
|
||||
|
||||
স্বতন্ত্র প্রকল্পের বিস্তারিত নির্দেশনার জন্য, README ফাইলগুলো দেখুন:
|
||||
- `quiz-app/README.md` - Vue 3 কুইজ অ্যাপ্লিকেশন
|
||||
- `7-bank-project/README.md` - প্রমাণীকরণ সহ ব্যাংকিং অ্যাপ্লিকেশন
|
||||
- `5-browser-extension/README.md` - ব্রাউজার এক্সটেনশন ডেভেলপমেন্ট
|
||||
- `6-space-game/README.md` - ক্যানভাস-ভিত্তিক গেম ডেভেলপমেন্ট
|
||||
- `9-chat-project/README.md` - AI চ্যাট অ্যাসিস্ট্যান্ট প্রকল্প
|
||||
|
||||
### Monorepo কাঠামো
|
||||
|
||||
যদিও এটি একটি ঐতিহ্যবাহী Monorepo নয়, এই রিপোজিটরিতে একাধিক স্বতন্ত্র প্রকল্প রয়েছে:
|
||||
- প্রতিটি পাঠ স্বতন্ত্র
|
||||
- প্রকল্পগুলো ডিপেনডেন্সি শেয়ার করে না
|
||||
- স্বতন্ত্র প্রকল্পে কাজ করুন অন্যগুলো প্রভাবিত না করে
|
||||
- সম্পূর্ণ কারিকুলাম অভিজ্ঞতার জন্য পুরো রিপোজিটরি ক্লোন করুন
|
||||
|
||||
---
|
||||
|
||||
**অস্বীকৃতি**:
|
||||
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না।
|
||||
@ -1,23 +1,31 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "1ce4deaec80130d3a0a3c906568459fc",
|
||||
"translation_date": "2025-08-25T23:14:49+00:00",
|
||||
"original_hash": "9e2f84e351a6fcb44bfc4066d98525f0",
|
||||
"translation_date": "2025-10-03T09:34:57+00:00",
|
||||
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
|
||||
"language_code": "br"
|
||||
}
|
||||
-->
|
||||
# Lendo a Documentação
|
||||
|
||||
## Instruções
|
||||
|
||||
Existem muitas ferramentas que um desenvolvedor web pode precisar que estão na [documentação MDN sobre ferramentas do lado do cliente](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selecione 3 ferramentas que não foram abordadas na lição, explique por que um desenvolvedor web as utilizaria e procure uma ferramenta que se enquadre nessa categoria e compartilhe sua documentação. Não utilize o mesmo exemplo de ferramenta mencionado na documentação MDN.
|
||||
Existem muitas ferramentas que um desenvolvedor web pode precisar, listadas na [documentação MDN sobre ferramentas do lado do cliente](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selecione **três ferramentas** que **não estão abordadas nesta lição** (excluindo [listar ferramentas específicas ou referir-se ao conteúdo da lição]), explique **por que** um desenvolvedor web usaria cada ferramenta e encontre uma ferramenta que se encaixe em cada categoria. Para cada uma, compartilhe um link para sua documentação oficial (não o exemplo usado no MDN).
|
||||
|
||||
**Formato:**
|
||||
- Nome da ferramenta
|
||||
- Por que um desenvolvedor web usaria (2-3 frases)
|
||||
- Link para a documentação
|
||||
|
||||
**Extensão:**
|
||||
- Cada explicação deve ter 2-3 frases.
|
||||
|
||||
## Rubrica
|
||||
|
||||
Exemplar | Adequado | Precisa Melhorar
|
||||
--- | --- | -- |
|
||||
|Explicou por que o desenvolvedor web utilizaria a ferramenta| Explicou como, mas não por que o desenvolvedor utilizaria a ferramenta| Não mencionou como ou por que um desenvolvedor utilizaria a ferramenta |
|
||||
Exemplar | Adequado | Precisa de Melhorias
|
||||
--- | --- | --- |
|
||||
Explicou por que o desenvolvedor web usaria a ferramenta | Explicou como, mas não por que o desenvolvedor usaria a ferramenta | Não mencionou como ou por que um desenvolvedor usaria a ferramenta |
|
||||
|
||||
---
|
||||
|
||||
**Aviso Legal**:
|
||||
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução.
|
||||
@ -1,23 +1,41 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "9d4d75af51aaccfe9af778f792c62919",
|
||||
"translation_date": "2025-08-25T21:29:53+00:00",
|
||||
"original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
|
||||
"translation_date": "2025-10-03T09:35:03+00:00",
|
||||
"source_file": "3-terrarium/2-intro-to-css/assignment.md",
|
||||
"language_code": "br"
|
||||
}
|
||||
-->
|
||||
# Refatoração de CSS
|
||||
# Tarefa de Refatoração de CSS
|
||||
|
||||
## Objetivo
|
||||
|
||||
Refatore o projeto do terrário para usar **Flexbox** ou **CSS Grid** na organização do layout. Atualize o HTML e o CSS conforme necessário para alcançar um design moderno e responsivo. Não é necessário implementar elementos arrastáveis—foco apenas no layout e no estilo.
|
||||
|
||||
## Instruções
|
||||
|
||||
Redefina o estilo do terrário usando Flexbox ou CSS Grid e tire capturas de tela para mostrar que você testou em vários navegadores. Pode ser necessário alterar o markup, então crie uma nova versão do aplicativo com a arte no lugar para sua refatoração. Não se preocupe em tornar os elementos arrastáveis; por enquanto, apenas refatore o HTML e o CSS.
|
||||
1. **Crie uma nova versão** do aplicativo de terrário. Atualize o HTML e o CSS para utilizar Flexbox ou CSS Grid no layout.
|
||||
2. **Certifique-se de que a arte e os elementos estejam no lugar** como na versão original.
|
||||
3. **Teste seu design** em pelo menos dois navegadores diferentes (ex.: Chrome, Firefox, Edge).
|
||||
4. **Tire capturas de tela** do seu terrário em cada navegador para demonstrar a compatibilidade entre navegadores.
|
||||
5. **Envie** seu código atualizado e as capturas de tela.
|
||||
|
||||
## Critérios de Avaliação
|
||||
|
||||
| Critério | Exemplar | Adequado | Necessita Melhorias |
|
||||
|------------------|-------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
|
||||
| Layout | Totalmente refatorado usando Flexbox ou CSS Grid; visualmente atraente e responsivo | Alguns elementos refatorados; uso parcial de Flexbox ou Grid | Pouco ou nenhum uso de Flexbox ou Grid; layout inalterado |
|
||||
| Compatibilidade | Capturas de tela fornecidas para vários navegadores; aparência consistente | Capturas de tela para um navegador; pequenas inconsistências | Sem capturas de tela ou grandes inconsistências |
|
||||
| Qualidade do Código | HTML/CSS limpo e bem organizado; comentários claros | Alguma organização; poucos comentários | Código desorganizado; sem comentários |
|
||||
|
||||
## Dicas
|
||||
|
||||
## Rubrica
|
||||
- Revise os guias de [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) e [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/).
|
||||
- Use as ferramentas de desenvolvedor do navegador para testar a responsividade.
|
||||
- Comente seu código para maior clareza.
|
||||
|
||||
| Critério | Exemplary | Adequado | Precisa Melhorar |
|
||||
| --------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
|
||||
| | Apresente um terrário completamente reestilizado usando Flexbox ou CSS Grid | Reestilize alguns dos elementos | Não reestilize o terrário de forma alguma |
|
||||
---
|
||||
|
||||
**Aviso Legal**:
|
||||
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução.
|
||||
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução.
|
||||
@ -0,0 +1,415 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
|
||||
"translation_date": "2025-10-03T11:25:01+00:00",
|
||||
"source_file": "AGENTS.md",
|
||||
"language_code": "br"
|
||||
}
|
||||
-->
|
||||
# AGENTS.md
|
||||
|
||||
## Visão Geral do Projeto
|
||||
|
||||
Este é um repositório de currículo educacional para ensinar fundamentos de desenvolvimento web a iniciantes. O currículo é um curso abrangente de 12 semanas desenvolvido pelos Microsoft Cloud Advocates, com 24 aulas práticas que abordam JavaScript, CSS e HTML.
|
||||
|
||||
### Componentes Principais
|
||||
|
||||
- **Conteúdo Educacional**: 24 aulas estruturadas organizadas em módulos baseados em projetos
|
||||
- **Projetos Práticos**: Terrário, Jogo de Digitação, Extensão de Navegador, Jogo Espacial, Aplicativo Bancário, Editor de Código e Assistente de Chat com IA
|
||||
- **Quizzes Interativos**: 48 quizzes com 3 perguntas cada (avaliações pré/pós-aula)
|
||||
- **Suporte Multilíngue**: Traduções automáticas para mais de 50 idiomas via GitHub Actions
|
||||
- **Tecnologias**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (para projetos de IA)
|
||||
|
||||
### Arquitetura
|
||||
|
||||
- Repositório educacional com estrutura baseada em aulas
|
||||
- Cada pasta de aula contém README, exemplos de código e soluções
|
||||
- Projetos independentes em diretórios separados (quiz-app, vários projetos de aula)
|
||||
- Sistema de tradução usando GitHub Actions (co-op-translator)
|
||||
- Documentação servida via Docsify e disponível em PDF
|
||||
|
||||
## Comandos de Configuração
|
||||
|
||||
Este repositório é principalmente para consumo de conteúdo educacional. Para trabalhar com projetos específicos:
|
||||
|
||||
### Configuração do Repositório Principal
|
||||
|
||||
```bash
|
||||
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
|
||||
cd Web-Dev-For-Beginners
|
||||
```
|
||||
|
||||
### Configuração do Quiz App (Vue 3 + Vite)
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm install
|
||||
npm run dev # Start development server
|
||||
npm run build # Build for production
|
||||
npm run lint # Run ESLint
|
||||
```
|
||||
|
||||
### API do Projeto Bancário (Node.js + Express)
|
||||
|
||||
```bash
|
||||
cd 7-bank-project/api
|
||||
npm install
|
||||
npm start # Start API server
|
||||
npm run lint # Run ESLint
|
||||
npm run format # Format with Prettier
|
||||
```
|
||||
|
||||
### Projetos de Extensão de Navegador
|
||||
|
||||
```bash
|
||||
cd 5-browser-extension/solution
|
||||
npm install
|
||||
# Follow browser-specific extension loading instructions
|
||||
```
|
||||
|
||||
### Projetos de Jogo Espacial
|
||||
|
||||
```bash
|
||||
cd 6-space-game/solution
|
||||
npm install
|
||||
# Open index.html in browser or use Live Server
|
||||
```
|
||||
|
||||
### Projeto de Chat (Backend em Python)
|
||||
|
||||
```bash
|
||||
cd 9-chat-project/solution/backend/python
|
||||
pip install openai
|
||||
# Set GITHUB_TOKEN environment variable
|
||||
python api.py
|
||||
```
|
||||
|
||||
## Fluxo de Trabalho de Desenvolvimento
|
||||
|
||||
### Para Contribuidores de Conteúdo
|
||||
|
||||
1. **Faça um fork do repositório** na sua conta do GitHub
|
||||
2. **Clone o fork** localmente
|
||||
3. **Crie uma nova branch** para suas alterações
|
||||
4. Faça alterações no conteúdo das aulas ou nos exemplos de código
|
||||
5. Teste quaisquer alterações de código nos diretórios de projetos relevantes
|
||||
6. Envie pull requests seguindo as diretrizes de contribuição
|
||||
|
||||
### Para Estudantes
|
||||
|
||||
1. Faça um fork ou clone do repositório
|
||||
2. Navegue pelos diretórios das aulas sequencialmente
|
||||
3. Leia os arquivos README de cada aula
|
||||
4. Complete os quizzes pré-aula em https://ff-quizzes.netlify.app/web/
|
||||
5. Trabalhe nos exemplos de código nas pastas das aulas
|
||||
6. Complete os exercícios e desafios
|
||||
7. Faça os quizzes pós-aula
|
||||
|
||||
### Desenvolvimento ao Vivo
|
||||
|
||||
- **Documentação**: Execute `docsify serve` na raiz (porta 3000)
|
||||
- **Quiz App**: Execute `npm run dev` no diretório quiz-app
|
||||
- **Projetos**: Use a extensão Live Server do VS Code para projetos HTML
|
||||
- **Projetos de API**: Execute `npm start` nos diretórios de API correspondentes
|
||||
|
||||
## Instruções de Teste
|
||||
|
||||
### Teste do Quiz App
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm run lint # Check for code style issues
|
||||
npm run build # Verify build succeeds
|
||||
```
|
||||
|
||||
### Teste da API Bancária
|
||||
|
||||
```bash
|
||||
cd 7-bank-project/api
|
||||
npm run lint # Check for code style issues
|
||||
node server.js # Verify server starts without errors
|
||||
```
|
||||
|
||||
### Abordagem Geral de Teste
|
||||
|
||||
- Este é um repositório educacional sem testes automatizados abrangentes
|
||||
- O teste manual foca em:
|
||||
- Exemplos de código executando sem erros
|
||||
- Links na documentação funcionando corretamente
|
||||
- Builds dos projetos concluindo com sucesso
|
||||
- Exemplos seguindo boas práticas
|
||||
|
||||
### Verificações Antes de Submissão
|
||||
|
||||
- Execute `npm run lint` nos diretórios com package.json
|
||||
- Verifique se os links em markdown são válidos
|
||||
- Teste os exemplos de código no navegador ou Node.js
|
||||
- Certifique-se de que as traduções mantêm a estrutura adequada
|
||||
|
||||
## Diretrizes de Estilo de Código
|
||||
|
||||
### JavaScript
|
||||
|
||||
- Use sintaxe moderna ES6+
|
||||
- Siga as configurações padrão do ESLint fornecidas nos projetos
|
||||
- Use nomes de variáveis e funções significativos para clareza educacional
|
||||
- Adicione comentários explicando conceitos para os alunos
|
||||
- Formate usando Prettier onde configurado
|
||||
|
||||
### HTML/CSS
|
||||
|
||||
- Elementos semânticos do HTML5
|
||||
- Princípios de design responsivo
|
||||
- Convenções claras de nomenclatura de classes
|
||||
- Comentários explicando técnicas de CSS para os alunos
|
||||
|
||||
### Python
|
||||
|
||||
- Diretrizes de estilo PEP 8
|
||||
- Exemplos de código claros e educacionais
|
||||
- Dicas de tipo onde úteis para aprendizado
|
||||
|
||||
### Documentação em Markdown
|
||||
|
||||
- Hierarquia clara de títulos
|
||||
- Blocos de código com especificação de linguagem
|
||||
- Links para recursos adicionais
|
||||
- Capturas de tela e imagens em diretórios `images/`
|
||||
- Texto alternativo para imagens para acessibilidade
|
||||
|
||||
### Organização de Arquivos
|
||||
|
||||
- Aulas numeradas sequencialmente (1-getting-started-lessons, 2-js-basics, etc.)
|
||||
- Cada projeto tem diretórios `solution/` e frequentemente `start/` ou `your-work/`
|
||||
- Imagens armazenadas em pastas `images/` específicas de cada aula
|
||||
- Traduções na estrutura `translations/{language-code}/`
|
||||
|
||||
## Build e Implantação
|
||||
|
||||
### Implantação do Quiz App (Azure Static Web Apps)
|
||||
|
||||
O quiz-app está configurado para implantação no Azure Static Web Apps:
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm run build # Creates dist/ folder
|
||||
# Deploys via GitHub Actions workflow on push to main
|
||||
```
|
||||
|
||||
Configuração do Azure Static Web Apps:
|
||||
- **Localização do aplicativo**: `/quiz-app`
|
||||
- **Localização de saída**: `dist`
|
||||
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
|
||||
|
||||
### Geração de PDF da Documentação
|
||||
|
||||
```bash
|
||||
npm install # Install docsify-to-pdf
|
||||
npm run convert # Generate PDF from docs
|
||||
```
|
||||
|
||||
### Documentação Docsify
|
||||
|
||||
```bash
|
||||
npm install -g docsify-cli # Install Docsify globally
|
||||
docsify serve # Serve on localhost:3000
|
||||
```
|
||||
|
||||
### Builds Específicos de Projetos
|
||||
|
||||
Cada diretório de projeto pode ter seu próprio processo de build:
|
||||
- Projetos Vue: `npm run build` cria pacotes de produção
|
||||
- Projetos estáticos: Sem etapa de build, sirva os arquivos diretamente
|
||||
|
||||
## Diretrizes para Pull Requests
|
||||
|
||||
### Formato do Título
|
||||
|
||||
Use títulos claros e descritivos indicando a área de alteração:
|
||||
- `[Quiz-app] Adicionar novo quiz para aula X`
|
||||
- `[Lesson-3] Corrigir erro de digitação no projeto terrário`
|
||||
- `[Translation] Adicionar tradução para espanhol na aula 5`
|
||||
- `[Docs] Atualizar instruções de configuração`
|
||||
|
||||
### Verificações Necessárias
|
||||
|
||||
Antes de enviar um PR:
|
||||
|
||||
1. **Qualidade do Código**:
|
||||
- Execute `npm run lint` nos diretórios de projeto afetados
|
||||
- Corrija todos os erros e avisos de lint
|
||||
|
||||
2. **Verificação de Build**:
|
||||
- Execute `npm run build` se aplicável
|
||||
- Certifique-se de que não há erros de build
|
||||
|
||||
3. **Validação de Links**:
|
||||
- Teste todos os links em markdown
|
||||
- Verifique se as referências de imagens funcionam
|
||||
|
||||
4. **Revisão de Conteúdo**:
|
||||
- Revise para corrigir erros de ortografia e gramática
|
||||
- Certifique-se de que os exemplos de código estão corretos e educacionais
|
||||
- Verifique se as traduções mantêm o significado original
|
||||
|
||||
### Requisitos de Contribuição
|
||||
|
||||
- Concorde com o Microsoft CLA (verificação automatizada no primeiro PR)
|
||||
- Siga o [Código de Conduta de Código Aberto da Microsoft](https://opensource.microsoft.com/codeofconduct/)
|
||||
- Consulte [CONTRIBUTING.md](./CONTRIBUTING.md) para diretrizes detalhadas
|
||||
- Referencie números de issues na descrição do PR, se aplicável
|
||||
|
||||
### Processo de Revisão
|
||||
|
||||
- PRs revisados por mantenedores e pela comunidade
|
||||
- Clareza educacional é priorizada
|
||||
- Exemplos de código devem seguir as melhores práticas atuais
|
||||
- Traduções revisadas para precisão e adequação cultural
|
||||
|
||||
## Sistema de Tradução
|
||||
|
||||
### Tradução Automática
|
||||
|
||||
- Usa GitHub Actions com workflow co-op-translator
|
||||
- Traduções automáticas para mais de 50 idiomas
|
||||
- Arquivos fonte nos diretórios principais
|
||||
- Arquivos traduzidos em diretórios `translations/{language-code}/`
|
||||
|
||||
### Adicionando Melhorias Manuais à Tradução
|
||||
|
||||
1. Localize o arquivo em `translations/{language-code}/`
|
||||
2. Faça melhorias preservando a estrutura
|
||||
3. Certifique-se de que os exemplos de código permanecem funcionais
|
||||
4. Teste qualquer conteúdo de quiz localizado
|
||||
|
||||
### Metadados de Tradução
|
||||
|
||||
Arquivos traduzidos incluem cabeçalho de metadados:
|
||||
```markdown
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "...",
|
||||
"translation_date": "...",
|
||||
"source_file": "...",
|
||||
"language_code": "..."
|
||||
}
|
||||
-->
|
||||
```
|
||||
|
||||
## Depuração e Solução de Problemas
|
||||
|
||||
### Problemas Comuns
|
||||
|
||||
**Quiz app não inicia**:
|
||||
- Verifique a versão do Node.js (recomendado v14+)
|
||||
- Exclua `node_modules` e `package-lock.json`, execute `npm install` novamente
|
||||
- Verifique conflitos de porta (padrão: Vite usa porta 5173)
|
||||
|
||||
**Servidor de API não inicia**:
|
||||
- Verifique se a versão do Node.js atende ao mínimo (node >=10)
|
||||
- Verifique se a porta já está em uso
|
||||
- Certifique-se de que todas as dependências estão instaladas com `npm install`
|
||||
|
||||
**Extensão de navegador não carrega**:
|
||||
- Verifique se o manifest.json está formatado corretamente
|
||||
- Verifique o console do navegador para erros
|
||||
- Siga as instruções específicas do navegador para instalação de extensões
|
||||
|
||||
**Problemas no projeto de chat em Python**:
|
||||
- Certifique-se de que o pacote OpenAI está instalado: `pip install openai`
|
||||
- Verifique se a variável de ambiente GITHUB_TOKEN está configurada
|
||||
- Verifique as permissões de acesso aos modelos do GitHub
|
||||
|
||||
**Docsify não serve os documentos**:
|
||||
- Instale docsify-cli globalmente: `npm install -g docsify-cli`
|
||||
- Execute a partir do diretório raiz do repositório
|
||||
- Verifique se `docs/_sidebar.md` existe
|
||||
|
||||
### Dicas para Ambiente de Desenvolvimento
|
||||
|
||||
- Use VS Code com a extensão Live Server para projetos HTML
|
||||
- Instale as extensões ESLint e Prettier para formatação consistente
|
||||
- Use as DevTools do navegador para depurar JavaScript
|
||||
- Para projetos Vue, instale a extensão Vue DevTools no navegador
|
||||
|
||||
### Considerações de Desempenho
|
||||
|
||||
- Grande número de arquivos traduzidos (50+ idiomas) significa clones completos grandes
|
||||
- Use clone superficial se estiver trabalhando apenas no conteúdo: `git clone --depth 1`
|
||||
- Exclua traduções das buscas ao trabalhar no conteúdo em inglês
|
||||
- Processos de build podem ser lentos na primeira execução (npm install, build do Vite)
|
||||
|
||||
## Considerações de Segurança
|
||||
|
||||
### Variáveis de Ambiente
|
||||
|
||||
- Chaves de API nunca devem ser comprometidas no repositório
|
||||
- Use arquivos `.env` (já em `.gitignore`)
|
||||
- Documente as variáveis de ambiente necessárias nos READMEs dos projetos
|
||||
|
||||
### Projetos em Python
|
||||
|
||||
- Use ambientes virtuais: `python -m venv venv`
|
||||
- Mantenha as dependências atualizadas
|
||||
- Tokens do GitHub devem ter permissões mínimas necessárias
|
||||
|
||||
### Acesso aos Modelos do GitHub
|
||||
|
||||
- Tokens de Acesso Pessoal (PAT) são necessários para os Modelos do GitHub
|
||||
- Tokens devem ser armazenados como variáveis de ambiente
|
||||
- Nunca comprometa tokens ou credenciais
|
||||
|
||||
## Notas Adicionais
|
||||
|
||||
### Público-alvo
|
||||
|
||||
- Iniciantes completos em desenvolvimento web
|
||||
- Estudantes e autodidatas
|
||||
- Professores usando o currículo em salas de aula
|
||||
- O conteúdo é projetado para acessibilidade e construção gradual de habilidades
|
||||
|
||||
### Filosofia Educacional
|
||||
|
||||
- Abordagem de aprendizado baseada em projetos
|
||||
- Verificações frequentes de conhecimento (quizzes)
|
||||
- Exercícios práticos de codificação
|
||||
- Exemplos de aplicação no mundo real
|
||||
- Foco nos fundamentos antes de frameworks
|
||||
|
||||
### Manutenção do Repositório
|
||||
|
||||
- Comunidade ativa de alunos e contribuidores
|
||||
- Atualizações regulares de dependências e conteúdo
|
||||
- Issues e discussões monitoradas pelos mantenedores
|
||||
- Atualizações de tradução automatizadas via GitHub Actions
|
||||
|
||||
### Recursos Relacionados
|
||||
|
||||
- [Módulos do Microsoft Learn](https://docs.microsoft.com/learn/)
|
||||
- [Recursos do Student Hub](https://docs.microsoft.com/learn/student-hub/)
|
||||
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recomendado para alunos
|
||||
- Cursos adicionais: IA Generativa, Ciência de Dados, ML, currículos de IoT disponíveis
|
||||
|
||||
### Trabalhando com Projetos Específicos
|
||||
|
||||
Para instruções detalhadas sobre projetos individuais, consulte os arquivos README em:
|
||||
- `quiz-app/README.md` - Aplicativo de quiz em Vue 3
|
||||
- `7-bank-project/README.md` - Aplicativo bancário com autenticação
|
||||
- `5-browser-extension/README.md` - Desenvolvimento de extensão de navegador
|
||||
- `6-space-game/README.md` - Desenvolvimento de jogo baseado em Canvas
|
||||
- `9-chat-project/README.md` - Projeto de assistente de chat com IA
|
||||
|
||||
### Estrutura de Monorepo
|
||||
|
||||
Embora não seja um monorepo tradicional, este repositório contém vários projetos independentes:
|
||||
- Cada aula é autônoma
|
||||
- Projetos não compartilham dependências
|
||||
- Trabalhe em projetos individuais sem afetar outros
|
||||
- Clone o repositório inteiro para a experiência completa do currículo
|
||||
|
||||
---
|
||||
|
||||
**Aviso Legal**:
|
||||
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte oficial. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução.
|
||||
@ -1,45 +1,78 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "75cb51f7ca9ea0b097ef4a1287e9290c",
|
||||
"translation_date": "2025-08-25T20:57:12+00:00",
|
||||
"original_hash": "71009af209f81cc01a1f2d324200375f",
|
||||
"translation_date": "2025-10-03T09:32:21+00:00",
|
||||
"source_file": "for-teachers.md",
|
||||
"language_code": "br"
|
||||
}
|
||||
-->
|
||||
## Para Educadores
|
||||
### Para Educadores
|
||||
|
||||
Gostaria de usar este currículo em sua sala de aula? Fique à vontade!
|
||||
Você está convidado a usar este currículo em sua sala de aula. Ele funciona perfeitamente com o GitHub Classroom e as principais plataformas LMS, e também pode ser usado como um repositório independente com seus alunos.
|
||||
|
||||
Na verdade, você pode utilizá-lo diretamente no GitHub, usando o GitHub Classroom.
|
||||
### Uso com GitHub Classroom
|
||||
|
||||
Para isso, faça um fork deste repositório. Você precisará criar um repositório para cada aula, então será necessário extrair cada pasta em um repositório separado. Dessa forma, [GitHub Classroom](https://classroom.github.com/classrooms) poderá identificar cada aula individualmente.
|
||||
Para gerenciar aulas e tarefas por turma, crie um repositório por aula para que o GitHub Classroom possa vincular cada tarefa de forma independente.
|
||||
|
||||
Estas [instruções completas](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) vão te ajudar a configurar sua sala de aula.
|
||||
- Faça um fork deste repositório para sua organização.
|
||||
- Crie um repositório separado para cada aula, extraindo cada pasta de aula para seu próprio repositório.
|
||||
- Opção A: Crie repositórios vazios (um por aula) e copie o conteúdo da pasta de aula para cada um.
|
||||
- Opção B: Use uma abordagem que preserve o histórico do Git (por exemplo, divida uma pasta em um novo repositório) se precisar de proveniência.
|
||||
- No GitHub Classroom, crie uma tarefa por aula e aponte para o repositório correspondente.
|
||||
- Configurações recomendadas:
|
||||
- Visibilidade do repositório: privada para o trabalho dos alunos.
|
||||
- Use o código inicial do branch padrão do repositório da aula.
|
||||
- Adicione templates de issues e pull requests para quizzes e submissões.
|
||||
- Opcionalmente, configure autograding e testes se suas aulas incluírem esses recursos.
|
||||
- Convenções que ajudam:
|
||||
- Nomes de repositórios como lesson-01-intro, lesson-02-html, etc.
|
||||
- Labels: quiz, assignment, needs-review, late, resubmission.
|
||||
- Tags/releases por turma (por exemplo, v2025-term1).
|
||||
|
||||
## Usando no Moodle, Canvas ou Blackboard
|
||||
Dica: Evite armazenar repositórios dentro de pastas sincronizadas (por exemplo, OneDrive/Google Drive) para prevenir conflitos do Git no Windows.
|
||||
|
||||
Este currículo funciona bem nesses Sistemas de Gerenciamento de Aprendizagem! Use o [arquivo de upload do Moodle](../../../../../../../teaching-files/webdev-moodle.mbz) para o conteúdo completo ou experimente o [arquivo Common Cartridge](../../../../../../../teaching-files/webdev-common-cartridge.imscc), que contém parte do conteúdo. O Moodle Cloud não suporta exportações completas de Common Cartridge, então é preferível usar o arquivo de download do Moodle, que pode ser carregado no Canvas. Por favor, nos informe como podemos melhorar essa experiência.
|
||||
### Uso com Moodle, Canvas ou Blackboard
|
||||
|
||||
Este currículo inclui pacotes importáveis para fluxos de trabalho comuns em LMS.
|
||||
|
||||
- Moodle: Use o arquivo de upload do Moodle [Moodle upload file](../../../../../../../teaching-files/webdev-moodle.mbz) para carregar o curso completo.
|
||||
- Common Cartridge: Use o arquivo Common Cartridge [Common Cartridge file](../../../../../../../teaching-files/webdev-common-cartridge.imscc) para maior compatibilidade com LMS.
|
||||
- Observações:
|
||||
- O Moodle Cloud tem suporte limitado para Common Cartridge. Prefira o arquivo do Moodle acima, que também pode ser carregado no Canvas.
|
||||
- Após a importação, revise os módulos, datas de entrega e configurações de quizzes para ajustar ao cronograma do seu período.
|
||||
|
||||
|
||||
> O currículo em uma sala de aula no Moodle
|
||||
> O currículo em uma sala de aula do Moodle
|
||||
|
||||
|
||||
> O currículo no Canvas
|
||||
|
||||
## Usando o repositório como está
|
||||
### Uso do repositório diretamente (sem Classroom)
|
||||
|
||||
Se preferir não usar o GitHub Classroom, você pode executar o curso diretamente deste repositório.
|
||||
|
||||
Se você preferir usar este repositório no formato atual, sem utilizar o GitHub Classroom, isso também é possível. Você precisará comunicar aos seus alunos qual aula trabalhar juntos.
|
||||
- Formatos síncronos/online (Zoom/Teams):
|
||||
- Realize aquecimentos curtos liderados por mentores; use salas de grupo para quizzes.
|
||||
- Anuncie um período de tempo para quizzes; os alunos enviam respostas como Issues no GitHub.
|
||||
- Para tarefas colaborativas, os alunos trabalham em repositórios públicos das aulas e abrem pull requests.
|
||||
- Formatos privados/assíncronos:
|
||||
- Os alunos fazem fork de cada aula para seus próprios repositórios **privados** e adicionam você como colaborador.
|
||||
- Eles enviam via Issues (quizzes) e Pull Requests (tarefas) no repositório da sua sala de aula ou em seus forks privados.
|
||||
|
||||
Em um formato online (Zoom, Teams ou outro), você pode formar salas de discussão para os questionários e orientar os alunos para ajudá-los a se preparar para aprender. Depois, convide os alunos para os questionários e peça que enviem suas respostas como 'issues' em um horário determinado. Você pode fazer o mesmo com as tarefas, caso queira que os alunos trabalhem colaborativamente de forma aberta.
|
||||
### Melhores práticas
|
||||
|
||||
Se preferir um formato mais privado, peça aos seus alunos para fazerem fork do currículo, aula por aula, para seus próprios repositórios privados no GitHub e concederem acesso a você. Assim, eles podem completar os questionários e tarefas de forma privada e enviá-los para você via issues no repositório da sua sala de aula.
|
||||
- Ofereça uma aula de orientação sobre Git/GitHub, Issues e PRs.
|
||||
- Use checklists em Issues para quizzes/tarefas com várias etapas.
|
||||
- Adicione CONTRIBUTING.md e CODE_OF_CONDUCT.md para estabelecer normas na sala de aula.
|
||||
- Inclua notas de acessibilidade (texto alternativo, legendas) e ofereça PDFs imprimíveis.
|
||||
- Versione seu conteúdo por período e congele os repositórios das aulas após a publicação.
|
||||
|
||||
Existem várias maneiras de fazer isso funcionar em um formato de sala de aula online. Por favor, nos informe o que funciona melhor para você!
|
||||
### Feedback e suporte
|
||||
|
||||
## Por favor, compartilhe suas opiniões!
|
||||
Queremos que este currículo funcione para você e seus alunos. Por favor, abra uma nova Issue neste repositório para relatar bugs, fazer solicitações ou sugerir melhorias, ou inicie uma discussão no Teacher Corner.
|
||||
|
||||
Queremos que este currículo funcione para você e seus alunos. Conecte-se conosco no [Teacher corner](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) e abra uma [**nova issue**](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) para quaisquer solicitações, bugs ou feedback.
|
||||
---
|
||||
|
||||
**Aviso Legal**:
|
||||
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução.
|
||||
@ -1,25 +1,31 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "1ce4deaec80130d3a0a3c906568459fc",
|
||||
"translation_date": "2025-08-28T04:31:44+00:00",
|
||||
"original_hash": "9e2f84e351a6fcb44bfc4066d98525f0",
|
||||
"translation_date": "2025-10-03T10:37:56+00:00",
|
||||
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
|
||||
"language_code": "cs"
|
||||
}
|
||||
-->
|
||||
# Čtení dokumentace
|
||||
## Pokyny
|
||||
|
||||
## Instrukce
|
||||
Existuje mnoho nástrojů, které může webový vývojář potřebovat, a které jsou uvedeny v [MDN dokumentaci pro nástroje na straně klienta](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Vyberte **tři nástroje**, které **nejsou pokryty v této lekci** (s výjimkou [uveďte konkrétní nástroje nebo odkaz na obsah lekce]), vysvětlete **proč** by je webový vývojář použil, a najděte nástroj, který odpovídá každé kategorii. Pro každý z nich sdílejte odkaz na jeho oficiální dokumentaci (ne na příklad použitý na MDN).
|
||||
|
||||
Existuje mnoho nástrojů, které může webový vývojář potřebovat, a které jsou uvedeny na [MDN dokumentaci pro nástroje na straně klienta](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Vyberte 3 nástroje, které nebyly pokryty v lekci, vysvětlete, proč by je webový vývojář použil, a vyhledejte nástroj, který spadá do této kategorie, a sdílejte jeho dokumentaci. Nepoužívejte stejný příklad nástroje jako v MDN dokumentaci.
|
||||
**Formát:**
|
||||
- Název nástroje
|
||||
- Proč by ho webový vývojář použil (2-3 věty)
|
||||
- Odkaz na dokumentaci
|
||||
|
||||
**Délka:**
|
||||
- Každé vysvětlení by mělo mít 2-3 věty.
|
||||
|
||||
## Hodnocení
|
||||
|
||||
Vynikající | Dostatečné | Potřebuje zlepšení
|
||||
Vynikající | Přiměřené | Vyžaduje zlepšení
|
||||
--- | --- | -- |
|
||||
|Vysvětleno, proč by webový vývojář použil nástroj| Vysvětleno, jak, ale ne proč by vývojář použil nástroj| Nebylo zmíněno, jak nebo proč by vývojář použil nástroj |
|
||||
Vysvětleno, proč by webový vývojář použil nástroj | Vysvětleno, jak, ale ne proč by vývojář použil nástroj | Neuvedeno, jak nebo proč by vývojář použil nástroj |
|
||||
|
||||
---
|
||||
|
||||
**Prohlášení**:
|
||||
Tento dokument byl přeložen pomocí služby AI pro překlady [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro kritické informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
|
||||
Tento dokument byl přeložen pomocí služby AI pro překlady [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
|
||||
@ -0,0 +1,415 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
|
||||
"translation_date": "2025-10-03T11:37:46+00:00",
|
||||
"source_file": "AGENTS.md",
|
||||
"language_code": "cs"
|
||||
}
|
||||
-->
|
||||
# AGENTS.md
|
||||
|
||||
## Přehled projektu
|
||||
|
||||
Toto je vzdělávací úložiště určené k výuce základů webového vývoje pro začátečníky. Kurikulum je komplexní 12týdenní kurz vyvinutý Microsoft Cloud Advocates, který obsahuje 24 praktických lekcí zaměřených na JavaScript, CSS a HTML.
|
||||
|
||||
### Klíčové komponenty
|
||||
|
||||
- **Vzdělávací obsah**: 24 strukturovaných lekcí organizovaných do modulů založených na projektech
|
||||
- **Praktické projekty**: Terárium, hra na psaní, rozšíření pro prohlížeč, vesmírná hra, bankovní aplikace, editor kódu a AI chatovací asistent
|
||||
- **Interaktivní kvízy**: 48 kvízů, každý s 3 otázkami (před/po lekci)
|
||||
- **Podpora více jazyků**: Automatické překlady do více než 50 jazyků pomocí GitHub Actions
|
||||
- **Technologie**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (pro AI projekty)
|
||||
|
||||
### Architektura
|
||||
|
||||
- Vzdělávací úložiště se strukturou založenou na lekcích
|
||||
- Každá složka lekce obsahuje README, příklady kódu a řešení
|
||||
- Samostatné projekty v oddělených adresářích (quiz-app, různé projekty lekcí)
|
||||
- Systém překladů pomocí GitHub Actions (co-op-translator)
|
||||
- Dokumentace poskytovaná přes Docsify a dostupná jako PDF
|
||||
|
||||
## Příkazy pro nastavení
|
||||
|
||||
Toto úložiště je primárně určeno pro konzumaci vzdělávacího obsahu. Pro práci s konkrétními projekty:
|
||||
|
||||
### Nastavení hlavního úložiště
|
||||
|
||||
```bash
|
||||
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
|
||||
cd Web-Dev-For-Beginners
|
||||
```
|
||||
|
||||
### Nastavení aplikace Quiz (Vue 3 + Vite)
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm install
|
||||
npm run dev # Start development server
|
||||
npm run build # Build for production
|
||||
npm run lint # Run ESLint
|
||||
```
|
||||
|
||||
### API bankovního projektu (Node.js + Express)
|
||||
|
||||
```bash
|
||||
cd 7-bank-project/api
|
||||
npm install
|
||||
npm start # Start API server
|
||||
npm run lint # Run ESLint
|
||||
npm run format # Format with Prettier
|
||||
```
|
||||
|
||||
### Projekty rozšíření pro prohlížeč
|
||||
|
||||
```bash
|
||||
cd 5-browser-extension/solution
|
||||
npm install
|
||||
# Follow browser-specific extension loading instructions
|
||||
```
|
||||
|
||||
### Projekty vesmírné hry
|
||||
|
||||
```bash
|
||||
cd 6-space-game/solution
|
||||
npm install
|
||||
# Open index.html in browser or use Live Server
|
||||
```
|
||||
|
||||
### Projekt chatu (Python Backend)
|
||||
|
||||
```bash
|
||||
cd 9-chat-project/solution/backend/python
|
||||
pip install openai
|
||||
# Set GITHUB_TOKEN environment variable
|
||||
python api.py
|
||||
```
|
||||
|
||||
## Pracovní postup vývoje
|
||||
|
||||
### Pro přispěvatele obsahu
|
||||
|
||||
1. **Forkněte úložiště** na svůj GitHub účet
|
||||
2. **Naklonujte svůj fork** lokálně
|
||||
3. **Vytvořte novou větev** pro své změny
|
||||
4. Proveďte změny v obsahu lekcí nebo příkladech kódu
|
||||
5. Otestujte změny kódu v relevantních adresářích projektů
|
||||
6. Odešlete pull requesty podle pokynů pro přispívání
|
||||
|
||||
### Pro studenty
|
||||
|
||||
1. Forkněte nebo naklonujte úložiště
|
||||
2. Postupujte sekvenčně v adresářích lekcí
|
||||
3. Přečtěte si README soubory pro každou lekci
|
||||
4. Dokončete kvízy před lekcí na https://ff-quizzes.netlify.app/web/
|
||||
5. Projděte příklady kódu v složkách lekcí
|
||||
6. Dokončete úkoly a výzvy
|
||||
7. Absolvujte kvízy po lekci
|
||||
|
||||
### Živý vývoj
|
||||
|
||||
- **Dokumentace**: Spusťte `docsify serve` v rootu (port 3000)
|
||||
- **Aplikace Quiz**: Spusťte `npm run dev` v adresáři quiz-app
|
||||
- **Projekty**: Použijte rozšíření Live Server ve VS Code pro HTML projekty
|
||||
- **API projekty**: Spusťte `npm start` v příslušných adresářích API
|
||||
|
||||
## Pokyny pro testování
|
||||
|
||||
### Testování aplikace Quiz
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm run lint # Check for code style issues
|
||||
npm run build # Verify build succeeds
|
||||
```
|
||||
|
||||
### Testování API bankovního projektu
|
||||
|
||||
```bash
|
||||
cd 7-bank-project/api
|
||||
npm run lint # Check for code style issues
|
||||
node server.js # Verify server starts without errors
|
||||
```
|
||||
|
||||
### Obecný přístup k testování
|
||||
|
||||
- Toto je vzdělávací úložiště bez komplexních automatizovaných testů
|
||||
- Manuální testování se zaměřuje na:
|
||||
- Příklady kódu běží bez chyb
|
||||
- Odkazy v dokumentaci fungují správně
|
||||
- Projekty se úspěšně sestaví
|
||||
- Příklady dodržují nejlepší praktiky
|
||||
|
||||
### Kontroly před odesláním
|
||||
|
||||
- Spusťte `npm run lint` v adresářích s package.json
|
||||
- Ověřte platnost odkazů v markdownu
|
||||
- Otestujte příklady kódu v prohlížeči nebo Node.js
|
||||
- Zkontrolujte, že překlady zachovávají správnou strukturu
|
||||
|
||||
## Pokyny pro styl kódu
|
||||
|
||||
### JavaScript
|
||||
|
||||
- Používejte moderní syntaxi ES6+
|
||||
- Dodržujte standardní konfigurace ESLint poskytované v projektech
|
||||
- Používejte smysluplné názvy proměnných a funkcí pro vzdělávací přehlednost
|
||||
- Přidávejte komentáře vysvětlující koncepty pro studenty
|
||||
- Formátujte pomocí Prettier, kde je nakonfigurován
|
||||
|
||||
### HTML/CSS
|
||||
|
||||
- Semantické HTML5 prvky
|
||||
- Principy responzivního designu
|
||||
- Jasné konvence pojmenování tříd
|
||||
- Komentáře vysvětlující techniky CSS pro studenty
|
||||
|
||||
### Python
|
||||
|
||||
- Pokyny pro styl PEP 8
|
||||
- Jasné, vzdělávací příklady kódu
|
||||
- Typové anotace tam, kde jsou užitečné pro výuku
|
||||
|
||||
### Dokumentace v Markdownu
|
||||
|
||||
- Jasná hierarchie nadpisů
|
||||
- Bloky kódu se specifikací jazyka
|
||||
- Odkazy na další zdroje
|
||||
- Snímky obrazovky a obrázky v adresářích `images/`
|
||||
- Alternativní text pro obrázky kvůli přístupnosti
|
||||
|
||||
### Organizace souborů
|
||||
|
||||
- Lekce číslované sekvenčně (1-getting-started-lessons, 2-js-basics, atd.)
|
||||
- Každý projekt má `solution/` a často `start/` nebo `your-work/` adresáře
|
||||
- Obrázky uložené v lekci-specifických složkách `images/`
|
||||
- Překlady ve struktuře `translations/{language-code}/`
|
||||
|
||||
## Sestavení a nasazení
|
||||
|
||||
### Nasazení aplikace Quiz (Azure Static Web Apps)
|
||||
|
||||
Aplikace quiz-app je nakonfigurována pro nasazení na Azure Static Web Apps:
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm run build # Creates dist/ folder
|
||||
# Deploys via GitHub Actions workflow on push to main
|
||||
```
|
||||
|
||||
Konfigurace Azure Static Web Apps:
|
||||
- **Umístění aplikace**: `/quiz-app`
|
||||
- **Umístění výstupu**: `dist`
|
||||
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
|
||||
|
||||
### Generování PDF dokumentace
|
||||
|
||||
```bash
|
||||
npm install # Install docsify-to-pdf
|
||||
npm run convert # Generate PDF from docs
|
||||
```
|
||||
|
||||
### Dokumentace Docsify
|
||||
|
||||
```bash
|
||||
npm install -g docsify-cli # Install Docsify globally
|
||||
docsify serve # Serve on localhost:3000
|
||||
```
|
||||
|
||||
### Sestavení specifické pro projekt
|
||||
|
||||
Každý adresář projektu může mít vlastní proces sestavení:
|
||||
- Projekty Vue: `npm run build` vytvoří produkční balíčky
|
||||
- Statické projekty: Žádný krok sestavení, soubory se servírují přímo
|
||||
|
||||
## Pokyny pro pull requesty
|
||||
|
||||
### Formát názvu
|
||||
|
||||
Používejte jasné, popisné názvy označující oblast změny:
|
||||
- `[Quiz-app] Přidat nový kvíz pro lekci X`
|
||||
- `[Lesson-3] Opravit překlep v projektu terária`
|
||||
- `[Translation] Přidat španělský překlad pro lekci 5`
|
||||
- `[Docs] Aktualizovat pokyny pro nastavení`
|
||||
|
||||
### Požadované kontroly
|
||||
|
||||
Před odesláním PR:
|
||||
|
||||
1. **Kvalita kódu**:
|
||||
- Spusťte `npm run lint` v ovlivněných adresářích projektů
|
||||
- Opravte všechny chyby a varování lintingu
|
||||
|
||||
2. **Ověření sestavení**:
|
||||
- Spusťte `npm run build`, pokud je to relevantní
|
||||
- Ujistěte se, že nejsou žádné chyby sestavení
|
||||
|
||||
3. **Validace odkazů**:
|
||||
- Otestujte všechny odkazy v markdownu
|
||||
- Ověřte, že odkazy na obrázky fungují
|
||||
|
||||
4. **Revize obsahu**:
|
||||
- Zkontrolujte pravopis a gramatiku
|
||||
- Ujistěte se, že příklady kódu jsou správné a vzdělávací
|
||||
- Ověřte, že překlady zachovávají původní význam
|
||||
|
||||
### Požadavky na přispívání
|
||||
|
||||
- Souhlas s Microsoft CLA (automatická kontrola při prvním PR)
|
||||
- Dodržování [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
|
||||
- Viz [CONTRIBUTING.md](./CONTRIBUTING.md) pro podrobné pokyny
|
||||
- Odkazujte čísla problémů v popisu PR, pokud je to relevantní
|
||||
|
||||
### Proces revize
|
||||
|
||||
- PR jsou revidovány správci a komunitou
|
||||
- Prioritou je vzdělávací přehlednost
|
||||
- Příklady kódu by měly dodržovat aktuální nejlepší praktiky
|
||||
- Překlady jsou revidovány z hlediska přesnosti a kulturní vhodnosti
|
||||
|
||||
## Systém překladů
|
||||
|
||||
### Automatický překlad
|
||||
|
||||
- Používá GitHub Actions s workflow co-op-translator
|
||||
- Automaticky překládá do více než 50 jazyků
|
||||
- Zdrojové soubory v hlavních adresářích
|
||||
- Přeložené soubory ve struktuře `translations/{language-code}/`
|
||||
|
||||
### Přidání manuálních vylepšení překladu
|
||||
|
||||
1. Najděte soubor ve `translations/{language-code}/`
|
||||
2. Proveďte vylepšení při zachování struktury
|
||||
3. Ujistěte se, že příklady kódu zůstávají funkční
|
||||
4. Otestujte jakýkoli lokalizovaný obsah kvízů
|
||||
|
||||
### Metadata překladu
|
||||
|
||||
Přeložené soubory obsahují záhlaví metadat:
|
||||
```markdown
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "...",
|
||||
"translation_date": "...",
|
||||
"source_file": "...",
|
||||
"language_code": "..."
|
||||
}
|
||||
-->
|
||||
```
|
||||
|
||||
## Ladění a řešení problémů
|
||||
|
||||
### Běžné problémy
|
||||
|
||||
**Aplikace Quiz se nespustí**:
|
||||
- Zkontrolujte verzi Node.js (doporučeno v14+)
|
||||
- Smažte `node_modules` a `package-lock.json`, znovu spusťte `npm install`
|
||||
- Zkontrolujte konflikty portů (výchozí: Vite používá port 5173)
|
||||
|
||||
**API server se nespustí**:
|
||||
- Ověřte, že verze Node.js splňuje minimum (node >=10)
|
||||
- Zkontrolujte, zda port již není používán
|
||||
- Ujistěte se, že všechny závislosti jsou nainstalovány pomocí `npm install`
|
||||
|
||||
**Rozšíření prohlížeče se nenačte**:
|
||||
- Ověřte, že manifest.json je správně formátován
|
||||
- Zkontrolujte chyby v konzoli prohlížeče
|
||||
- Postupujte podle pokynů pro instalaci rozšíření specifických pro prohlížeč
|
||||
|
||||
**Problémy s projektem Python chatu**:
|
||||
- Ujistěte se, že je nainstalován balíček OpenAI: `pip install openai`
|
||||
- Ověřte, že je nastavena proměnná prostředí GITHUB_TOKEN
|
||||
- Zkontrolujte oprávnění přístupu k GitHub Models
|
||||
|
||||
**Docsify neobsluhuje dokumenty**:
|
||||
- Nainstalujte docsify-cli globálně: `npm install -g docsify-cli`
|
||||
- Spusťte z kořenového adresáře úložiště
|
||||
- Zkontrolujte, že existuje `docs/_sidebar.md`
|
||||
|
||||
### Tipy pro vývojové prostředí
|
||||
|
||||
- Používejte VS Code s rozšířením Live Server pro HTML projekty
|
||||
- Nainstalujte rozšíření ESLint a Prettier pro konzistentní formátování
|
||||
- Používejte DevTools prohlížeče pro ladění JavaScriptu
|
||||
- Pro projekty Vue nainstalujte rozšíření Vue DevTools prohlížeče
|
||||
|
||||
### Úvahy o výkonu
|
||||
|
||||
- Velký počet přeložených souborů (50+ jazyků) znamená, že úplné klony jsou velké
|
||||
- Použijte mělký klon, pokud pracujete pouze na obsahu: `git clone --depth 1`
|
||||
- Vyloučte překlady z vyhledávání při práci na obsahu v angličtině
|
||||
- Procesy sestavení mohou být při prvním spuštění pomalé (npm install, Vite build)
|
||||
|
||||
## Úvahy o bezpečnosti
|
||||
|
||||
### Proměnné prostředí
|
||||
|
||||
- API klíče by nikdy neměly být přidány do úložiště
|
||||
- Používejte `.env` soubory (již v `.gitignore`)
|
||||
- Dokumentujte požadované proměnné prostředí v README projektů
|
||||
|
||||
### Python projekty
|
||||
|
||||
- Používejte virtuální prostředí: `python -m venv venv`
|
||||
- Udržujte závislosti aktuální
|
||||
- Tokeny GitHub by měly mít minimální požadovaná oprávnění
|
||||
|
||||
### Přístup k GitHub Models
|
||||
|
||||
- Vyžadovány osobní přístupové tokeny (PAT) pro GitHub Models
|
||||
- Tokeny by měly být uloženy jako proměnné prostředí
|
||||
- Nikdy nepřidávejte tokeny nebo přihlašovací údaje
|
||||
|
||||
## Další poznámky
|
||||
|
||||
### Cílová skupina
|
||||
|
||||
- Úplní začátečníci ve webovém vývoji
|
||||
- Studenti a samouci
|
||||
- Učitelé používající kurikulum ve třídách
|
||||
- Obsah je navržen pro přístupnost a postupné budování dovedností
|
||||
|
||||
### Vzdělávací filozofie
|
||||
|
||||
- Přístup založený na projektech
|
||||
- Časté kontroly znalostí (kvízy)
|
||||
- Praktická cvičení v kódování
|
||||
- Příklady aplikací z reálného světa
|
||||
- Důraz na základy před frameworky
|
||||
|
||||
### Údržba úložiště
|
||||
|
||||
- Aktivní komunita studentů a přispěvatelů
|
||||
- Pravidelné aktualizace závislostí a obsahu
|
||||
- Problémy a diskuse monitorovány správci
|
||||
- Aktualizace překladů automatizované pomocí GitHub Actions
|
||||
|
||||
### Související zdroje
|
||||
|
||||
- [Microsoft Learn moduly](https://docs.microsoft.com/learn/)
|
||||
- [Student Hub zdroje](https://docs.microsoft.com/learn/student-hub/)
|
||||
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) doporučený pro studenty
|
||||
- Další kurzy: Generativní AI, Data Science, ML, IoT kurikula k dispozici
|
||||
|
||||
### Práce s konkrétními projekty
|
||||
|
||||
Pro podrobné pokyny k jednotlivým projektům viz README soubory v:
|
||||
- `quiz-app/README.md` - aplikace kvízů Vue 3
|
||||
- `7-bank-project/README.md` - bankovní aplikace s autentizací
|
||||
- `5-browser-extension/README.md` - vývoj rozšíření pro prohlížeč
|
||||
- `6-space-game/README.md` - vývoj hry založené na Canvasu
|
||||
- `9-chat-project/README.md` - projekt AI chatovacího asistenta
|
||||
|
||||
### Struktura monorepo
|
||||
|
||||
I když nejde o tradiční monorepo, toto úložiště obsahuje několik nezávislých projektů:
|
||||
- Každá lekce je samostatná
|
||||
- Projekty nesdílejí závislosti
|
||||
- Práce na jednotlivých projektech bez ovlivnění ostatních
|
||||
- Naklonujte celé úložiště pro plný zážitek z kurikula
|
||||
|
||||
---
|
||||
|
||||
**Prohlášení**:
|
||||
Tento dokument byl přeložen pomocí služby AI pro překlady [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho rodném jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
|
||||
@ -1,47 +1,78 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "75cb51f7ca9ea0b097ef4a1287e9290c",
|
||||
"translation_date": "2025-08-28T03:22:47+00:00",
|
||||
"original_hash": "71009af209f81cc01a1f2d324200375f",
|
||||
"translation_date": "2025-10-03T10:34:49+00:00",
|
||||
"source_file": "for-teachers.md",
|
||||
"language_code": "cs"
|
||||
}
|
||||
-->
|
||||
## Pro pedagogy
|
||||
### Pro pedagogy
|
||||
|
||||
Chtěli byste použít tento výukový plán ve své třídě? Klidně do toho!
|
||||
Tento učební plán můžete využít ve své třídě. Funguje bez problémů s GitHub Classroom a předními platformami LMS a lze jej také použít jako samostatné úložiště se studenty.
|
||||
|
||||
Ve skutečnosti jej můžete použít přímo na GitHubu pomocí GitHub Classroom.
|
||||
### Použití s GitHub Classroom
|
||||
|
||||
Abyste to mohli udělat, forkněte toto repozitáře. Budete muset vytvořit repozitář pro každou lekci, takže budete muset extrahovat každou složku do samostatného repozitáře. Tímto způsobem může [GitHub Classroom](https://classroom.github.com/classrooms) zpracovat každou lekci zvlášť.
|
||||
Pro správu lekcí a úkolů podle skupin vytvořte jedno úložiště na každou lekci, aby GitHub Classroom mohl připojit každý úkol samostatně.
|
||||
|
||||
Tyto [podrobné instrukce](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) vám poskytnou představu, jak nastavit svou třídu.
|
||||
- Vytvořte fork tohoto úložiště do své organizace.
|
||||
- Vytvořte samostatné úložiště pro každou lekci extrahováním složky lekce do vlastního úložiště.
|
||||
- Možnost A: Vytvořte prázdná úložiště (jedno na lekci) a zkopírujte obsah složky lekce do každého z nich.
|
||||
- Možnost B: Použijte přístup zachovávající historii Git (např. rozdělení složky do nového úložiště), pokud potřebujete zachovat původ.
|
||||
- V GitHub Classroom vytvořte úkol pro každou lekci a odkažte na odpovídající úložiště lekce.
|
||||
- Doporučené nastavení:
|
||||
- Viditelnost úložiště: soukromé pro práci studentů.
|
||||
- Použijte výchozí kód ze základní větve úložiště lekce.
|
||||
- Přidejte šablony pro problémy a pull requesty pro kvízy a odevzdání.
|
||||
- Volitelně nakonfigurujte automatické hodnocení a testy, pokud vaše lekce obsahují tyto prvky.
|
||||
- Uživatelské konvence, které pomáhají:
|
||||
- Názvy úložišť jako lesson-01-intro, lesson-02-html, atd.
|
||||
- Štítky: quiz, assignment, needs-review, late, resubmission.
|
||||
- Tagy/verze podle skupin (např. v2025-term1).
|
||||
|
||||
## Použití v Moodle, Canvas nebo Blackboard
|
||||
Tip: Vyhněte se ukládání úložišť do synchronizovaných složek (např. OneDrive/Google Drive), abyste předešli konfliktům Git na Windows.
|
||||
|
||||
Tento výukový plán skvěle funguje v těchto systémech pro správu výuky! Použijte [soubor pro nahrání do Moodle](../../../../../../../teaching-files/webdev-moodle.mbz) pro kompletní obsah, nebo vyzkoušejte [soubor Common Cartridge](../../../../../../../teaching-files/webdev-common-cartridge.imscc), který obsahuje část obsahu. Moodle Cloud nepodporuje kompletní exporty Common Cartridge, takže je lepší použít soubor pro Moodle, který lze nahrát do Canvas. Dejte nám vědět, jak můžeme tento proces zlepšit.
|
||||
### Použití s Moodle, Canvas nebo Blackboard
|
||||
|
||||
|
||||
> Výukový plán v prostředí Moodle
|
||||
Tento učební plán obsahuje importovatelné balíčky pro běžné pracovní postupy LMS.
|
||||
|
||||
|
||||
> Výukový plán v prostředí Canvas
|
||||
- Moodle: Použijte soubor pro nahrání do Moodle [Moodle upload file](../../../../../../../teaching-files/webdev-moodle.mbz) k načtení celého kurzu.
|
||||
- Common Cartridge: Použijte soubor Common Cartridge [Common Cartridge file](../../../../../../../teaching-files/webdev-common-cartridge.imscc) pro širší kompatibilitu LMS.
|
||||
- Poznámky:
|
||||
- Moodle Cloud má omezenou podporu Common Cartridge. Preferujte výše uvedený soubor pro Moodle, který lze také nahrát do Canvas.
|
||||
- Po importu zkontrolujte moduly, termíny odevzdání a nastavení kvízů, aby odpovídaly vašemu rozvrhu.
|
||||
|
||||
## Použití repozitáře tak, jak je
|
||||
|
||||
> Učební plán v prostředí Moodle
|
||||
|
||||
Pokud byste chtěli použít tento repozitář v jeho aktuální podobě, bez použití GitHub Classroom, je to také možné. Budete muset studentům sdělit, kterou lekci mají společně projít.
|
||||
|
||||
> Učební plán v prostředí Canvas
|
||||
|
||||
V online formátu (Zoom, Teams nebo jiném) můžete vytvořit breakout místnosti pro kvízy a mentorovat studenty, aby se připravili na učení. Poté pozvěte studenty ke kvízům a nechte je odevzdat své odpovědi jako 'issues' v určitém čase. Stejný postup můžete použít i pro úkoly, pokud chcete, aby studenti pracovali společně a veřejně.
|
||||
### Použití úložiště přímo (bez Classroom)
|
||||
|
||||
Pokud preferujete soukromější formát, požádejte studenty, aby si forknuli výukový plán, lekci po lekci, do svých vlastních soukromých repozitářů na GitHubu a dali vám k nim přístup. Poté mohou dokončit kvízy a úkoly soukromě a odevzdat je vám prostřednictvím issues ve vašem třídním repozitáři.
|
||||
Pokud preferujete nepoužívat GitHub Classroom, můžete kurz spustit přímo z tohoto úložiště.
|
||||
|
||||
Existuje mnoho způsobů, jak tento výukový plán přizpůsobit online výuce. Dejte nám vědět, co vám funguje nejlépe!
|
||||
- Synchronní/online formáty (Zoom/Teams):
|
||||
- Pořádejte krátké úvodní aktivity vedené mentorem; použijte breakout rooms pro kvízy.
|
||||
- Oznámte časové okno pro kvízy; studenti odevzdávají odpovědi jako GitHub Issues.
|
||||
- Pro spolupracující úkoly studenti pracují ve veřejných úložištích lekcí a otevírají pull requesty.
|
||||
- Soukromé/asynchronní formáty:
|
||||
- Studenti si forkují každou lekci do svých **soukromých** úložišť a přidají vás jako spolupracovníka.
|
||||
- Odevzdávají prostřednictvím Issues (kvízy) a Pull Requests (úkoly) na vašem úložišti třídy nebo jejich soukromých forcích.
|
||||
|
||||
## Podělte se s námi o své názory!
|
||||
### Nejlepší postupy
|
||||
|
||||
Chceme, aby tento výukový plán fungoval pro vás a vaše studenty. Spojte se s námi v [Teacher corner](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) a otevřete [**nový issue**](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) pro jakékoli požadavky, chyby a zpětnou vazbu.
|
||||
- Poskytněte orientační lekci o základech Git/GitHub, Issues a PRs.
|
||||
- Používejte kontrolní seznamy v Issues pro vícekrokové kvízy/úkoly.
|
||||
- Přidejte CONTRIBUTING.md a CODE_OF_CONDUCT.md pro nastavení pravidel třídy.
|
||||
- Přidejte poznámky o přístupnosti (alt text, titulky) a nabídněte tisknutelné PDF.
|
||||
- Verziujte svůj obsah podle termínu a zmrazte úložiště lekcí po publikování.
|
||||
|
||||
### Zpětná vazba a podpora
|
||||
|
||||
Chceme, aby tento učební plán fungoval pro vás a vaše studenty. Prosím, otevřete nový Issue v tomto úložišti pro chyby, požadavky nebo vylepšení, nebo zahajte diskusi v Teacher Corner.
|
||||
|
||||
---
|
||||
|
||||
**Prohlášení**:
|
||||
Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
|
||||
Tento dokument byl přeložen pomocí služby AI pro překlady [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
|
||||
@ -1,25 +1,31 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "1ce4deaec80130d3a0a3c906568459fc",
|
||||
"translation_date": "2025-08-26T22:25:33+00:00",
|
||||
"original_hash": "9e2f84e351a6fcb44bfc4066d98525f0",
|
||||
"translation_date": "2025-10-03T09:59:44+00:00",
|
||||
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
|
||||
"language_code": "da"
|
||||
}
|
||||
-->
|
||||
# Læse dokumentationen
|
||||
|
||||
## Instruktioner
|
||||
|
||||
Der findes mange værktøjer, som en webudvikler kan have brug for, og som er beskrevet i [MDN-dokumentationen for klient-side værktøjer](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Vælg 3 værktøjer, der ikke er dækket i lektionen, forklar hvorfor en webudvikler ville bruge dem, og søg efter et værktøj, der falder ind under denne kategori, og del dets dokumentation. Brug ikke det samme værktøjseksempel som i MDN-dokumentationen.
|
||||
Der findes mange værktøjer, som en webudvikler kan have brug for, og som er nævnt i [MDN-dokumentationen for klient-side værktøjer](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Vælg **tre værktøjer**, der **ikke er dækket i denne lektion** (eksklusive [list specifikke værktøjer eller henvis til lektionens indhold]), forklar **hvorfor** en webudvikler ville bruge hvert værktøj, og find et værktøj, der passer til hver kategori. For hvert værktøj skal du dele et link til dets officielle dokumentation (ikke eksemplet brugt på MDN).
|
||||
|
||||
**Format:**
|
||||
- Værktøjets navn
|
||||
- Hvorfor en webudvikler ville bruge det (2-3 sætninger)
|
||||
- Link til dokumentation
|
||||
|
||||
**Længde:**
|
||||
- Hver forklaring skal være 2-3 sætninger.
|
||||
|
||||
## Bedømmelseskriterier
|
||||
|
||||
Eksemplarisk | Tilstrækkelig | Kræver forbedring
|
||||
--- | --- | -- |
|
||||
|Forklarede hvorfor en webudvikler ville bruge værktøjet| Forklarede hvordan, men ikke hvorfor en udvikler ville bruge værktøjet| Nævnte ikke hvordan eller hvorfor en udvikler ville bruge værktøjet |
|
||||
--- | --- | --- |
|
||||
Forklarede hvorfor en webudvikler ville bruge værktøjet | Forklarede hvordan, men ikke hvorfor en udvikler ville bruge værktøjet | Nævnte ikke hvordan eller hvorfor en udvikler ville bruge værktøjet |
|
||||
|
||||
---
|
||||
|
||||
**Ansvarsfraskrivelse**:
|
||||
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på at opnå nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os ikke ansvar for eventuelle misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.
|
||||
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på at sikre nøjagtighed, skal det bemærkes, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os ikke ansvar for misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.
|
||||
@ -1,25 +1,41 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "9d4d75af51aaccfe9af778f792c62919",
|
||||
"translation_date": "2025-08-26T21:38:31+00:00",
|
||||
"original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
|
||||
"translation_date": "2025-10-03T09:59:52+00:00",
|
||||
"source_file": "3-terrarium/2-intro-to-css/assignment.md",
|
||||
"language_code": "da"
|
||||
}
|
||||
-->
|
||||
# CSS Refaktorering
|
||||
# CSS Refaktorering Opgave
|
||||
|
||||
## Formål
|
||||
|
||||
Refaktorer terrarium-projektet til at bruge **Flexbox** eller **CSS Grid** til layout. Opdater HTML og CSS efter behov for at opnå et moderne, responsivt design. Du behøver ikke implementere træk-og-slip-elementer—fokuser kun på layout og styling.
|
||||
|
||||
## Instruktioner
|
||||
|
||||
Restyl terrariet ved hjælp af enten Flexbox eller CSS Grid, og tag skærmbilleder for at vise, at du har testet det i flere browsere. Du kan være nødt til at ændre markuppen, så opret en ny version af appen med kunsten på plads til din refaktorering. Bekymr dig ikke om at gøre elementerne flytbare; refaktorer kun HTML og CSS for nu.
|
||||
1. **Opret en ny version** af terrarium-appen. Opdater markeringen og CSS til at bruge Flexbox eller CSS Grid til layout.
|
||||
2. **Sørg for, at kunst og elementer er på plads** som i den originale version.
|
||||
3. **Test dit design** i mindst to forskellige browsere (f.eks. Chrome, Firefox, Edge).
|
||||
4. **Tag skærmbilleder** af dit terrarium i hver browser for at demonstrere kompatibilitet på tværs af browsere.
|
||||
5. **Indsend** din opdaterede kode og skærmbilleder.
|
||||
|
||||
## Bedømmelseskriterier
|
||||
|
||||
| Kriterier | Fremragende | Tilstrækkelig | Skal forbedres |
|
||||
| --------- | ---------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
|
||||
| | Præsentér et fuldstændigt restylet terrarium ved hjælp af Flexbox eller CSS Grid | Restyl nogle af elementerne | Undlader at restyle terrariet helt |
|
||||
| Kriterier | Fremragende | Tilstrækkelig | Kræver forbedring |
|
||||
|-------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
|
||||
| Layout | Fuldt refaktoreret med Flexbox eller CSS Grid; visuelt tiltalende og responsivt | Nogle elementer refaktoreret; delvis brug af Flexbox eller Grid | Lille eller ingen brug af Flexbox eller Grid; layout uændret |
|
||||
| Kompatibilitet | Skærmbilleder leveret for flere browsere; konsistent udseende | Skærmbilleder for én browser; mindre uoverensstemmelser | Ingen skærmbilleder eller større uoverensstemmelser |
|
||||
| Kvalitet af kode | Ren, velorganiseret HTML/CSS; klare kommentarer | Noget organisation; få kommentarer | Uorganiseret kode; mangler kommentarer |
|
||||
|
||||
## Tips
|
||||
|
||||
- Gennemgå [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) og [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) vejledninger.
|
||||
- Brug browserens udviklerværktøjer til at teste responsivitet.
|
||||
- Kommenter din kode for klarhed.
|
||||
|
||||
---
|
||||
|
||||
**Ansvarsfraskrivelse**:
|
||||
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på at sikre nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi er ikke ansvarlige for eventuelle misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.
|
||||
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal det bemærkes, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os ikke ansvar for misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.
|
||||
@ -0,0 +1,415 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
|
||||
"translation_date": "2025-10-03T11:29:49+00:00",
|
||||
"source_file": "AGENTS.md",
|
||||
"language_code": "da"
|
||||
}
|
||||
-->
|
||||
# AGENTS.md
|
||||
|
||||
## Projektoversigt
|
||||
|
||||
Dette er et uddannelsesmateriale-repository designet til at lære begyndere grundlæggende webudvikling. Curriculumet er et omfattende 12-ugers kursus udviklet af Microsoft Cloud Advocates, med 24 praktiske lektioner, der dækker JavaScript, CSS og HTML.
|
||||
|
||||
### Nøglekomponenter
|
||||
|
||||
- **Uddannelsesindhold**: 24 strukturerede lektioner organiseret i projektbaserede moduler
|
||||
- **Praktiske projekter**: Terrarium, Skrivespil, Browserudvidelse, Rumspil, Bankapp, Kodeeditor og AI-chatassistent
|
||||
- **Interaktive quizzer**: 48 quizzer med 3 spørgsmål hver (før/efter lektion vurderinger)
|
||||
- **Flersproget support**: Automatiske oversættelser til 50+ sprog via GitHub Actions
|
||||
- **Teknologier**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (til AI-projekter)
|
||||
|
||||
### Arkitektur
|
||||
|
||||
- Uddannelsesrepository med lektionbaseret struktur
|
||||
- Hver lektionmappe indeholder README, kodeeksempler og løsninger
|
||||
- Selvstændige projekter i separate mapper (quiz-app, diverse lektionprojekter)
|
||||
- Oversættelsessystem ved hjælp af GitHub Actions (co-op-translator)
|
||||
- Dokumentation leveret via Docsify og tilgængelig som PDF
|
||||
|
||||
## Opsætningskommandoer
|
||||
|
||||
Dette repository er primært til forbrug af uddannelsesindhold. For at arbejde med specifikke projekter:
|
||||
|
||||
### Opsætning af hovedrepository
|
||||
|
||||
```bash
|
||||
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
|
||||
cd Web-Dev-For-Beginners
|
||||
```
|
||||
|
||||
### Opsætning af Quiz App (Vue 3 + Vite)
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm install
|
||||
npm run dev # Start development server
|
||||
npm run build # Build for production
|
||||
npm run lint # Run ESLint
|
||||
```
|
||||
|
||||
### Bankprojekt API (Node.js + Express)
|
||||
|
||||
```bash
|
||||
cd 7-bank-project/api
|
||||
npm install
|
||||
npm start # Start API server
|
||||
npm run lint # Run ESLint
|
||||
npm run format # Format with Prettier
|
||||
```
|
||||
|
||||
### Browserudvidelsesprojekter
|
||||
|
||||
```bash
|
||||
cd 5-browser-extension/solution
|
||||
npm install
|
||||
# Follow browser-specific extension loading instructions
|
||||
```
|
||||
|
||||
### Rumspilsprojekter
|
||||
|
||||
```bash
|
||||
cd 6-space-game/solution
|
||||
npm install
|
||||
# Open index.html in browser or use Live Server
|
||||
```
|
||||
|
||||
### Chatprojekt (Python-backend)
|
||||
|
||||
```bash
|
||||
cd 9-chat-project/solution/backend/python
|
||||
pip install openai
|
||||
# Set GITHUB_TOKEN environment variable
|
||||
python api.py
|
||||
```
|
||||
|
||||
## Udviklingsworkflow
|
||||
|
||||
### For indholdsbidragydere
|
||||
|
||||
1. **Fork repositoryet** til din GitHub-konto
|
||||
2. **Klon din fork** lokalt
|
||||
3. **Opret en ny branch** til dine ændringer
|
||||
4. Foretag ændringer i lektionindhold eller kodeeksempler
|
||||
5. Test eventuelle kodeændringer i relevante projektmapper
|
||||
6. Indsend pull requests i henhold til bidragsretningslinjer
|
||||
|
||||
### For lærende
|
||||
|
||||
1. Fork eller klon repositoryet
|
||||
2. Naviger til lektionmapperne i rækkefølge
|
||||
3. Læs README-filerne for hver lektion
|
||||
4. Tag før-lektion quizzer på https://ff-quizzes.netlify.app/web/
|
||||
5. Arbejd gennem kodeeksempler i lektionmapperne
|
||||
6. Fuldfør opgaver og udfordringer
|
||||
7. Tag efter-lektion quizzer
|
||||
|
||||
### Live udvikling
|
||||
|
||||
- **Dokumentation**: Kør `docsify serve` i roden (port 3000)
|
||||
- **Quiz App**: Kør `npm run dev` i quiz-app mappen
|
||||
- **Projekter**: Brug VS Code Live Server-udvidelsen til HTML-projekter
|
||||
- **API-projekter**: Kør `npm start` i de respektive API-mapper
|
||||
|
||||
## Testinstruktioner
|
||||
|
||||
### Test af Quiz App
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm run lint # Check for code style issues
|
||||
npm run build # Verify build succeeds
|
||||
```
|
||||
|
||||
### Test af Bank API
|
||||
|
||||
```bash
|
||||
cd 7-bank-project/api
|
||||
npm run lint # Check for code style issues
|
||||
node server.js # Verify server starts without errors
|
||||
```
|
||||
|
||||
### Generel testtilgang
|
||||
|
||||
- Dette er et uddannelsesrepository uden omfattende automatiserede tests
|
||||
- Manuel test fokuserer på:
|
||||
- Kodeeksempler kører uden fejl
|
||||
- Links i dokumentationen fungerer korrekt
|
||||
- Projektbygninger fuldføres succesfuldt
|
||||
- Eksempler følger bedste praksis
|
||||
|
||||
### Kontroller før indsendelse
|
||||
|
||||
- Kør `npm run lint` i mapper med package.json
|
||||
- Bekræft, at markdown-links er gyldige
|
||||
- Test kodeeksempler i browser eller Node.js
|
||||
- Kontroller, at oversættelser bevarer korrekt struktur
|
||||
|
||||
## Kodestilretningslinjer
|
||||
|
||||
### JavaScript
|
||||
|
||||
- Brug moderne ES6+ syntaks
|
||||
- Følg standard ESLint-konfigurationer leveret i projekterne
|
||||
- Brug meningsfulde variabel- og funktionsnavne for uddannelsesmæssig klarhed
|
||||
- Tilføj kommentarer, der forklarer koncepter for lærende
|
||||
- Formater med Prettier, hvor det er konfigureret
|
||||
|
||||
### HTML/CSS
|
||||
|
||||
- Semantiske HTML5-elementer
|
||||
- Principper for responsivt design
|
||||
- Klare klassifikationsnavne
|
||||
- Kommentarer, der forklarer CSS-teknikker for lærende
|
||||
|
||||
### Python
|
||||
|
||||
- PEP 8 stilretningslinjer
|
||||
- Klare, uddannelsesmæssige kodeeksempler
|
||||
- Type hints, hvor det er nyttigt for læring
|
||||
|
||||
### Markdown-dokumentation
|
||||
|
||||
- Klar overskriftsstruktur
|
||||
- Kodeblokke med sprogspecifikation
|
||||
- Links til yderligere ressourcer
|
||||
- Skærmbilleder og billeder i `images/` mapper
|
||||
- Alt-tekst til billeder for tilgængelighed
|
||||
|
||||
### Filorganisation
|
||||
|
||||
- Lektioner nummereret sekventielt (1-getting-started-lessons, 2-js-basics, osv.)
|
||||
- Hvert projekt har `solution/` og ofte `start/` eller `your-work/` mapper
|
||||
- Billeder gemt i lektion-specifikke `images/` mapper
|
||||
- Oversættelser i `translations/{language-code}/` struktur
|
||||
|
||||
## Bygning og udrulning
|
||||
|
||||
### Quiz App udrulning (Azure Static Web Apps)
|
||||
|
||||
Quiz-app er konfigureret til udrulning på Azure Static Web Apps:
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm run build # Creates dist/ folder
|
||||
# Deploys via GitHub Actions workflow on push to main
|
||||
```
|
||||
|
||||
Azure Static Web Apps konfiguration:
|
||||
- **App placering**: `/quiz-app`
|
||||
- **Output placering**: `dist`
|
||||
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
|
||||
|
||||
### Generering af dokumentation som PDF
|
||||
|
||||
```bash
|
||||
npm install # Install docsify-to-pdf
|
||||
npm run convert # Generate PDF from docs
|
||||
```
|
||||
|
||||
### Docsify-dokumentation
|
||||
|
||||
```bash
|
||||
npm install -g docsify-cli # Install Docsify globally
|
||||
docsify serve # Serve on localhost:3000
|
||||
```
|
||||
|
||||
### Projekt-specifikke bygninger
|
||||
|
||||
Hver projektmappe kan have sin egen byggeproces:
|
||||
- Vue-projekter: `npm run build` skaber produktionsbundter
|
||||
- Statiske projekter: Ingen byggeproces, server filer direkte
|
||||
|
||||
## Retningslinjer for pull requests
|
||||
|
||||
### Titelformat
|
||||
|
||||
Brug klare, beskrivende titler, der angiver ændringsområdet:
|
||||
- `[Quiz-app] Tilføj ny quiz til lektion X`
|
||||
- `[Lesson-3] Ret stavefejl i terrarium-projekt`
|
||||
- `[Translation] Tilføj spansk oversættelse til lektion 5`
|
||||
- `[Docs] Opdater opsætningsinstruktioner`
|
||||
|
||||
### Påkrævede kontroller
|
||||
|
||||
Før indsendelse af en PR:
|
||||
|
||||
1. **Kodekvalitet**:
|
||||
- Kør `npm run lint` i berørte projektmapper
|
||||
- Ret alle linting-fejl og advarsler
|
||||
|
||||
2. **Bygverifikation**:
|
||||
- Kør `npm run build`, hvis relevant
|
||||
- Sørg for, at der ikke er byggefejl
|
||||
|
||||
3. **Linkvalidering**:
|
||||
- Test alle markdown-links
|
||||
- Bekræft, at billedreferencer fungerer
|
||||
|
||||
4. **Indholdsrevision**:
|
||||
- Læs korrektur for stave- og grammatikfejl
|
||||
- Sørg for, at kodeeksempler er korrekte og uddannelsesmæssige
|
||||
- Bekræft, at oversættelser bevarer original betydning
|
||||
|
||||
### Bidragskrav
|
||||
|
||||
- Accepter Microsoft CLA (automatisk kontrol ved første PR)
|
||||
- Følg [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
|
||||
- Se [CONTRIBUTING.md](./CONTRIBUTING.md) for detaljerede retningslinjer
|
||||
- Referer til problemnumre i PR-beskrivelsen, hvis relevant
|
||||
|
||||
### Reviewproces
|
||||
|
||||
- PR'er gennemgås af maintainers og fællesskabet
|
||||
- Uddannelsesmæssig klarhed prioriteres
|
||||
- Kodeeksempler skal følge aktuelle bedste praksis
|
||||
- Oversættelser gennemgås for nøjagtighed og kulturel relevans
|
||||
|
||||
## Oversættelsessystem
|
||||
|
||||
### Automatisk oversættelse
|
||||
|
||||
- Bruger GitHub Actions med co-op-translator workflow
|
||||
- Oversætter automatisk til 50+ sprog
|
||||
- Kildemapper i hovedmapper
|
||||
- Oversatte filer i `translations/{language-code}/` mapper
|
||||
|
||||
### Tilføjelse af manuelle oversættelsesforbedringer
|
||||
|
||||
1. Find filen i `translations/{language-code}/`
|
||||
2. Foretag forbedringer, mens strukturen bevares
|
||||
3. Sørg for, at kodeeksempler forbliver funktionelle
|
||||
4. Test eventuelt lokaliseret quizindhold
|
||||
|
||||
### Oversættelsesmetadata
|
||||
|
||||
Oversatte filer inkluderer metadata-header:
|
||||
```markdown
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "...",
|
||||
"translation_date": "...",
|
||||
"source_file": "...",
|
||||
"language_code": "..."
|
||||
}
|
||||
-->
|
||||
```
|
||||
|
||||
## Fejlfinding og problemløsning
|
||||
|
||||
### Almindelige problemer
|
||||
|
||||
**Quiz-app starter ikke**:
|
||||
- Kontroller Node.js version (v14+ anbefales)
|
||||
- Slet `node_modules` og `package-lock.json`, kør `npm install` igen
|
||||
- Kontroller for portkonflikter (standard: Vite bruger port 5173)
|
||||
|
||||
**API-server starter ikke**:
|
||||
- Bekræft, at Node.js version opfylder minimumskrav (node >=10)
|
||||
- Kontroller, om porten allerede er i brug
|
||||
- Sørg for, at alle afhængigheder er installeret med `npm install`
|
||||
|
||||
**Browserudvidelse indlæses ikke**:
|
||||
- Bekræft, at manifest.json er korrekt formateret
|
||||
- Kontroller browserkonsollen for fejl
|
||||
- Følg browser-specifikke installationsinstruktioner for udvidelser
|
||||
|
||||
**Problemer med Python-chatprojekt**:
|
||||
- Sørg for, at OpenAI-pakken er installeret: `pip install openai`
|
||||
- Bekræft, at GITHUB_TOKEN miljøvariablen er sat
|
||||
- Kontroller GitHub Models adgangstilladelser
|
||||
|
||||
**Docsify serverer ikke dokumentation**:
|
||||
- Installer docsify-cli globalt: `npm install -g docsify-cli`
|
||||
- Kør fra repositoryets rodmappe
|
||||
- Kontroller, at `docs/_sidebar.md` eksisterer
|
||||
|
||||
### Tips til udviklingsmiljø
|
||||
|
||||
- Brug VS Code med Live Server-udvidelsen til HTML-projekter
|
||||
- Installer ESLint og Prettier-udvidelser for konsistent formatering
|
||||
- Brug browserens DevTools til fejlfinding af JavaScript
|
||||
- For Vue-projekter, installer Vue DevTools browserudvidelse
|
||||
|
||||
### Ydelseshensyn
|
||||
|
||||
- Det store antal oversatte filer (50+ sprog) betyder, at fulde kloner er store
|
||||
- Brug en lav dybde klon, hvis du kun arbejder på indhold: `git clone --depth 1`
|
||||
- Ekskluder oversættelser fra søgninger, når du arbejder på engelsk indhold
|
||||
- Byggeprocesser kan være langsomme ved første kørsel (npm install, Vite build)
|
||||
|
||||
## Sikkerhedshensyn
|
||||
|
||||
### Miljøvariabler
|
||||
|
||||
- API-nøgler må aldrig committes til repositoryet
|
||||
- Brug `.env` filer (allerede i `.gitignore`)
|
||||
- Dokumenter påkrævede miljøvariabler i projekt-README'er
|
||||
|
||||
### Python-projekter
|
||||
|
||||
- Brug virtuelle miljøer: `python -m venv venv`
|
||||
- Hold afhængigheder opdateret
|
||||
- GitHub tokens bør have minimale nødvendige tilladelser
|
||||
|
||||
### GitHub Models adgang
|
||||
|
||||
- Personlige adgangstokens (PAT) kræves for GitHub Models
|
||||
- Tokens bør gemmes som miljøvariabler
|
||||
- Tokens eller legitimationsoplysninger må aldrig committes
|
||||
|
||||
## Yderligere noter
|
||||
|
||||
### Målgruppe
|
||||
|
||||
- Komplette begyndere inden for webudvikling
|
||||
- Studerende og selvstændige lærende
|
||||
- Lærere, der bruger curriculumet i klasseværelser
|
||||
- Indholdet er designet til tilgængelighed og gradvis færdighedsopbygning
|
||||
|
||||
### Uddannelsesfilosofi
|
||||
|
||||
- Projektbaseret læringsmetode
|
||||
- Hyppige videnskontroller (quizzer)
|
||||
- Praktiske kodningsøvelser
|
||||
- Eksempler med anvendelse i den virkelige verden
|
||||
- Fokus på grundlæggende før frameworks
|
||||
|
||||
### Repository-vedligeholdelse
|
||||
|
||||
- Aktivt fællesskab af lærende og bidragydere
|
||||
- Regelmæssige opdateringer af afhængigheder og indhold
|
||||
- Problemer og diskussioner overvåges af maintainers
|
||||
- Oversættelsesopdateringer automatiseret via GitHub Actions
|
||||
|
||||
### Relaterede ressourcer
|
||||
|
||||
- [Microsoft Learn-moduler](https://docs.microsoft.com/learn/)
|
||||
- [Student Hub-ressourcer](https://docs.microsoft.com/learn/student-hub/)
|
||||
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) anbefales til lærende
|
||||
- Yderligere kurser: Generativ AI, Data Science, ML, IoT curriculum tilgængelige
|
||||
|
||||
### Arbejde med specifikke projekter
|
||||
|
||||
For detaljerede instruktioner om individuelle projekter, se README-filerne i:
|
||||
- `quiz-app/README.md` - Vue 3 quiz-applikation
|
||||
- `7-bank-project/README.md` - Bankapplikation med autentifikation
|
||||
- `5-browser-extension/README.md` - Udvikling af browserudvidelser
|
||||
- `6-space-game/README.md` - Canvas-baseret spiludvikling
|
||||
- `9-chat-project/README.md` - AI-chatassistentprojekt
|
||||
|
||||
### Monorepo-struktur
|
||||
|
||||
Selvom det ikke er en traditionel monorepo, indeholder dette repository flere uafhængige projekter:
|
||||
- Hver lektion er selvstændig
|
||||
- Projekter deler ikke afhængigheder
|
||||
- Arbejd på individuelle projekter uden at påvirke andre
|
||||
- Klon hele repoet for den fulde curriculumoplevelse
|
||||
|
||||
---
|
||||
|
||||
**Ansvarsfraskrivelse**:
|
||||
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på at sikre nøjagtighed, skal det bemærkes, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os ikke ansvar for eventuelle misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.
|
||||
@ -1,47 +1,78 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "75cb51f7ca9ea0b097ef4a1287e9290c",
|
||||
"translation_date": "2025-08-26T21:24:52+00:00",
|
||||
"original_hash": "71009af209f81cc01a1f2d324200375f",
|
||||
"translation_date": "2025-10-03T09:57:07+00:00",
|
||||
"source_file": "for-teachers.md",
|
||||
"language_code": "da"
|
||||
}
|
||||
-->
|
||||
## For undervisere
|
||||
### For undervisere
|
||||
|
||||
Vil du bruge dette pensum i dit klasseværelse? Du er meget velkommen til det!
|
||||
Du er velkommen til at bruge dette pensum i din undervisning. Det fungerer problemfrit med GitHub Classroom og førende LMS-platforme, og det kan også bruges som et selvstændigt repo med dine elever.
|
||||
|
||||
Faktisk kan du bruge det direkte på GitHub ved at bruge GitHub Classroom.
|
||||
### Brug med GitHub Classroom
|
||||
|
||||
For at gøre det, skal du forgrene dette repo. Du skal oprette et repo for hver lektion, så du bliver nødt til at udtrække hver mappe til et separat repo. På den måde kan [GitHub Classroom](https://classroom.github.com/classrooms) håndtere hver lektion individuelt.
|
||||
For at administrere lektioner og opgaver pr. hold, opret et repository pr. lektion, så GitHub Classroom kan tilknytte hver opgave uafhængigt.
|
||||
|
||||
Disse [fulde instruktioner](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) giver dig en idé om, hvordan du opsætter dit klasseværelse.
|
||||
- Fork dette repo til din organisation.
|
||||
- Opret et separat repo for hver lektion ved at udtrække hver lektionmappe til sit eget repository.
|
||||
- Mulighed A: Opret tomme repos (et pr. lektion) og kopier indholdet af lektionmappen ind i hver.
|
||||
- Mulighed B: Brug en metode, der bevarer Git-historikken (f.eks. split en mappe til et nyt repo), hvis du har brug for oprindelse.
|
||||
- I GitHub Classroom, opret en opgave pr. lektion og peg den til det tilsvarende lektionrepo.
|
||||
- Anbefalede indstillinger:
|
||||
- Repository-synlighed: privat for elevarbejde.
|
||||
- Brug startkode fra lektionrepoets standardgren.
|
||||
- Tilføj issue- og pull request-skabeloner til quizzer og indsendelser.
|
||||
- Konfigurer eventuelt autogradering og tests, hvis dine lektioner inkluderer dem.
|
||||
- Konventioner, der hjælper:
|
||||
- Repository-navne som lesson-01-intro, lesson-02-html osv.
|
||||
- Labels: quiz, assignment, needs-review, late, resubmission.
|
||||
- Tags/releases pr. hold (f.eks. v2025-term1).
|
||||
|
||||
## Brug i Moodle, Canvas eller Blackboard
|
||||
Tip: Undgå at gemme repositories i synkroniserede mapper (f.eks. OneDrive/Google Drive) for at forhindre Git-konflikter på Windows.
|
||||
|
||||
Dette pensum fungerer godt i disse Learning Management Systems! Brug [Moodle-uploadfilen](../../../../../../../teaching-files/webdev-moodle.mbz) for det fulde indhold, eller prøv [Common Cartridge-filen](../../../../../../../teaching-files/webdev-common-cartridge.imscc), som indeholder noget af indholdet. Moodle Cloud understøtter ikke fulde Common Cartridge-eksporter, så det er bedre at bruge Moodle-downloadfilen, som kan uploades til Canvas. Fortæl os gerne, hvordan vi kan forbedre denne oplevelse.
|
||||
### Brug med Moodle, Canvas eller Blackboard
|
||||
|
||||
Dette pensum inkluderer importbare pakker til almindelige LMS-arbejdsgange.
|
||||
|
||||
- Moodle: Brug Moodle-uploadfilen [Moodle upload file](../../../../../../../teaching-files/webdev-moodle.mbz) til at indlæse hele kurset.
|
||||
- Common Cartridge: Brug Common Cartridge-filen [Common Cartridge file](../../../../../../../teaching-files/webdev-common-cartridge.imscc) for bredere LMS-kompatibilitet.
|
||||
- Bemærkninger:
|
||||
- Moodle Cloud har begrænset Common Cartridge-support. Foretræk Moodle-filen ovenfor, som også kan uploades til Canvas.
|
||||
- Efter import, gennemgå moduler, deadlines og quizindstillinger for at matche din terminsplan.
|
||||
|
||||
|
||||
> Pensum i et Moodle-klasseværelse
|
||||
> Pensum i et Moodle-klasselokale
|
||||
|
||||
|
||||
> Pensum i Canvas
|
||||
|
||||
## Brug af repoet som det er
|
||||
### Brug repoet direkte (uden Classroom)
|
||||
|
||||
Hvis du ønsker at bruge dette repo, som det er, uden at bruge GitHub Classroom, kan det også lade sig gøre. Du skal blot kommunikere med dine elever om, hvilken lektion de skal arbejde med.
|
||||
Hvis du foretrækker ikke at bruge GitHub Classroom, kan du køre kurset direkte fra dette repo.
|
||||
|
||||
I et onlineformat (Zoom, Teams eller andre) kan du oprette breakout-rum til quizzerne og vejlede eleverne, så de er klar til at lære. Derefter kan du invitere eleverne til quizzerne og få dem til at indsende deres svar som 'issues' på et bestemt tidspunkt. Du kan gøre det samme med opgaver, hvis du ønsker, at eleverne skal arbejde sammen i det åbne.
|
||||
- Synkrone/online formater (Zoom/Teams):
|
||||
- Kør korte mentorledede opvarmninger; brug breakout rooms til quizzer.
|
||||
- Annoncer et tidsvindue for quizzer; elever indsender svar som GitHub Issues.
|
||||
- Til samarbejdsopgaver arbejder elever i offentlige lektionrepos og åbner pull requests.
|
||||
- Private/asynkrone formater:
|
||||
- Elever forker hver lektion til deres egne **private** repos og tilføjer dig som samarbejdspartner.
|
||||
- De indsender via Issues (quizzer) og Pull Requests (opgaver) på dit klasselokale-repo eller deres private forks.
|
||||
|
||||
Hvis du foretrækker et mere privat format, kan du bede dine elever om at forgrene pensum, lektion for lektion, til deres egne private GitHub-repos og give dig adgang. Derefter kan de gennemføre quizzer og opgaver privat og indsende dem til dig via issues på dit klasseværelsesrepo.
|
||||
### Bedste praksis
|
||||
|
||||
Der er mange måder at få dette til at fungere i et online klasseværelsesformat. Fortæl os gerne, hvad der fungerer bedst for dig!
|
||||
- Giv en introduktionslektion om Git/GitHub-grundlæggende, Issues og PRs.
|
||||
- Brug tjeklister i Issues til opgaver/quizzer med flere trin.
|
||||
- Tilføj CONTRIBUTING.md og CODE_OF_CONDUCT.md for at sætte klasselokalenormer.
|
||||
- Tilføj tilgængelighedsnoter (alt-tekst, undertekster) og tilbyd printbare PDF'er.
|
||||
- Versionér dit indhold pr. termin og frys lektionrepos efter offentliggørelse.
|
||||
|
||||
## Giv os din feedback!
|
||||
### Feedback og support
|
||||
|
||||
Vi ønsker at gøre dette pensum brugbart for dig og dine elever. Kontakt os på [Teacher corner](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) og opret en [**ny issue**](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) for eventuelle ønsker, fejl og feedback.
|
||||
Vi ønsker, at dette pensum skal fungere for dig og dine elever. Opret venligst et nyt Issue i dette repository for fejl, forespørgsler eller forbedringer, eller start en diskussion i Teacher Corner.
|
||||
|
||||
---
|
||||
|
||||
**Ansvarsfraskrivelse**:
|
||||
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi er ikke ansvarlige for eventuelle misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse.
|
||||
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal det bemærkes, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os ikke ansvar for misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.
|
||||
@ -1,23 +1,31 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "1ce4deaec80130d3a0a3c906568459fc",
|
||||
"translation_date": "2025-08-24T13:01:28+00:00",
|
||||
"original_hash": "9e2f84e351a6fcb44bfc4066d98525f0",
|
||||
"translation_date": "2025-10-03T08:31:38+00:00",
|
||||
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
|
||||
"language_code": "de"
|
||||
}
|
||||
-->
|
||||
# Lesen der Dokumentation
|
||||
|
||||
## Anweisungen
|
||||
|
||||
Es gibt viele Werkzeuge, die ein Webentwickler benötigen könnte, die in der [MDN-Dokumentation für clientseitige Tools](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) aufgeführt sind. Wähle 3 Werkzeuge aus, die im Unterricht nicht behandelt wurden, erkläre, warum ein Webentwickler sie verwenden würde, und suche ein Werkzeug, das in diese Kategorie fällt, und teile dessen Dokumentation. Verwende nicht dasselbe Werkzeugbeispiel aus den MDN-Dokumenten.
|
||||
Es gibt viele Werkzeuge, die ein Webentwickler benötigen könnte, die in der [MDN-Dokumentation für clientseitige Tools](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) aufgeführt sind. Wählen Sie **drei Werkzeuge**, die **in dieser Lektion nicht behandelt werden** (ausgenommen [spezifische Werkzeuge auflisten oder auf den Inhalt der Lektion verweisen]), erklären Sie **warum** ein Webentwickler jedes Werkzeug verwenden würde, und finden Sie ein Werkzeug, das in jede Kategorie passt. Teilen Sie für jedes Werkzeug einen Link zu seiner offiziellen Dokumentation (nicht das Beispiel, das auf MDN verwendet wird).
|
||||
|
||||
**Format:**
|
||||
- Werkzeugname
|
||||
- Warum ein Webentwickler es verwenden würde (2-3 Sätze)
|
||||
- Link zur Dokumentation
|
||||
|
||||
**Länge:**
|
||||
- Jede Erklärung sollte 2-3 Sätze umfassen.
|
||||
|
||||
## Bewertungskriterien
|
||||
|
||||
Vorbildlich | Angemessen | Verbesserungswürdig
|
||||
--- | --- | -- |
|
||||
| Erklärt, warum ein Webentwickler das Werkzeug verwenden würde | Erklärt, wie, aber nicht warum ein Entwickler das Werkzeug verwenden würde | Hat nicht erwähnt, wie oder warum ein Entwickler das Werkzeug verwenden würde |
|
||||
Erklärt, warum ein Webentwickler das Werkzeug verwenden würde | Erklärt, wie, aber nicht warum ein Entwickler das Werkzeug verwenden würde | Hat nicht erwähnt, wie oder warum ein Entwickler das Werkzeug verwenden würde |
|
||||
|
||||
---
|
||||
|
||||
**Haftungsausschluss**:
|
||||
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, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische 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 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 ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.
|
||||
@ -0,0 +1,415 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
|
||||
"translation_date": "2025-10-03T11:13:31+00:00",
|
||||
"source_file": "AGENTS.md",
|
||||
"language_code": "de"
|
||||
}
|
||||
-->
|
||||
# AGENTS.md
|
||||
|
||||
## Projektübersicht
|
||||
|
||||
Dies ist ein Bildungsrepository, das Grundlagen der Webentwicklung für Anfänger vermittelt. Der Lehrplan ist ein umfassender 12-wöchiger Kurs, der von den Microsoft Cloud Advocates entwickelt wurde und 24 praxisorientierte Lektionen zu JavaScript, CSS und HTML umfasst.
|
||||
|
||||
### Hauptkomponenten
|
||||
|
||||
- **Bildungsinhalte**: 24 strukturierte Lektionen, organisiert in projektbasierte Module
|
||||
- **Praktische Projekte**: Terrarium, Schreibspiel, Browser-Erweiterung, Weltraumspiel, Banking-App, Code-Editor und KI-Chat-Assistent
|
||||
- **Interaktive Quizze**: 48 Quizze mit jeweils 3 Fragen (Vor-/Nach-Lektionen-Bewertungen)
|
||||
- **Mehrsprachige Unterstützung**: Automatische Übersetzungen in über 50 Sprachen via GitHub Actions
|
||||
- **Technologien**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (für KI-Projekte)
|
||||
|
||||
### Architektur
|
||||
|
||||
- Bildungsrepository mit lektionenbasierter Struktur
|
||||
- Jeder Lektionenordner enthält README, Codebeispiele und Lösungen
|
||||
- Eigenständige Projekte in separaten Verzeichnissen (quiz-app, verschiedene Lektionenprojekte)
|
||||
- Übersetzungssystem mit GitHub Actions (co-op-translator)
|
||||
- Dokumentation wird über Docsify bereitgestellt und ist als PDF verfügbar
|
||||
|
||||
## Setup-Befehle
|
||||
|
||||
Dieses Repository dient hauptsächlich dem Konsum von Bildungsinhalten. Für die Arbeit mit spezifischen Projekten:
|
||||
|
||||
### Hauptrepository-Setup
|
||||
|
||||
```bash
|
||||
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
|
||||
cd Web-Dev-For-Beginners
|
||||
```
|
||||
|
||||
### Quiz-App-Setup (Vue 3 + Vite)
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm install
|
||||
npm run dev # Start development server
|
||||
npm run build # Build for production
|
||||
npm run lint # Run ESLint
|
||||
```
|
||||
|
||||
### Bankprojekt-API (Node.js + Express)
|
||||
|
||||
```bash
|
||||
cd 7-bank-project/api
|
||||
npm install
|
||||
npm start # Start API server
|
||||
npm run lint # Run ESLint
|
||||
npm run format # Format with Prettier
|
||||
```
|
||||
|
||||
### Browser-Erweiterungsprojekte
|
||||
|
||||
```bash
|
||||
cd 5-browser-extension/solution
|
||||
npm install
|
||||
# Follow browser-specific extension loading instructions
|
||||
```
|
||||
|
||||
### Weltraumspiel-Projekte
|
||||
|
||||
```bash
|
||||
cd 6-space-game/solution
|
||||
npm install
|
||||
# Open index.html in browser or use Live Server
|
||||
```
|
||||
|
||||
### Chat-Projekt (Python-Backend)
|
||||
|
||||
```bash
|
||||
cd 9-chat-project/solution/backend/python
|
||||
pip install openai
|
||||
# Set GITHUB_TOKEN environment variable
|
||||
python api.py
|
||||
```
|
||||
|
||||
## Entwicklungsworkflow
|
||||
|
||||
### Für Inhaltsbeitragende
|
||||
|
||||
1. **Forken Sie das Repository** in Ihrem GitHub-Konto
|
||||
2. **Klonen Sie Ihren Fork** lokal
|
||||
3. **Erstellen Sie einen neuen Branch** für Ihre Änderungen
|
||||
4. Nehmen Sie Änderungen an den Lektioneninhalten oder Codebeispielen vor
|
||||
5. Testen Sie alle Codeänderungen in den relevanten Projektverzeichnissen
|
||||
6. Reichen Sie Pull-Requests gemäß den Beitragsrichtlinien ein
|
||||
|
||||
### Für Lernende
|
||||
|
||||
1. Forken oder klonen Sie das Repository
|
||||
2. Navigieren Sie nacheinander durch die Lektionenverzeichnisse
|
||||
3. Lesen Sie die README-Dateien jeder Lektion
|
||||
4. Machen Sie die Vor-Lektionen-Quizze unter https://ff-quizzes.netlify.app/web/
|
||||
5. Arbeiten Sie die Codebeispiele in den Lektionenordnern durch
|
||||
6. Bearbeiten Sie Aufgaben und Herausforderungen
|
||||
7. Machen Sie die Nach-Lektionen-Quizze
|
||||
|
||||
### Live-Entwicklung
|
||||
|
||||
- **Dokumentation**: Führen Sie `docsify serve` im Root-Verzeichnis aus (Port 3000)
|
||||
- **Quiz-App**: Führen Sie `npm run dev` im quiz-app-Verzeichnis aus
|
||||
- **Projekte**: Verwenden Sie die Live Server-Erweiterung von VS Code für HTML-Projekte
|
||||
- **API-Projekte**: Führen Sie `npm start` in den jeweiligen API-Verzeichnissen aus
|
||||
|
||||
## Testanweisungen
|
||||
|
||||
### Quiz-App-Test
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm run lint # Check for code style issues
|
||||
npm run build # Verify build succeeds
|
||||
```
|
||||
|
||||
### Bank-API-Test
|
||||
|
||||
```bash
|
||||
cd 7-bank-project/api
|
||||
npm run lint # Check for code style issues
|
||||
node server.js # Verify server starts without errors
|
||||
```
|
||||
|
||||
### Allgemeiner Testansatz
|
||||
|
||||
- Dies ist ein Bildungsrepository ohne umfassende automatisierte Tests
|
||||
- Manuelles Testen konzentriert sich auf:
|
||||
- Codebeispiele laufen fehlerfrei
|
||||
- Links in der Dokumentation funktionieren korrekt
|
||||
- Projekt-Builds werden erfolgreich abgeschlossen
|
||||
- Beispiele folgen Best Practices
|
||||
|
||||
### Vorabprüfungen
|
||||
|
||||
- Führen Sie `npm run lint` in Verzeichnissen mit package.json aus
|
||||
- Überprüfen Sie, ob Markdown-Links gültig sind
|
||||
- Testen Sie Codebeispiele im Browser oder mit Node.js
|
||||
- Stellen Sie sicher, dass Übersetzungen die richtige Struktur beibehalten
|
||||
|
||||
## Richtlinien für Code-Stil
|
||||
|
||||
### JavaScript
|
||||
|
||||
- Verwenden Sie moderne ES6+ Syntax
|
||||
- Folgen Sie den standardmäßigen ESLint-Konfigurationen in den Projekten
|
||||
- Verwenden Sie aussagekräftige Variablen- und Funktionsnamen für Bildungszwecke
|
||||
- Fügen Sie Kommentare hinzu, die Konzepte für Lernende erklären
|
||||
- Formatieren Sie mit Prettier, wo konfiguriert
|
||||
|
||||
### HTML/CSS
|
||||
|
||||
- Semantische HTML5-Elemente
|
||||
- Prinzipien des responsiven Designs
|
||||
- Klare Klassennamen-Konventionen
|
||||
- Kommentare, die CSS-Techniken für Lernende erklären
|
||||
|
||||
### Python
|
||||
|
||||
- PEP 8 Stilrichtlinien
|
||||
- Klare, bildungsorientierte Codebeispiele
|
||||
- Typ-Hinweise, wo hilfreich für das Lernen
|
||||
|
||||
### Markdown-Dokumentation
|
||||
|
||||
- Klare Überschriftenhierarchie
|
||||
- Codeblöcke mit Sprachspezifikation
|
||||
- Links zu zusätzlichen Ressourcen
|
||||
- Screenshots und Bilder in `images/` Verzeichnissen
|
||||
- Alt-Text für Bilder für Barrierefreiheit
|
||||
|
||||
### Dateiorganisation
|
||||
|
||||
- Lektionen nummeriert in Reihenfolge (1-getting-started-lessons, 2-js-basics, etc.)
|
||||
- Jedes Projekt hat `solution/` und oft `start/` oder `your-work/` Verzeichnisse
|
||||
- Bilder werden in lektionenspezifischen `images/` Ordnern gespeichert
|
||||
- Übersetzungen in `translations/{language-code}/` Struktur
|
||||
|
||||
## Build und Deployment
|
||||
|
||||
### Quiz-App-Deployment (Azure Static Web Apps)
|
||||
|
||||
Die quiz-app ist für die Bereitstellung auf Azure Static Web Apps konfiguriert:
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm run build # Creates dist/ folder
|
||||
# Deploys via GitHub Actions workflow on push to main
|
||||
```
|
||||
|
||||
Azure Static Web Apps Konfiguration:
|
||||
- **App-Standort**: `/quiz-app`
|
||||
- **Ausgabe-Standort**: `dist`
|
||||
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
|
||||
|
||||
### Dokumentations-PDF-Erstellung
|
||||
|
||||
```bash
|
||||
npm install # Install docsify-to-pdf
|
||||
npm run convert # Generate PDF from docs
|
||||
```
|
||||
|
||||
### Docsify-Dokumentation
|
||||
|
||||
```bash
|
||||
npm install -g docsify-cli # Install Docsify globally
|
||||
docsify serve # Serve on localhost:3000
|
||||
```
|
||||
|
||||
### Projekt-spezifische Builds
|
||||
|
||||
Jedes Projektverzeichnis kann seinen eigenen Build-Prozess haben:
|
||||
- Vue-Projekte: `npm run build` erstellt Produktions-Bundles
|
||||
- Statische Projekte: Kein Build-Schritt, Dateien direkt bereitstellen
|
||||
|
||||
## Richtlinien für Pull-Requests
|
||||
|
||||
### Titel-Format
|
||||
|
||||
Verwenden Sie klare, beschreibende Titel, die den Bereich der Änderung angeben:
|
||||
- `[Quiz-app] Neues Quiz für Lektion X hinzufügen`
|
||||
- `[Lesson-3] Tippfehler im Terrarium-Projekt beheben`
|
||||
- `[Translation] Spanische Übersetzung für Lektion 5 hinzufügen`
|
||||
- `[Docs] Setup-Anweisungen aktualisieren`
|
||||
|
||||
### Erforderliche Prüfungen
|
||||
|
||||
Vor dem Einreichen eines PR:
|
||||
|
||||
1. **Codequalität**:
|
||||
- Führen Sie `npm run lint` in den betroffenen Projektverzeichnissen aus
|
||||
- Beheben Sie alle Linting-Fehler und -Warnungen
|
||||
|
||||
2. **Build-Verifizierung**:
|
||||
- Führen Sie `npm run build` aus, falls zutreffend
|
||||
- Stellen Sie sicher, dass keine Build-Fehler auftreten
|
||||
|
||||
3. **Link-Validierung**:
|
||||
- Testen Sie alle Markdown-Links
|
||||
- Überprüfen Sie, ob Bildreferenzen funktionieren
|
||||
|
||||
4. **Inhaltsprüfung**:
|
||||
- Korrekturlesen auf Rechtschreibung und Grammatik
|
||||
- Sicherstellen, dass Codebeispiele korrekt und lehrreich sind
|
||||
- Überprüfen, ob Übersetzungen die ursprüngliche Bedeutung beibehalten
|
||||
|
||||
### Beitragsanforderungen
|
||||
|
||||
- Zustimmung zur Microsoft CLA (automatische Prüfung beim ersten PR)
|
||||
- Befolgen Sie den [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
|
||||
- Siehe [CONTRIBUTING.md](./CONTRIBUTING.md) für detaillierte Richtlinien
|
||||
- Verweisen Sie auf Issue-Nummern in der PR-Beschreibung, falls zutreffend
|
||||
|
||||
### Überprüfungsprozess
|
||||
|
||||
- PRs werden von Maintainer und der Community überprüft
|
||||
- Bildungsverständlichkeit hat Priorität
|
||||
- Codebeispiele sollten aktuellen Best Practices folgen
|
||||
- Übersetzungen werden auf Genauigkeit und kulturelle Angemessenheit geprüft
|
||||
|
||||
## Übersetzungssystem
|
||||
|
||||
### Automatische Übersetzung
|
||||
|
||||
- Verwendet GitHub Actions mit co-op-translator Workflow
|
||||
- Übersetzt automatisch in über 50 Sprachen
|
||||
- Quelldateien in Hauptverzeichnissen
|
||||
- Übersetzte Dateien in `translations/{language-code}/` Verzeichnissen
|
||||
|
||||
### Manuelle Verbesserungen an Übersetzungen hinzufügen
|
||||
|
||||
1. Datei im `translations/{language-code}/` Verzeichnis finden
|
||||
2. Verbesserungen vornehmen, während die Struktur erhalten bleibt
|
||||
3. Sicherstellen, dass Codebeispiele weiterhin funktionieren
|
||||
4. Lokalisierte Quiz-Inhalte testen
|
||||
|
||||
### Übersetzungs-Metadaten
|
||||
|
||||
Übersetzte Dateien enthalten einen Metadaten-Header:
|
||||
```markdown
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "...",
|
||||
"translation_date": "...",
|
||||
"source_file": "...",
|
||||
"language_code": "..."
|
||||
}
|
||||
-->
|
||||
```
|
||||
|
||||
## Debugging und Fehlerbehebung
|
||||
|
||||
### Häufige Probleme
|
||||
|
||||
**Quiz-App startet nicht**:
|
||||
- Überprüfen Sie die Node.js-Version (v14+ empfohlen)
|
||||
- Löschen Sie `node_modules` und `package-lock.json`, führen Sie `npm install` erneut aus
|
||||
- Überprüfen Sie auf Portkonflikte (Standard: Vite verwendet Port 5173)
|
||||
|
||||
**API-Server startet nicht**:
|
||||
- Überprüfen Sie, ob die Node.js-Version die Mindestanforderungen erfüllt (node >=10)
|
||||
- Überprüfen Sie, ob der Port bereits verwendet wird
|
||||
- Stellen Sie sicher, dass alle Abhängigkeiten mit `npm install` installiert sind
|
||||
|
||||
**Browser-Erweiterung lädt nicht**:
|
||||
- Überprüfen Sie, ob manifest.json korrekt formatiert ist
|
||||
- Überprüfen Sie die Browser-Konsole auf Fehler
|
||||
- Befolgen Sie die browser-spezifischen Installationsanweisungen für Erweiterungen
|
||||
|
||||
**Probleme mit Python-Chat-Projekt**:
|
||||
- Stellen Sie sicher, dass das OpenAI-Paket installiert ist: `pip install openai`
|
||||
- Überprüfen Sie, ob die Umgebungsvariable GITHUB_TOKEN gesetzt ist
|
||||
- Überprüfen Sie die Zugriffsberechtigungen für GitHub Models
|
||||
|
||||
**Docsify dient keine Dokumentation**:
|
||||
- Installieren Sie docsify-cli global: `npm install -g docsify-cli`
|
||||
- Führen Sie es aus dem Root-Verzeichnis des Repositorys aus
|
||||
- Überprüfen Sie, ob `docs/_sidebar.md` existiert
|
||||
|
||||
### Tipps zur Entwicklungsumgebung
|
||||
|
||||
- Verwenden Sie VS Code mit der Live Server-Erweiterung für HTML-Projekte
|
||||
- Installieren Sie ESLint und Prettier-Erweiterungen für konsistente Formatierung
|
||||
- Verwenden Sie die DevTools des Browsers zum Debuggen von JavaScript
|
||||
- Für Vue-Projekte installieren Sie die Vue DevTools Browser-Erweiterung
|
||||
|
||||
### Leistungserwägungen
|
||||
|
||||
- Eine große Anzahl übersetzter Dateien (50+ Sprachen) bedeutet, dass vollständige Klone groß sind
|
||||
- Verwenden Sie einen flachen Klon, wenn Sie nur an Inhalten arbeiten: `git clone --depth 1`
|
||||
- Schließen Sie Übersetzungen von Suchvorgängen aus, wenn Sie an englischen Inhalten arbeiten
|
||||
- Build-Prozesse können beim ersten Lauf langsam sein (npm install, Vite build)
|
||||
|
||||
## Sicherheitsüberlegungen
|
||||
|
||||
### Umgebungsvariablen
|
||||
|
||||
- API-Schlüssel sollten niemals im Repository gespeichert werden
|
||||
- Verwenden Sie `.env` Dateien (bereits in `.gitignore`)
|
||||
- Dokumentieren Sie erforderliche Umgebungsvariablen in den Projekt-READMEs
|
||||
|
||||
### Python-Projekte
|
||||
|
||||
- Verwenden Sie virtuelle Umgebungen: `python -m venv venv`
|
||||
- Halten Sie Abhängigkeiten aktuell
|
||||
- GitHub-Token sollten minimale erforderliche Berechtigungen haben
|
||||
|
||||
### GitHub Models Zugriff
|
||||
|
||||
- Persönliche Zugriffstoken (PAT) erforderlich für GitHub Models
|
||||
- Token sollten als Umgebungsvariablen gespeichert werden
|
||||
- Token oder Anmeldeinformationen niemals commiten
|
||||
|
||||
## Zusätzliche Hinweise
|
||||
|
||||
### Zielgruppe
|
||||
|
||||
- Vollständige Anfänger in der Webentwicklung
|
||||
- Studenten und Selbstlernende
|
||||
- Lehrer, die den Lehrplan im Unterricht verwenden
|
||||
- Inhalte sind für Barrierefreiheit und schrittweisen Kompetenzaufbau konzipiert
|
||||
|
||||
### Bildungsphilosophie
|
||||
|
||||
- Projektbasierter Lernansatz
|
||||
- Häufige Wissensüberprüfungen (Quizze)
|
||||
- Praktische Codierungsübungen
|
||||
- Beispiele aus der realen Welt
|
||||
- Fokus auf Grundlagen vor Frameworks
|
||||
|
||||
### Repository-Wartung
|
||||
|
||||
- Aktive Community von Lernenden und Beitragenden
|
||||
- Regelmäßige Updates von Abhängigkeiten und Inhalten
|
||||
- Issues und Diskussionen werden von Maintainer überwacht
|
||||
- Übersetzungsupdates automatisiert über GitHub Actions
|
||||
|
||||
### Verwandte Ressourcen
|
||||
|
||||
- [Microsoft Learn Module](https://docs.microsoft.com/learn/)
|
||||
- [Student Hub Ressourcen](https://docs.microsoft.com/learn/student-hub/)
|
||||
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) empfohlen für Lernende
|
||||
- Zusätzliche Kurse: Generative KI, Data Science, ML, IoT Lehrpläne verfügbar
|
||||
|
||||
### Arbeit mit spezifischen Projekten
|
||||
|
||||
Für detaillierte Anweisungen zu einzelnen Projekten, siehe die README-Dateien in:
|
||||
- `quiz-app/README.md` - Vue 3 Quiz-Anwendung
|
||||
- `7-bank-project/README.md` - Banking-Anwendung mit Authentifizierung
|
||||
- `5-browser-extension/README.md` - Entwicklung von Browser-Erweiterungen
|
||||
- `6-space-game/README.md` - Canvas-basiertes Spiel
|
||||
- `9-chat-project/README.md` - KI-Chat-Assistent-Projekt
|
||||
|
||||
### Monorepo-Struktur
|
||||
|
||||
Obwohl kein traditionelles Monorepo, enthält dieses Repository mehrere unabhängige Projekte:
|
||||
- Jede Lektion ist eigenständig
|
||||
- Projekte teilen keine Abhängigkeiten
|
||||
- Arbeiten Sie an einzelnen Projekten, ohne andere zu beeinflussen
|
||||
- Klonen Sie das gesamte Repository für das vollständige Curriculum-Erlebnis
|
||||
|
||||
---
|
||||
|
||||
**Haftungsausschluss**:
|
||||
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 ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.
|
||||
@ -1,45 +1,78 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "75cb51f7ca9ea0b097ef4a1287e9290c",
|
||||
"translation_date": "2025-08-24T11:54:33+00:00",
|
||||
"original_hash": "71009af209f81cc01a1f2d324200375f",
|
||||
"translation_date": "2025-10-03T08:28:59+00:00",
|
||||
"source_file": "for-teachers.md",
|
||||
"language_code": "de"
|
||||
}
|
||||
-->
|
||||
## Für Lehrkräfte
|
||||
### Für Lehrkräfte
|
||||
|
||||
Möchten Sie dieses Curriculum in Ihrem Unterricht verwenden? Sehr gerne!
|
||||
Sie können dieses Curriculum gerne in Ihrem Unterricht verwenden. Es funktioniert nahtlos mit GitHub Classroom und führenden LMS-Plattformen und kann auch als eigenständiges Repository mit Ihren Schülern genutzt werden.
|
||||
|
||||
Tatsächlich können Sie es direkt auf GitHub nutzen, indem Sie GitHub Classroom verwenden.
|
||||
### Verwendung mit GitHub Classroom
|
||||
|
||||
Dazu müssen Sie dieses Repository forken. Sie benötigen ein separates Repository für jede Lektion, daher müssen Sie jeden Ordner in ein eigenes Repository extrahieren. Auf diese Weise kann [GitHub Classroom](https://classroom.github.com/classrooms) jede Lektion einzeln erfassen.
|
||||
Um Lektionen und Aufgaben pro Kohorte zu verwalten, erstellen Sie ein Repository pro Lektion, damit GitHub Classroom jede Aufgabe unabhängig verknüpfen kann.
|
||||
|
||||
Diese [vollständigen Anweisungen](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) geben Ihnen eine Vorstellung davon, wie Sie Ihr Klassenzimmer einrichten können.
|
||||
- Forken Sie dieses Repository in Ihre Organisation.
|
||||
- Erstellen Sie ein separates Repository für jede Lektion, indem Sie jeden Lektionen-Ordner in ein eigenes Repository extrahieren.
|
||||
- Option A: Erstellen Sie leere Repositories (eines pro Lektion) und kopieren Sie die Inhalte des Lektionen-Ordners in jedes.
|
||||
- Option B: Verwenden Sie einen Ansatz, der den Git-Verlauf beibehält (z. B. einen Ordner in ein neues Repository aufteilen), falls Sie die Herkunft benötigen.
|
||||
- Erstellen Sie in GitHub Classroom eine Aufgabe pro Lektion und verweisen Sie auf das entsprechende Lektionen-Repository.
|
||||
- Empfohlene Einstellungen:
|
||||
- Repository-Sichtbarkeit: privat für die Arbeit der Schüler.
|
||||
- Verwenden Sie Starter-Code aus dem Standard-Branch des Lektionen-Repositories.
|
||||
- Fügen Sie Issue- und Pull-Request-Vorlagen für Quizfragen und Einreichungen hinzu.
|
||||
- Konfigurieren Sie optional Autograding und Tests, falls Ihre Lektionen diese enthalten.
|
||||
- Hilfreiche Konventionen:
|
||||
- Repository-Namen wie lesson-01-intro, lesson-02-html usw.
|
||||
- Labels: quiz, assignment, needs-review, late, resubmission.
|
||||
- Tags/Releases pro Kohorte (z. B. v2025-term1).
|
||||
|
||||
## Nutzung in Moodle, Canvas oder Blackboard
|
||||
Tipp: Vermeiden Sie es, Repositories in synchronisierten Ordnern (z. B. OneDrive/Google Drive) zu speichern, um Git-Konflikte unter Windows zu verhindern.
|
||||
|
||||
Dieses Curriculum funktioniert hervorragend in diesen Learning Management Systemen! Verwenden Sie die [Moodle-Datei](../../../../../../../teaching-files/webdev-moodle.mbz) für den vollständigen Inhalt oder probieren Sie die [Common Cartridge-Datei](../../../../../../../teaching-files/webdev-common-cartridge.imscc), die einen Teil des Inhalts enthält. Moodle Cloud unterstützt keine vollständigen Common Cartridge-Exporte, daher ist es besser, die Moodle-Download-Datei zu verwenden, die in Canvas hochgeladen werden kann. Bitte teilen Sie uns mit, wie wir diese Erfahrung verbessern können.
|
||||
### Verwendung mit Moodle, Canvas oder Blackboard
|
||||
|
||||
|
||||
Dieses Curriculum enthält importierbare Pakete für gängige LMS-Workflows.
|
||||
|
||||
- Moodle: Verwenden Sie die Moodle-Upload-Datei [Moodle upload file](../../../../../../../teaching-files/webdev-moodle.mbz), um den gesamten Kurs zu laden.
|
||||
- Common Cartridge: Verwenden Sie die Common-Cartridge-Datei [Common Cartridge file](../../../../../../../teaching-files/webdev-common-cartridge.imscc) für eine breitere LMS-Kompatibilität.
|
||||
- Hinweise:
|
||||
- Moodle Cloud unterstützt Common Cartridge nur eingeschränkt. Bevorzugen Sie die oben genannte Moodle-Datei, die auch in Canvas hochgeladen werden kann.
|
||||
- Überprüfen Sie nach dem Import die Module, Fälligkeitsdaten und Quiz-Einstellungen, um sie an Ihren Semesterplan anzupassen.
|
||||
|
||||
|
||||
> Das Curriculum in einem Moodle-Klassenzimmer
|
||||
|
||||
|
||||
|
||||
> Das Curriculum in Canvas
|
||||
|
||||
## Nutzung des Repos in der aktuellen Form
|
||||
### Direkte Nutzung des Repositories (ohne Classroom)
|
||||
|
||||
Wenn Sie GitHub Classroom nicht verwenden möchten, können Sie den Kurs direkt aus diesem Repository durchführen.
|
||||
|
||||
Wenn Sie dieses Repository in seiner aktuellen Form verwenden möchten, ohne GitHub Classroom zu nutzen, ist das ebenfalls möglich. Sie müssten Ihren Schülern mitteilen, welche Lektion Sie gemeinsam durcharbeiten möchten.
|
||||
- Synchrone/Online-Formate (Zoom/Teams):
|
||||
- Führen Sie kurze mentorengeleitete Warm-ups durch; nutzen Sie Breakout-Räume für Quizfragen.
|
||||
- Geben Sie ein Zeitfenster für Quizfragen bekannt; Schüler reichen Antworten als GitHub-Issues ein.
|
||||
- Für kollaborative Aufgaben arbeiten Schüler in öffentlichen Lektionen-Repositories und öffnen Pull-Requests.
|
||||
- Private/asynchrone Formate:
|
||||
- Schüler forken jede Lektion in ihre eigenen **privaten** Repositories und fügen Sie als Kollaborator hinzu.
|
||||
- Sie reichen Quizfragen über Issues und Aufgaben über Pull-Requests in Ihrem Classroom-Repository oder ihren privaten Forks ein.
|
||||
|
||||
In einem Online-Format (Zoom, Teams oder andere) könnten Sie Breakout-Räume für die Quizfragen bilden und die Schüler betreuen, um sie auf das Lernen vorzubereiten. Anschließend laden Sie die Schüler zu den Quizfragen ein und lassen sie ihre Antworten zu einem bestimmten Zeitpunkt als 'Issues' einreichen. Dasselbe könnten Sie mit Aufgaben machen, wenn Sie möchten, dass die Schüler offen und kollaborativ arbeiten.
|
||||
### Best Practices
|
||||
|
||||
Wenn Sie ein privateres Format bevorzugen, bitten Sie Ihre Schüler, das Curriculum Lektion für Lektion in ihre eigenen privaten GitHub-Repositories zu forken und Ihnen Zugriff zu gewähren. Dann können sie Quizfragen und Aufgaben privat bearbeiten und diese über Issues in Ihrem Klassenzimmer-Repository einreichen.
|
||||
- Bieten Sie eine Orientierungslektion zu den Grundlagen von Git/GitHub, Issues und PRs an.
|
||||
- Verwenden Sie Checklisten in Issues für mehrstufige Quizfragen/Aufgaben.
|
||||
- Fügen Sie CONTRIBUTING.md und CODE_OF_CONDUCT.md hinzu, um Klassennormen festzulegen.
|
||||
- Fügen Sie Barrierefreiheitshinweise (Alt-Text, Untertitel) hinzu und bieten Sie druckbare PDFs an.
|
||||
- Versionieren Sie Ihre Inhalte pro Semester und frieren Sie Lektionen-Repositories nach der Veröffentlichung ein.
|
||||
|
||||
Es gibt viele Möglichkeiten, dies in einem Online-Klassenzimmer-Format umzusetzen. Bitte teilen Sie uns mit, was für Sie am besten funktioniert!
|
||||
### Feedback und Unterstützung
|
||||
|
||||
## Teilen Sie uns Ihre Meinung mit!
|
||||
Wir möchten, dass dieses Curriculum für Sie und Ihre Schüler funktioniert. Bitte öffnen Sie ein neues Issue in diesem Repository für Fehler, Anfragen oder Verbesserungen, oder starten Sie eine Diskussion in der Teacher Corner.
|
||||
|
||||
Wir möchten dieses Curriculum für Sie und Ihre Schüler optimal gestalten. Kontaktieren Sie uns in der [Lehrerecke](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) und eröffnen Sie ein [**neues Issue**](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) für Anfragen, Fehler und Feedback.
|
||||
---
|
||||
|
||||
**Haftungsausschluss**:
|
||||
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 ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.
|
||||
@ -1,25 +1,31 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "1ce4deaec80130d3a0a3c906568459fc",
|
||||
"translation_date": "2025-08-28T12:00:48+00:00",
|
||||
"original_hash": "9e2f84e351a6fcb44bfc4066d98525f0",
|
||||
"translation_date": "2025-10-03T08:22:30+00:00",
|
||||
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
|
||||
"language_code": "en"
|
||||
}
|
||||
-->
|
||||
# Reading the Docs
|
||||
|
||||
## Instructions
|
||||
|
||||
There are many tools that a web developer might need, which are listed in the [MDN documentation for client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Choose 3 tools that were not covered in the lesson, explain why a web developer would use them, and find a tool within this category to share its documentation. Avoid using the same tool examples provided in the MDN documentation.
|
||||
There are many tools that a web developer may need that are listed on the [MDN documentation for client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Select **three tools** that are **not covered in this lesson** (excluding [list specific tools or refer to lesson content]), explain **why** a web developer would use each tool, and find a tool that fits each category. For each, share a link to its official documentation (not the example used on MDN).
|
||||
|
||||
**Format:**
|
||||
- Tool name
|
||||
- Why a web developer would use it (2-3 sentences)
|
||||
- Link to documentation
|
||||
|
||||
**Length:**
|
||||
- Each explanation should be 2-3 sentences.
|
||||
|
||||
## Rubric
|
||||
|
||||
Exemplary | Adequate | Needs Improvement
|
||||
--- | --- | --- |
|
||||
| Explained why a web developer would use the tool | Explained how, but not why a developer would use the tool | Did not mention how or why a developer would use the tool |
|
||||
--- | --- | -- |
|
||||
Explained why web developer would use tool | Explained how, but not why developer would use tool | Did not mention how or why a developer would use tool |
|
||||
|
||||
---
|
||||
|
||||
**Disclaimer**:
|
||||
This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
|
||||
This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may contain errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is recommended. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
|
||||
@ -0,0 +1,415 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
|
||||
"translation_date": "2025-10-03T11:11:50+00:00",
|
||||
"source_file": "AGENTS.md",
|
||||
"language_code": "en"
|
||||
}
|
||||
-->
|
||||
# AGENTS.md
|
||||
|
||||
## Project Overview
|
||||
|
||||
This repository provides an educational curriculum designed to teach web development fundamentals to beginners. It is a comprehensive 12-week course created by Microsoft Cloud Advocates, featuring 24 hands-on lessons that cover JavaScript, CSS, and HTML.
|
||||
|
||||
### Key Components
|
||||
|
||||
- **Educational Content**: 24 structured lessons organized into project-based modules
|
||||
- **Practical Projects**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, and AI Chat Assistant
|
||||
- **Interactive Quizzes**: 48 quizzes with 3 questions each (pre- and post-lesson assessments)
|
||||
- **Multi-language Support**: Automated translations for over 50 languages via GitHub Actions
|
||||
- **Technologies**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (for AI projects)
|
||||
|
||||
### Architecture
|
||||
|
||||
- Repository structured around lessons
|
||||
- Each lesson folder includes a README, code examples, and solutions
|
||||
- Standalone projects in separate directories (quiz-app, various lesson projects)
|
||||
- Translation system powered by GitHub Actions (co-op-translator)
|
||||
- Documentation served via Docsify and available as PDF
|
||||
|
||||
## Setup Commands
|
||||
|
||||
This repository is primarily intended for educational content consumption. For working with specific projects:
|
||||
|
||||
### Main Repository Setup
|
||||
|
||||
```bash
|
||||
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
|
||||
cd Web-Dev-For-Beginners
|
||||
```
|
||||
|
||||
### Quiz App Setup (Vue 3 + Vite)
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm install
|
||||
npm run dev # Start development server
|
||||
npm run build # Build for production
|
||||
npm run lint # Run ESLint
|
||||
```
|
||||
|
||||
### Bank Project API (Node.js + Express)
|
||||
|
||||
```bash
|
||||
cd 7-bank-project/api
|
||||
npm install
|
||||
npm start # Start API server
|
||||
npm run lint # Run ESLint
|
||||
npm run format # Format with Prettier
|
||||
```
|
||||
|
||||
### Browser Extension Projects
|
||||
|
||||
```bash
|
||||
cd 5-browser-extension/solution
|
||||
npm install
|
||||
# Follow browser-specific extension loading instructions
|
||||
```
|
||||
|
||||
### Space Game Projects
|
||||
|
||||
```bash
|
||||
cd 6-space-game/solution
|
||||
npm install
|
||||
# Open index.html in browser or use Live Server
|
||||
```
|
||||
|
||||
### Chat Project (Python Backend)
|
||||
|
||||
```bash
|
||||
cd 9-chat-project/solution/backend/python
|
||||
pip install openai
|
||||
# Set GITHUB_TOKEN environment variable
|
||||
python api.py
|
||||
```
|
||||
|
||||
## Development Workflow
|
||||
|
||||
### For Content Contributors
|
||||
|
||||
1. **Fork the repository** to your GitHub account
|
||||
2. **Clone your fork** locally
|
||||
3. **Create a new branch** for your changes
|
||||
4. Modify lesson content or code examples
|
||||
5. Test any code changes in relevant project directories
|
||||
6. Submit pull requests following contribution guidelines
|
||||
|
||||
### For Learners
|
||||
|
||||
1. Fork or clone the repository
|
||||
2. Navigate through lesson directories sequentially
|
||||
3. Read the README files for each lesson
|
||||
4. Complete pre-lesson quizzes at https://ff-quizzes.netlify.app/web/
|
||||
5. Work through code examples in lesson folders
|
||||
6. Complete assignments and challenges
|
||||
7. Take post-lesson quizzes
|
||||
|
||||
### Live Development
|
||||
|
||||
- **Documentation**: Run `docsify serve` in the root directory (port 3000)
|
||||
- **Quiz App**: Run `npm run dev` in the quiz-app directory
|
||||
- **Projects**: Use the VS Code Live Server extension for HTML projects
|
||||
- **API Projects**: Run `npm start` in the respective API directories
|
||||
|
||||
## Testing Instructions
|
||||
|
||||
### Quiz App Testing
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm run lint # Check for code style issues
|
||||
npm run build # Verify build succeeds
|
||||
```
|
||||
|
||||
### Bank API Testing
|
||||
|
||||
```bash
|
||||
cd 7-bank-project/api
|
||||
npm run lint # Check for code style issues
|
||||
node server.js # Verify server starts without errors
|
||||
```
|
||||
|
||||
### General Testing Approach
|
||||
|
||||
- This is an educational repository without comprehensive automated tests
|
||||
- Manual testing focuses on:
|
||||
- Ensuring code examples run without errors
|
||||
- Verifying links in documentation work correctly
|
||||
- Confirming project builds complete successfully
|
||||
- Checking that examples follow best practices
|
||||
|
||||
### Pre-submission Checks
|
||||
|
||||
- Run `npm run lint` in directories with package.json
|
||||
- Verify markdown links are valid
|
||||
- Test code examples in a browser or Node.js
|
||||
- Ensure translations maintain proper structure
|
||||
|
||||
## Code Style Guidelines
|
||||
|
||||
### JavaScript
|
||||
|
||||
- Use modern ES6+ syntax
|
||||
- Follow standard ESLint configurations provided in projects
|
||||
- Use meaningful variable and function names for educational clarity
|
||||
- Add comments explaining concepts for learners
|
||||
- Format using Prettier where configured
|
||||
|
||||
### HTML/CSS
|
||||
|
||||
- Use semantic HTML5 elements
|
||||
- Apply responsive design principles
|
||||
- Follow clear class naming conventions
|
||||
- Include comments explaining CSS techniques for learners
|
||||
|
||||
### Python
|
||||
|
||||
- Adhere to PEP 8 style guidelines
|
||||
- Provide clear, educational code examples
|
||||
- Use type hints where helpful for learning
|
||||
|
||||
### Markdown Documentation
|
||||
|
||||
- Maintain a clear heading hierarchy
|
||||
- Include code blocks with language specification
|
||||
- Provide links to additional resources
|
||||
- Store screenshots and images in `images/` directories
|
||||
- Add alt text for images to ensure accessibility
|
||||
|
||||
### File Organization
|
||||
|
||||
- Lessons are numbered sequentially (1-getting-started-lessons, 2-js-basics, etc.)
|
||||
- Each project includes `solution/` and often `start/` or `your-work/` directories
|
||||
- Images are stored in lesson-specific `images/` folders
|
||||
- Translations are organized in `translations/{language-code}/` directories
|
||||
|
||||
## Build and Deployment
|
||||
|
||||
### Quiz App Deployment (Azure Static Web Apps)
|
||||
|
||||
The quiz-app is configured for deployment on Azure Static Web Apps:
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm run build # Creates dist/ folder
|
||||
# Deploys via GitHub Actions workflow on push to main
|
||||
```
|
||||
|
||||
Azure Static Web Apps configuration:
|
||||
- **App location**: `/quiz-app`
|
||||
- **Output location**: `dist`
|
||||
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
|
||||
|
||||
### Documentation PDF Generation
|
||||
|
||||
```bash
|
||||
npm install # Install docsify-to-pdf
|
||||
npm run convert # Generate PDF from docs
|
||||
```
|
||||
|
||||
### Docsify Documentation
|
||||
|
||||
```bash
|
||||
npm install -g docsify-cli # Install Docsify globally
|
||||
docsify serve # Serve on localhost:3000
|
||||
```
|
||||
|
||||
### Project-specific Builds
|
||||
|
||||
Each project directory may have its own build process:
|
||||
- Vue projects: `npm run build` creates production bundles
|
||||
- Static projects: No build step, serve files directly
|
||||
|
||||
## Pull Request Guidelines
|
||||
|
||||
### Title Format
|
||||
|
||||
Use clear, descriptive titles indicating the area of change:
|
||||
- `[Quiz-app] Add new quiz for lesson X`
|
||||
- `[Lesson-3] Fix typo in terrarium project`
|
||||
- `[Translation] Add Spanish translation for lesson 5`
|
||||
- `[Docs] Update setup instructions`
|
||||
|
||||
### Required Checks
|
||||
|
||||
Before submitting a PR:
|
||||
|
||||
1. **Code Quality**:
|
||||
- Run `npm run lint` in affected project directories
|
||||
- Fix all linting errors and warnings
|
||||
|
||||
2. **Build Verification**:
|
||||
- Run `npm run build` if applicable
|
||||
- Ensure no build errors
|
||||
|
||||
3. **Link Validation**:
|
||||
- Test all markdown links
|
||||
- Verify image references work
|
||||
|
||||
4. **Content Review**:
|
||||
- Proofread for spelling and grammar
|
||||
- Ensure code examples are correct and educational
|
||||
- Verify translations maintain original meaning
|
||||
|
||||
### Contribution Requirements
|
||||
|
||||
- Agree to Microsoft CLA (automated check on first PR)
|
||||
- Follow the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
|
||||
- See [CONTRIBUTING.md](./CONTRIBUTING.md) for detailed guidelines
|
||||
- Reference issue numbers in PR descriptions if applicable
|
||||
|
||||
### Review Process
|
||||
|
||||
- PRs are reviewed by maintainers and the community
|
||||
- Educational clarity is prioritized
|
||||
- Code examples should follow current best practices
|
||||
- Translations are reviewed for accuracy and cultural appropriateness
|
||||
|
||||
## Translation System
|
||||
|
||||
### Automated Translation
|
||||
|
||||
- Powered by GitHub Actions with the co-op-translator workflow
|
||||
- Automatically translates to over 50 languages
|
||||
- Source files are located in main directories
|
||||
- Translated files are stored in `translations/{language-code}/` directories
|
||||
|
||||
### Adding Manual Translation Improvements
|
||||
|
||||
1. Locate the file in `translations/{language-code}/`
|
||||
2. Make improvements while preserving the structure
|
||||
3. Ensure code examples remain functional
|
||||
4. Test any localized quiz content
|
||||
|
||||
### Translation Metadata
|
||||
|
||||
Translated files include a metadata header:
|
||||
```markdown
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "...",
|
||||
"translation_date": "...",
|
||||
"source_file": "...",
|
||||
"language_code": "..."
|
||||
}
|
||||
-->
|
||||
```
|
||||
|
||||
## Debugging and Troubleshooting
|
||||
|
||||
### Common Issues
|
||||
|
||||
**Quiz app fails to start**:
|
||||
- Check Node.js version (v14+ recommended)
|
||||
- Delete `node_modules` and `package-lock.json`, then run `npm install` again
|
||||
- Check for port conflicts (default: Vite uses port 5173)
|
||||
|
||||
**API server won't start**:
|
||||
- Verify Node.js version meets the minimum requirement (node >=10)
|
||||
- Check if the port is already in use
|
||||
- Ensure all dependencies are installed with `npm install`
|
||||
|
||||
**Browser extension won't load**:
|
||||
- Verify that manifest.json is properly formatted
|
||||
- Check the browser console for errors
|
||||
- Follow browser-specific extension installation instructions
|
||||
|
||||
**Python chat project issues**:
|
||||
- Ensure the OpenAI package is installed: `pip install openai`
|
||||
- Verify the GITHUB_TOKEN environment variable is set
|
||||
- Check GitHub Models access permissions
|
||||
|
||||
**Docsify not serving docs**:
|
||||
- Install docsify-cli globally: `npm install -g docsify-cli`
|
||||
- Run from the repository root directory
|
||||
- Check that `docs/_sidebar.md` exists
|
||||
|
||||
### Development Environment Tips
|
||||
|
||||
- Use VS Code with the Live Server extension for HTML projects
|
||||
- Install ESLint and Prettier extensions for consistent formatting
|
||||
- Use browser DevTools for debugging JavaScript
|
||||
- For Vue projects, install the Vue DevTools browser extension
|
||||
|
||||
### Performance Considerations
|
||||
|
||||
- The large number of translated files (50+ languages) makes full clones sizable
|
||||
- Use shallow clone if only working on content: `git clone --depth 1`
|
||||
- Exclude translations from searches when working on English content
|
||||
- Build processes may be slow on the first run (npm install, Vite build)
|
||||
|
||||
## Security Considerations
|
||||
|
||||
### Environment Variables
|
||||
|
||||
- API keys should never be committed to the repository
|
||||
- Use `.env` files (already included in `.gitignore`)
|
||||
- Document required environment variables in project READMEs
|
||||
|
||||
### Python Projects
|
||||
|
||||
- Use virtual environments: `python -m venv venv`
|
||||
- Keep dependencies updated
|
||||
- GitHub tokens should have minimal required permissions
|
||||
|
||||
### GitHub Models Access
|
||||
|
||||
- Personal Access Tokens (PAT) are required for GitHub Models
|
||||
- Tokens should be stored as environment variables
|
||||
- Never commit tokens or credentials
|
||||
|
||||
## Additional Notes
|
||||
|
||||
### Target Audience
|
||||
|
||||
- Complete beginners in web development
|
||||
- Students and self-learners
|
||||
- Teachers using the curriculum in classrooms
|
||||
- Content is designed for accessibility and gradual skill-building
|
||||
|
||||
### Educational Philosophy
|
||||
|
||||
- Project-based learning approach
|
||||
- Frequent knowledge checks (quizzes)
|
||||
- Hands-on coding exercises
|
||||
- Real-world application examples
|
||||
- Focus on fundamentals before frameworks
|
||||
|
||||
### Repository Maintenance
|
||||
|
||||
- Active community of learners and contributors
|
||||
- Regular updates to dependencies and content
|
||||
- Issues and discussions monitored by maintainers
|
||||
- Translation updates automated via GitHub Actions
|
||||
|
||||
### Related Resources
|
||||
|
||||
- [Microsoft Learn modules](https://docs.microsoft.com/learn/)
|
||||
- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/)
|
||||
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recommended for learners
|
||||
- Additional courses: Generative AI, Data Science, ML, IoT curricula available
|
||||
|
||||
### Working with Specific Projects
|
||||
|
||||
For detailed instructions on individual projects, refer to the README files in:
|
||||
- `quiz-app/README.md` - Vue 3 quiz application
|
||||
- `7-bank-project/README.md` - Banking application with authentication
|
||||
- `5-browser-extension/README.md` - Browser extension development
|
||||
- `6-space-game/README.md` - Canvas-based game development
|
||||
- `9-chat-project/README.md` - AI chat assistant project
|
||||
|
||||
### Monorepo Structure
|
||||
|
||||
While not a traditional monorepo, this repository contains multiple independent projects:
|
||||
- Each lesson is self-contained
|
||||
- Projects don't share dependencies
|
||||
- Work on individual projects without affecting others
|
||||
- Clone the entire repository for the full curriculum experience
|
||||
|
||||
---
|
||||
|
||||
**Disclaimer**:
|
||||
This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may contain errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is recommended. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
|
||||
@ -1,166 +1,229 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "687c62646ad5595f1ba733edc294cdae",
|
||||
"translation_date": "2025-08-29T13:14:52+00:00",
|
||||
"original_hash": "3bea83a071750b68d3c8755f1155f805",
|
||||
"translation_date": "2025-10-03T08:20:05+00:00",
|
||||
"source_file": "README.md",
|
||||
"language_code": "en"
|
||||
}
|
||||
-->
|
||||
> **Open Folder** and selecting the folder where you cloned the repository.
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
3. Install the necessary dependencies. Open the terminal in Visual Studio Code and run the following command:
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
@@INLINE_CODE_1@@
|
||||
[](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott)
|
||||
|
||||
4. Start the development server. Run the following command in the terminal:
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
|
||||
@@INLINE_CODE_2@@
|
||||
[](https://discord.com/invite/ByRwuEEgH4)
|
||||
|
||||
5. Open your browser and navigate to @@INLINE_CODE_3@@ to view the curriculum.
|
||||
Follow these steps to start using these resources:
|
||||
1. **Fork the Repository**: Click [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
|
||||
2. **Clone the Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
|
||||
3. [**Join The Azure AI Foundry Discord and connect with experts and fellow developers**](https://discord.com/invite/ByRwuEEgH4)
|
||||
|
||||
---
|
||||
# Web Development for Beginners - A Curriculum
|
||||
|
||||
### 🛠️ Contributing
|
||||
Learn the basics of web development with this 12-week comprehensive course from Microsoft Cloud Advocates. The 24 lessons cover JavaScript, CSS, and HTML through hands-on projects like terrariums, browser extensions, and space games. Engage with quizzes, discussions, and practical assignments. Strengthen your skills and improve knowledge retention with our project-based learning approach. Start your coding journey today!
|
||||
|
||||
We welcome contributions to improve this curriculum! If you find any issues or have suggestions, feel free to open an issue or submit a pull request. Check out our [contributing guide](./CONTRIBUTING.md) for more details.
|
||||
### 🌐 Multi-Language Support
|
||||
|
||||
---
|
||||
#### Supported via GitHub Action (Automated & Always Up-to-Date)
|
||||
|
||||
### 📚 Curriculum Overview
|
||||
[French](../fr/README.md) | [Spanish](../es/README.md) | [German](../de/README.md) | [Russian](../ru/README.md) | [Arabic](../ar/README.md) | [Persian (Farsi)](../fa/README.md) | [Urdu](../ur/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Taiwan)](../tw/README.md) | [Japanese](../ja/README.md) | [Korean](../ko/README.md) | [Hindi](../hi/README.md) | [Bengali](../bn/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Portuguese (Portugal)](../pt/README.md) | [Portuguese (Brazil)](../br/README.md) | [Italian](../it/README.md) | [Polish](../pl/README.md) | [Turkish](../tr/README.md) | [Greek](../el/README.md) | [Thai](../th/README.md) | [Swedish](../sv/README.md) | [Danish](../da/README.md) | [Norwegian](../no/README.md) | [Finnish](../fi/README.md) | [Dutch](../nl/README.md) | [Hebrew](../he/README.md) | [Vietnamese](../vi/README.md) | [Indonesian](../id/README.md) | [Malay](../ms/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Swahili](../sw/README.md) | [Hungarian](../hu/README.md) | [Czech](../cs/README.md) | [Slovak](../sk/README.md) | [Romanian](../ro/README.md) | [Bulgarian](../bg/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Croatian](../hr/README.md) | [Slovenian](../sl/README.md) | [Ukrainian](../uk/README.md) | [Burmese (Myanmar)](../my/README.md)
|
||||
|
||||
This curriculum is divided into 12 weeks, with 24 lessons covering the following topics:
|
||||
**If you'd like additional translations, supported languages are listed [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
|
||||
|
||||
1. **Getting Started**: Introduction to programming languages, tools, and setting up your environment.
|
||||
2. **HTML Basics**: Learn the structure of web pages and how to create them.
|
||||
3. **CSS Basics**: Style your web pages and make them visually appealing.
|
||||
4. **JavaScript Basics**: Add interactivity to your web pages.
|
||||
5. **Advanced JavaScript**: Dive deeper into JavaScript concepts like functions, objects, and APIs.
|
||||
6. **Web Accessibility**: Ensure your web pages are accessible to everyone.
|
||||
7. **Responsive Design**: Make your web pages look great on all devices.
|
||||
8. **Web Performance**: Optimize your web pages for speed and efficiency.
|
||||
9. **Browser Extensions**: Learn how to create your own browser extensions.
|
||||
10. **Space Game Project**: Build a fun and interactive game using JavaScript.
|
||||
11. **Terrarium Project**: Create a virtual terrarium using HTML, CSS, and JavaScript.
|
||||
12. **Final Project**: Apply everything you've learned to create a complete web application.
|
||||
#### 🧑🎓 _Are you a student?_
|
||||
|
||||
---
|
||||
Visit [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) for beginner resources, student packs, and even opportunities to get a free certificate voucher. Bookmark this page and check back regularly as content is updated monthly.
|
||||
|
||||
### 📣 Stay Connected
|
||||
### 📣 Announcement - _New Project to build using Generative AI_
|
||||
|
||||
Join our community on [Discord](https://discord.com/invite/ByRwuEEgH4) to connect with other learners, ask questions, and share your progress. Follow us on [GitHub](https://github.com/microsoft/Web-Dev-For-Beginners) for updates and new content.
|
||||
A new AI Assistant project has been added—check it out [here](./09-chat-project/README.md).
|
||||
|
||||
---
|
||||
### 📣 Announcement - _New Curriculum_ on Generative AI for JavaScript
|
||||
|
||||
### 🌟 Acknowledgments
|
||||
Don't miss our new Generative AI curriculum!
|
||||
|
||||
This curriculum was created by Microsoft Cloud Advocates to help beginners learn web development. Special thanks to all contributors who have helped improve and expand this resource.
|
||||
Visit [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) to get started!
|
||||
|
||||
---
|
||||
|
||||
|
||||
- Lessons covering everything from basics to Retrieval-Augmented Generation (RAG).
|
||||
- Interact with historical characters using GenAI and our companion app.
|
||||
- Fun and engaging narrative—you'll be time traveling!
|
||||
|
||||
|
||||
|
||||
Each lesson includes assignments, knowledge checks, and challenges to help you learn topics like:
|
||||
- Prompting and prompt engineering
|
||||
- Text and image app generation
|
||||
- Search apps
|
||||
|
||||
Visit [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) to get started!
|
||||
|
||||
## 🌱 Getting Started
|
||||
|
||||
> **Teachers**, we have [included some suggestions](for-teachers.md) on how to use this curriculum. We'd love your feedback [in our discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
||||
|
||||
**[Learners](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for each lesson, start with a pre-lecture quiz, read the lecture material, complete the activities, and check your understanding with the post-lecture quiz.
|
||||
|
||||
To enhance your learning experience, collaborate with peers on projects! Discussions are encouraged in our [discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), where moderators are available to answer your questions.
|
||||
|
||||
For further learning, explore [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for additional study materials.
|
||||
|
||||
### 📋 Setting up your environment
|
||||
|
||||
This curriculum comes with a ready-to-use development environment! You can choose to run it in a [Codespace](https://github.com/features/codespaces/) (_browser-based, no installation required_), or locally on your computer using a text editor like [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
|
||||
|
||||
#### Create your repository
|
||||
To save your work, create your own copy of this repository. Click the **Use this template** button at the top of the page to create a new repository in your GitHub account with a copy of the curriculum.
|
||||
|
||||
Ready to start your web development journey? Fork the repository, set up your environment, and dive into the lessons! Happy coding!
|
||||
> **Open Folder** and select the folder you just cloned.
|
||||
> Recommended Visual Studio Code extensions:
|
||||
>
|
||||
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - to preview HTML pages within Visual Studio Code
|
||||
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - to help you write code faster
|
||||
|
||||
## 📂 Each lesson includes:
|
||||
|
||||
- optional sketchnote
|
||||
- optional supplemental video
|
||||
- pre-lesson warmup quiz
|
||||
- written lesson
|
||||
- for project-based lessons, step-by-step guides on how to build the project
|
||||
- knowledge checks
|
||||
- a challenge
|
||||
- supplemental reading
|
||||
- assignment
|
||||
- [post-lesson quiz](https://ff-quizzes.netlify.app/web/)
|
||||
Follow these steps:
|
||||
1. **Fork the Repository**: Click the "Fork" button at the top-right corner of this page.
|
||||
2. **Clone the Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
|
||||
|
||||
#### Running the curriculum in a Codespace
|
||||
|
||||
In your copy of this repository, click the **Code** button and select **Open with Codespaces**. This will create a new Codespace for you to work in.
|
||||
|
||||
|
||||
|
||||
#### Running the curriculum locally on your computer
|
||||
|
||||
To run this curriculum locally, you'll need a text editor, a browser, and a command-line tool. The first lesson, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), will guide you through various options for these tools so you can choose what works best for you.
|
||||
|
||||
We recommend using [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) as your editor, which includes a built-in [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). You can download Visual Studio Code [here](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
|
||||
|
||||
1. Clone your repository to your computer. Click the **Code** button and copy the URL:
|
||||
|
||||
[CodeSpace](./images/createcodespace.png)
|
||||
|
||||
Then, open [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) within [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) and run the following command, replacing `<your-repository-url>` with the URL you just copied:
|
||||
|
||||
```bash
|
||||
git clone <your-repository-url>
|
||||
```
|
||||
|
||||
2. Open the folder in Visual Studio Code. Click **File** > **Open Folder** and select the folder you just cloned.
|
||||
|
||||
> Recommended Visual Studio Code extensions:
|
||||
>
|
||||
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - to preview HTML pages within Visual Studio Code
|
||||
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - to help you write code faster
|
||||
|
||||
## 📂 Each lesson includes:
|
||||
|
||||
- Optional sketchnote
|
||||
- Optional supplemental video
|
||||
- Pre-lesson warmup quiz
|
||||
- Written lesson
|
||||
- For project-based lessons, step-by-step guides on how to build the project
|
||||
- Knowledge checks
|
||||
- A challenge
|
||||
- Supplemental reading
|
||||
- Assignment
|
||||
- [Post-lesson quiz](https://ff-quizzes.netlify.app/web/)
|
||||
> **A note about quizzes**: All quizzes are located in the Quiz-app folder, with a total of 48 quizzes, each containing three questions. They are available [here](https://ff-quizzes.netlify.app/web/). The quiz app can be run locally or deployed to Azure; follow the instructions in the `quiz-app` folder.
|
||||
|
||||
## 🗃️ Lessons
|
||||
|
||||
| | Project Name | Concepts Taught | Learning Objectives | Linked Lesson | Author |
|
||||
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||
| 01 | Getting Started | Introduction to Programming and Tools of the Trade | Learn the basic principles behind most programming languages and the software that helps professional developers do their work | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
|
||||
| 01 | Getting Started | Introduction to Programming and Tools of the Trade | Learn the basic foundations of most programming languages and the software that helps professional developers in their work | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
|
||||
| 02 | Getting Started | Basics of GitHub, includes working with a team | Learn how to use GitHub in your project and collaborate with others on a codebase | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
|
||||
| 03 | Getting Started | Accessibility | Learn the basics of web accessibility | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
||||
| 04 | JS Basics | JavaScript Data Types | Learn the basics of JavaScript data types | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
|
||||
| 05 | JS Basics | Functions and Methods | Learn about functions and methods to manage an application's logic flow | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
|
||||
| 03 | Getting Started | Accessibility | Learn the fundamentals of web accessibility | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
||||
| 04 | JS Basics | JavaScript Data Types | Understand the basics of JavaScript data types | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
|
||||
| 05 | JS Basics | Functions and Methods | Learn about functions and methods to manage the logic flow of an application | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
|
||||
| 06 | JS Basics | Making Decisions with JS | Learn how to create conditions in your code using decision-making methods | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
|
||||
| 07 | JS Basics | Arrays and Loops | Work with data using arrays and loops in JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
|
||||
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in Practice | Build the HTML to create an online terrarium, focusing on building a layout | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
|
||||
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in Practice | Build the CSS to style the online terrarium, focusing on the basics of CSS, including making the page responsive | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
|
||||
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in Practice | Build the HTML to create an online terrarium, focusing on layout creation | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
|
||||
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in Practice | Build the CSS to style the online terrarium, focusing on CSS basics, including making the page responsive | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
|
||||
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Build the JavaScript to make the terrarium function as a drag/drop interface, focusing on closures and DOM manipulation | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
|
||||
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Build a Typing Game | Learn how to use keyboard events to drive the logic of your JavaScript app | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
|
||||
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Working with Browsers | Learn how browsers work, their history, and how to scaffold the first elements of a browser extension | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
|
||||
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Building a form, calling an API and storing variables in local storage | Build the JavaScript elements of your browser extension to call an API using variables stored in local storage | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
|
||||
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Background processes in the browser, web performance | Use the browser's background processes to manage the extension's icon; learn about web performance and some optimizations to make | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
|
||||
| 15 | [Space Game](./6-space-game/solution/README.md) | More Advanced Game Development with JavaScript | Learn about Inheritance using both Classes and Composition and the Pub/Sub pattern, in preparation for building a game | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
|
||||
| 16 | [Space Game](./6-space-game/solution/README.md) | Drawing to canvas | Learn about the Canvas API, used to draw elements to a screen | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
||||
| 17 | [Space Game](./6-space-game/solution/README.md) | Moving elements around the screen | Discover how elements can gain motion using the cartesian coordinates and the Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
|
||||
| 18 | [Space Game](./6-space-game/solution/README.md) | Collision detection | Make elements collide and react to each other using keypresses and provide a cooldown function to ensure performance of the game | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
|
||||
| 15 | [Space Game](./6-space-game/solution/README.md) | More Advanced Game Development with JavaScript | Learn about inheritance using both classes and composition, and the Pub/Sub pattern, in preparation for building a game | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
|
||||
| 16 | [Space Game](./6-space-game/solution/README.md) | Drawing to canvas | Learn about the Canvas API, used to draw elements on a screen | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
||||
| 17 | [Space Game](./6-space-game/solution/README.md) | Moving elements around the screen | Discover how elements can gain motion using Cartesian coordinates and the Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
|
||||
| 18 | [Space Game](./6-space-game/solution/README.md) | Collision detection | Make elements collide and react to each other using keypresses, and provide a cooldown function to ensure game performance | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
|
||||
| 19 | [Space Game](./6-space-game/solution/README.md) | Keeping score | Perform math calculations based on the game's status and performance | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
|
||||
| 20 | [Space Game](./6-space-game/solution/README.md) | Ending and restarting the game | Learn about ending and restarting the game, including cleaning up assets and resetting variable values | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
|
||||
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML Templates and Routes in a Web App | Learn how to create the scaffold of a multipage website's architecture using routing and HTML templates | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
|
||||
| 22 | [Banking App](./7-bank-project/solution/README.md) | Build a Login and Registration Form | Learn about building forms and handling validation routines | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
|
||||
| 23 | [Banking App](./7-bank-project/solution/README.md) | Methods of Fetching and Using Data | How data flows in and out of your app, how to fetch it, store it, and dispose of it | [Data](./7-bank-project/3-data/README.md) | Yohan |
|
||||
| 23 | [Banking App](./7-bank-project/solution/README.md) | Methods of Fetching and Using Data | Understand how data flows in and out of your app, how to fetch it, store it, and dispose of it | [Data](./7-bank-project/3-data/README.md) | Yohan |
|
||||
| 24 | [Banking App](./7-bank-project/solution/README.md) | Concepts of State Management | Learn how your app retains state and how to manage it programmatically | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
|
||||
| 25 | [Browser/VScode Code](../../8-code-editor) | Working with VScode | Learn how to use a code editor | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
|
||||
| 26 | [AI Assistants](./9-chat-project/README.md) | Working with AI | Learn how to build your own AI assistant | [AI Assistant project](./9-chat-project/README.md) | Chris |
|
||||
|
||||
## 🏫 Pedagogy
|
||||
|
||||
Our curriculum is designed with two key pedagogical principles in mind:
|
||||
Our curriculum is designed with two key teaching principles in mind:
|
||||
* project-based learning
|
||||
* frequent quizzes
|
||||
|
||||
The program teaches the fundamentals of JavaScript, HTML, and CSS, as well as the latest tools and techniques used by today's web developers. Students will have the opportunity to develop hands-on experience by building a typing game, virtual terrarium, eco-friendly browser extension, space-invader-style game, and a banking app for businesses. By the end of the series, students will have gained a solid understanding of web development.
|
||||
The program covers the fundamentals of JavaScript, HTML, and CSS, along with the latest tools and techniques used by modern web developers. Students will gain hands-on experience by building projects such as a typing game, virtual terrarium, eco-friendly browser extension, space-invader-style game, and a banking app for businesses. By the end of the series, students will have a solid understanding of web development.
|
||||
|
||||
> 🎓 You can take the first few lessons in this curriculum as a [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) on Microsoft Learn!
|
||||
|
||||
By ensuring that the content aligns with projects, the process is made more engaging for students and retention of concepts will be enhanced. We also wrote several starter lessons in JavaScript basics to introduce concepts, paired with a video from the "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collection of video tutorials, some of whose authors contributed to this curriculum.
|
||||
By aligning the content with projects, the learning process becomes more engaging for students, and concept retention is enhanced. We also included several introductory lessons on JavaScript basics, paired with videos from the "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collection of tutorials, some of which were authored by contributors to this curriculum.
|
||||
|
||||
In addition, a low-stakes quiz before a class sets the intention of the student towards learning a topic, while a second quiz after class ensures further retention. This curriculum was designed to be flexible and fun and can be taken in whole or in part. The projects start small and become increasingly complex by the end of the 12-week cycle.
|
||||
Additionally, a low-stakes quiz before class helps set the student's focus on the topic, while a second quiz after class reinforces retention. This curriculum is designed to be flexible and enjoyable, and it can be completed in full or in part. The projects start small and gradually increase in complexity over the 12-week cycle.
|
||||
|
||||
While we have purposefully avoided introducing JavaScript frameworks to concentrate on the basic skills needed as a web developer before adopting a framework, a good next step to completing this curriculum would be learning about Node.js via another collection of videos: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
|
||||
While we intentionally avoided introducing JavaScript frameworks to focus on the essential skills needed as a web developer before adopting a framework, a good next step after completing this curriculum would be learning about Node.js through another video series: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
|
||||
|
||||
> Visit our [Code of Conduct](CODE_OF_CONDUCT.md) and [Contributing](CONTRIBUTING.md) guidelines. We welcome your constructive feedback!
|
||||
|
||||
## 🧭 Offline access
|
||||
|
||||
You can run this documentation offline by using [Docsify](https://docsify.js.org/#/). Fork this repo, [install Docsify](https://docsify.js.org/#/quickstart) on your local machine, and then in the root folder of this repo, type `docsify serve`. The website will be served on port 3000 on your localhost: `localhost:3000`.
|
||||
You can run this documentation offline using [Docsify](https://docsify.js.org/#/). Fork this repository, [install Docsify](https://docsify.js.org/#/quickstart) on your local machine, and then in the root folder of this repository, type `docsify serve`. The website will be served on port 3000 on your localhost: `localhost:3000`.
|
||||
|
||||
## 📘 PDF
|
||||
|
||||
A PDF of all of the lessons can be found [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
|
||||
A PDF of all the lessons can be found [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
|
||||
|
||||
## 🎒 Other Courses
|
||||
|
||||
Our team produces other courses! Check out:
|
||||
Our team offers other courses! Check out:
|
||||
|
||||
- [Generative AI for Beginners](https://aka.ms/genai-beginners)
|
||||
- [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
|
||||
- [Generative AI with JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
|
||||
- [Generative AI with Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
|
||||
- [AI for Beginners](https://aka.ms/ai-beginners)
|
||||
- [Data Science for Beginners](https://aka.ms/datascience-beginners)
|
||||
- [ML for Beginners](https://aka.ms/ml-beginners)
|
||||
- [Cybersecurity for Beginners](https://github.com/microsoft/Security-101)
|
||||
- [Web Dev for Beginners](https://aka.ms/webdev-beginners)
|
||||
- [IoT for Beginners](https://aka.ms/iot-beginners)
|
||||
- [XR Development for Beginners](https://github.com/microsoft/xr-development-for-beginners)
|
||||
- [Mastering GitHub Copilot for Agentic use](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
|
||||
- [Mastering GitHub Copilot for C#/.NET Developers](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
|
||||
- [Choose Your Own Copilot Adventure](https://github.com/microsoft/CopilotAdventures)
|
||||
- [Data Science for Beginners](https://aka.ms/datascience-beginners)
|
||||
- [ML for Beginners](https://aka.ms/ml-beginners)
|
||||
- [Cybersecurity for Beginners](https://github.com/microsoft/Security-101)
|
||||
- [Web Dev for Beginners](https://aka.ms/webdev-beginners)
|
||||
- [IoT for Beginners](https://aka.ms/iot-beginners)
|
||||
- [XR Development for Beginners](https://github.com/microsoft/xr-development-for-beginners)
|
||||
- [Mastering GitHub Copilot for Agentic use](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
|
||||
- [Mastering GitHub Copilot for C#/.NET Developers](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
|
||||
- [Choose Your Own Copilot Adventure](https://github.com/microsoft/CopilotAdventures)
|
||||
|
||||
## Getting Help
|
||||
|
||||
If you encounter difficulties or have questions about creating AI applications, join:
|
||||
|
||||
[](https://aka.ms/foundry/discord)
|
||||
|
||||
If you have product feedback or experience issues during development, visit:
|
||||
|
||||
[](https://aka.ms/foundry/forum)
|
||||
|
||||
## License
|
||||
|
||||
This repository is licensed under the MIT license. See the [LICENSE](../../LICENSE) file for more information.
|
||||
This repository is licensed under the MIT license. Refer to the [LICENSE](../../LICENSE) file for more details.
|
||||
|
||||
---
|
||||
|
||||
**Disclaimer**:
|
||||
This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we strive for accuracy, please note that automated translations may contain errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is recommended. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
|
||||
This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may contain errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is recommended. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
|
||||
@ -1,23 +1,31 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "1ce4deaec80130d3a0a3c906568459fc",
|
||||
"translation_date": "2025-08-24T13:01:21+00:00",
|
||||
"original_hash": "9e2f84e351a6fcb44bfc4066d98525f0",
|
||||
"translation_date": "2025-10-03T08:28:32+00:00",
|
||||
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
|
||||
"language_code": "es"
|
||||
}
|
||||
-->
|
||||
# Leyendo la Documentación
|
||||
|
||||
## Instrucciones
|
||||
|
||||
Existen muchas herramientas que un desarrollador web puede necesitar y que se encuentran en la [documentación de MDN sobre herramientas del lado del cliente](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selecciona 3 herramientas que no se hayan cubierto en la lección, explica por qué un desarrollador web las usaría y busca una herramienta que pertenezca a esta categoría para compartir su documentación. No utilices el mismo ejemplo de herramienta que aparece en la documentación de MDN.
|
||||
Hay muchas herramientas que un desarrollador web puede necesitar que están enumeradas en la [documentación de MDN sobre herramientas del lado del cliente](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selecciona **tres herramientas** que **no estén cubiertas en esta lección** (excluyendo [lista de herramientas específicas o referencia al contenido de la lección]), explica **por qué** un desarrollador web usaría cada herramienta y encuentra una herramienta que encaje en cada categoría. Para cada una, comparte un enlace a su documentación oficial (no el ejemplo usado en MDN).
|
||||
|
||||
**Formato:**
|
||||
- Nombre de la herramienta
|
||||
- Por qué un desarrollador web la usaría (2-3 oraciones)
|
||||
- Enlace a la documentación
|
||||
|
||||
**Extensión:**
|
||||
- Cada explicación debe tener 2-3 oraciones.
|
||||
|
||||
## Rúbrica
|
||||
|
||||
Ejemplar | Adecuado | Necesita Mejorar
|
||||
Excepcional | Adecuado | Necesita Mejorar
|
||||
--- | --- | -- |
|
||||
|Explicó por qué un desarrollador web usaría la herramienta| Explicó cómo, pero no por qué un desarrollador usaría la herramienta| No mencionó cómo ni por qué un desarrollador usaría la herramienta |
|
||||
Explicó por qué un desarrollador web usaría la herramienta | Explicó cómo, pero no por qué un desarrollador usaría la herramienta | No mencionó cómo ni por qué un desarrollador usaría la herramienta |
|
||||
|
||||
---
|
||||
|
||||
**Descargo de responsabilidad**:
|
||||
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Si bien nos esforzamos por lograr precisión, tenga en cuenta que las traducciones automáticas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.
|
||||
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Aunque nos esforzamos por garantizar la precisión, tenga en cuenta que las traducciones automatizadas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.
|
||||
@ -1,23 +1,41 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "9d4d75af51aaccfe9af778f792c62919",
|
||||
"translation_date": "2025-08-24T12:10:23+00:00",
|
||||
"original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
|
||||
"translation_date": "2025-10-03T08:28:39+00:00",
|
||||
"source_file": "3-terrarium/2-intro-to-css/assignment.md",
|
||||
"language_code": "es"
|
||||
}
|
||||
-->
|
||||
# Refactorización de CSS
|
||||
# Tarea de Refactorización de CSS
|
||||
|
||||
## Objetivo
|
||||
|
||||
Refactorizar el proyecto del terrario para usar **Flexbox** o **CSS Grid** en el diseño. Actualiza el HTML y CSS según sea necesario para lograr un diseño moderno y responsivo. No es necesario implementar elementos arrastrables; céntrate únicamente en el diseño y el estilo.
|
||||
|
||||
## Instrucciones
|
||||
|
||||
Rediseña el terrario utilizando Flexbox o CSS Grid, y toma capturas de pantalla para demostrar que lo has probado en varios navegadores. Es posible que necesites modificar el marcado, así que crea una nueva versión de la aplicación con el arte en su lugar para tu refactorización. No te preocupes por hacer que los elementos sean arrastrables; por ahora, solo refactoriza el HTML y CSS.
|
||||
1. **Crea una nueva versión** de la aplicación del terrario. Actualiza el marcado y el CSS para usar Flexbox o CSS Grid en el diseño.
|
||||
2. **Asegúrate de que el arte y los elementos estén en su lugar** como en la versión original.
|
||||
3. **Prueba tu diseño** en al menos dos navegadores diferentes (por ejemplo, Chrome, Firefox, Edge).
|
||||
4. **Toma capturas de pantalla** de tu terrario en cada navegador para demostrar la compatibilidad entre navegadores.
|
||||
5. **Entrega** tu código actualizado y las capturas de pantalla.
|
||||
|
||||
## Rúbrica
|
||||
|
||||
| Criterios | Ejemplar | Adecuado | Necesita Mejoras |
|
||||
| --------- | ---------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
|
||||
| | Presenta un terrario completamente rediseñado usando Flexbox o CSS Grid | Rediseña algunos de los elementos | No logra rediseñar el terrario en absoluto |
|
||||
| Criterios | Ejemplar | Adecuado | Necesita Mejorar |
|
||||
|------------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
|
||||
| Diseño | Totalmente refactorizado usando Flexbox o CSS Grid; visualmente atractivo y responsivo | Algunos elementos refactorizados; uso parcial de Flexbox o Grid | Poco o ningún uso de Flexbox o Grid; diseño sin cambios |
|
||||
| Compatibilidad entre navegadores | Capturas de pantalla proporcionadas para múltiples navegadores; apariencia consistente | Capturas de pantalla para un navegador; pequeñas inconsistencias | Sin capturas de pantalla o grandes inconsistencias |
|
||||
| Calidad del código | HTML/CSS limpio y bien organizado; comentarios claros | Algo organizado; pocos comentarios | Código desorganizado; sin comentarios |
|
||||
|
||||
## Consejos
|
||||
|
||||
- Revisa las guías de [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) y [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/).
|
||||
- Usa las herramientas de desarrollo del navegador para probar la capacidad de respuesta.
|
||||
- Comenta tu código para mayor claridad.
|
||||
|
||||
---
|
||||
|
||||
**Descargo de responsabilidad**:
|
||||
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Si bien nos esforzamos por lograr precisión, tenga en cuenta que las traducciones automáticas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.
|
||||
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Aunque nos esforzamos por garantizar la precisión, tenga en cuenta que las traducciones automatizadas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.
|
||||
@ -0,0 +1,415 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
|
||||
"translation_date": "2025-10-03T11:12:55+00:00",
|
||||
"source_file": "AGENTS.md",
|
||||
"language_code": "es"
|
||||
}
|
||||
-->
|
||||
# AGENTS.md
|
||||
|
||||
## Resumen del Proyecto
|
||||
|
||||
Este es un repositorio de currículo educativo diseñado para enseñar los fundamentos del desarrollo web a principiantes. El currículo es un curso completo de 12 semanas desarrollado por los Microsoft Cloud Advocates, que incluye 24 lecciones prácticas sobre JavaScript, CSS y HTML.
|
||||
|
||||
### Componentes Clave
|
||||
|
||||
- **Contenido Educativo**: 24 lecciones estructuradas organizadas en módulos basados en proyectos
|
||||
- **Proyectos Prácticos**: Terrario, Juego de Escritura, Extensión de Navegador, Juego Espacial, Aplicación Bancaria, Editor de Código y Asistente de Chat con IA
|
||||
- **Cuestionarios Interactivos**: 48 cuestionarios con 3 preguntas cada uno (evaluaciones antes y después de las lecciones)
|
||||
- **Soporte Multilingüe**: Traducciones automáticas a más de 50 idiomas mediante GitHub Actions
|
||||
- **Tecnologías**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (para proyectos de IA)
|
||||
|
||||
### Arquitectura
|
||||
|
||||
- Repositorio educativo con estructura basada en lecciones
|
||||
- Cada carpeta de lección contiene README, ejemplos de código y soluciones
|
||||
- Proyectos independientes en directorios separados (quiz-app, varios proyectos de lecciones)
|
||||
- Sistema de traducción utilizando GitHub Actions (co-op-translator)
|
||||
- Documentación servida mediante Docsify y disponible en formato PDF
|
||||
|
||||
## Comandos de Configuración
|
||||
|
||||
Este repositorio está diseñado principalmente para el consumo de contenido educativo. Para trabajar con proyectos específicos:
|
||||
|
||||
### Configuración del Repositorio Principal
|
||||
|
||||
```bash
|
||||
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
|
||||
cd Web-Dev-For-Beginners
|
||||
```
|
||||
|
||||
### Configuración de la Aplicación de Cuestionarios (Vue 3 + Vite)
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm install
|
||||
npm run dev # Start development server
|
||||
npm run build # Build for production
|
||||
npm run lint # Run ESLint
|
||||
```
|
||||
|
||||
### API del Proyecto Bancario (Node.js + Express)
|
||||
|
||||
```bash
|
||||
cd 7-bank-project/api
|
||||
npm install
|
||||
npm start # Start API server
|
||||
npm run lint # Run ESLint
|
||||
npm run format # Format with Prettier
|
||||
```
|
||||
|
||||
### Proyectos de Extensión de Navegador
|
||||
|
||||
```bash
|
||||
cd 5-browser-extension/solution
|
||||
npm install
|
||||
# Follow browser-specific extension loading instructions
|
||||
```
|
||||
|
||||
### Proyectos del Juego Espacial
|
||||
|
||||
```bash
|
||||
cd 6-space-game/solution
|
||||
npm install
|
||||
# Open index.html in browser or use Live Server
|
||||
```
|
||||
|
||||
### Proyecto de Chat (Backend en Python)
|
||||
|
||||
```bash
|
||||
cd 9-chat-project/solution/backend/python
|
||||
pip install openai
|
||||
# Set GITHUB_TOKEN environment variable
|
||||
python api.py
|
||||
```
|
||||
|
||||
## Flujo de Trabajo de Desarrollo
|
||||
|
||||
### Para Contribuidores de Contenido
|
||||
|
||||
1. **Haz un fork del repositorio** en tu cuenta de GitHub
|
||||
2. **Clona tu fork** localmente
|
||||
3. **Crea una nueva rama** para tus cambios
|
||||
4. Realiza cambios en el contenido de las lecciones o ejemplos de código
|
||||
5. Prueba los cambios de código en los directorios de proyectos relevantes
|
||||
6. Envía pull requests siguiendo las pautas de contribución
|
||||
|
||||
### Para Estudiantes
|
||||
|
||||
1. Haz un fork o clona el repositorio
|
||||
2. Navega por los directorios de las lecciones en orden
|
||||
3. Lee los archivos README de cada lección
|
||||
4. Completa los cuestionarios previos a la lección en https://ff-quizzes.netlify.app/web/
|
||||
5. Trabaja con los ejemplos de código en las carpetas de las lecciones
|
||||
6. Completa las tareas y desafíos
|
||||
7. Realiza los cuestionarios posteriores a la lección
|
||||
|
||||
### Desarrollo en Vivo
|
||||
|
||||
- **Documentación**: Ejecuta `docsify serve` en la raíz (puerto 3000)
|
||||
- **Aplicación de Cuestionarios**: Ejecuta `npm run dev` en el directorio quiz-app
|
||||
- **Proyectos**: Usa la extensión Live Server de VS Code para proyectos HTML
|
||||
- **Proyectos API**: Ejecuta `npm start` en los directorios API correspondientes
|
||||
|
||||
## Instrucciones de Pruebas
|
||||
|
||||
### Pruebas de la Aplicación de Cuestionarios
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm run lint # Check for code style issues
|
||||
npm run build # Verify build succeeds
|
||||
```
|
||||
|
||||
### Pruebas de la API Bancaria
|
||||
|
||||
```bash
|
||||
cd 7-bank-project/api
|
||||
npm run lint # Check for code style issues
|
||||
node server.js # Verify server starts without errors
|
||||
```
|
||||
|
||||
### Enfoque General de Pruebas
|
||||
|
||||
- Este es un repositorio educativo sin pruebas automatizadas completas
|
||||
- Las pruebas manuales se centran en:
|
||||
- Ejecución de ejemplos de código sin errores
|
||||
- Funcionamiento correcto de los enlaces en la documentación
|
||||
- Construcción exitosa de los proyectos
|
||||
- Cumplimiento de las mejores prácticas en los ejemplos
|
||||
|
||||
### Verificaciones Antes de Enviar
|
||||
|
||||
- Ejecuta `npm run lint` en los directorios con package.json
|
||||
- Verifica que los enlaces en markdown sean válidos
|
||||
- Prueba los ejemplos de código en el navegador o Node.js
|
||||
- Asegúrate de que las traducciones mantengan la estructura adecuada
|
||||
|
||||
## Pautas de Estilo de Código
|
||||
|
||||
### JavaScript
|
||||
|
||||
- Usa sintaxis moderna ES6+
|
||||
- Sigue las configuraciones estándar de ESLint proporcionadas en los proyectos
|
||||
- Usa nombres de variables y funciones significativos para mayor claridad educativa
|
||||
- Agrega comentarios explicando conceptos para los estudiantes
|
||||
- Formatea usando Prettier donde esté configurado
|
||||
|
||||
### HTML/CSS
|
||||
|
||||
- Elementos semánticos de HTML5
|
||||
- Principios de diseño responsivo
|
||||
- Convenciones claras para nombrar clases
|
||||
- Comentarios explicando técnicas de CSS para los estudiantes
|
||||
|
||||
### Python
|
||||
|
||||
- Directrices de estilo PEP 8
|
||||
- Ejemplos de código claros y educativos
|
||||
- Indicaciones de tipo donde sean útiles para el aprendizaje
|
||||
|
||||
### Documentación en Markdown
|
||||
|
||||
- Jerarquía clara de encabezados
|
||||
- Bloques de código con especificación de lenguaje
|
||||
- Enlaces a recursos adicionales
|
||||
- Capturas de pantalla e imágenes en directorios `images/`
|
||||
- Texto alternativo para imágenes para accesibilidad
|
||||
|
||||
### Organización de Archivos
|
||||
|
||||
- Lecciones numeradas secuencialmente (1-getting-started-lessons, 2-js-basics, etc.)
|
||||
- Cada proyecto tiene directorios `solution/` y, a menudo, `start/` o `your-work/`
|
||||
- Imágenes almacenadas en carpetas `images/` específicas de cada lección
|
||||
- Traducciones en la estructura `translations/{language-code}/`
|
||||
|
||||
## Construcción y Despliegue
|
||||
|
||||
### Despliegue de la Aplicación de Cuestionarios (Azure Static Web Apps)
|
||||
|
||||
La aplicación quiz-app está configurada para el despliegue en Azure Static Web Apps:
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm run build # Creates dist/ folder
|
||||
# Deploys via GitHub Actions workflow on push to main
|
||||
```
|
||||
|
||||
Configuración de Azure Static Web Apps:
|
||||
- **Ubicación de la aplicación**: `/quiz-app`
|
||||
- **Ubicación de salida**: `dist`
|
||||
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
|
||||
|
||||
### Generación de Documentación en PDF
|
||||
|
||||
```bash
|
||||
npm install # Install docsify-to-pdf
|
||||
npm run convert # Generate PDF from docs
|
||||
```
|
||||
|
||||
### Documentación con Docsify
|
||||
|
||||
```bash
|
||||
npm install -g docsify-cli # Install Docsify globally
|
||||
docsify serve # Serve on localhost:3000
|
||||
```
|
||||
|
||||
### Construcciones Específicas de Proyectos
|
||||
|
||||
Cada directorio de proyecto puede tener su propio proceso de construcción:
|
||||
- Proyectos Vue: `npm run build` crea paquetes de producción
|
||||
- Proyectos estáticos: Sin paso de construcción, sirve los archivos directamente
|
||||
|
||||
## Pautas para Pull Requests
|
||||
|
||||
### Formato del Título
|
||||
|
||||
Usa títulos claros y descriptivos que indiquen el área de cambio:
|
||||
- `[Quiz-app] Añadir nuevo cuestionario para la lección X`
|
||||
- `[Lesson-3] Corregir error tipográfico en el proyecto terrario`
|
||||
- `[Translation] Añadir traducción al español para la lección 5`
|
||||
- `[Docs] Actualizar instrucciones de configuración`
|
||||
|
||||
### Verificaciones Requeridas
|
||||
|
||||
Antes de enviar un PR:
|
||||
|
||||
1. **Calidad del Código**:
|
||||
- Ejecuta `npm run lint` en los directorios de proyectos afectados
|
||||
- Corrige todos los errores y advertencias de linting
|
||||
|
||||
2. **Verificación de Construcción**:
|
||||
- Ejecuta `npm run build` si aplica
|
||||
- Asegúrate de que no haya errores de construcción
|
||||
|
||||
3. **Validación de Enlaces**:
|
||||
- Prueba todos los enlaces en markdown
|
||||
- Verifica que las referencias a imágenes funcionen
|
||||
|
||||
4. **Revisión de Contenido**:
|
||||
- Revisa ortografía y gramática
|
||||
- Asegúrate de que los ejemplos de código sean correctos y educativos
|
||||
- Verifica que las traducciones mantengan el significado original
|
||||
|
||||
### Requisitos de Contribución
|
||||
|
||||
- Aceptar el Microsoft CLA (verificación automática en el primer PR)
|
||||
- Seguir el [Código de Conducta de Código Abierto de Microsoft](https://opensource.microsoft.com/codeofconduct/)
|
||||
- Consulta [CONTRIBUTING.md](./CONTRIBUTING.md) para pautas detalladas
|
||||
- Referencia números de issues en la descripción del PR si aplica
|
||||
|
||||
### Proceso de Revisión
|
||||
|
||||
- Los PRs son revisados por mantenedores y la comunidad
|
||||
- Se prioriza la claridad educativa
|
||||
- Los ejemplos de código deben seguir las mejores prácticas actuales
|
||||
- Las traducciones son revisadas para precisión y adecuación cultural
|
||||
|
||||
## Sistema de Traducción
|
||||
|
||||
### Traducción Automática
|
||||
|
||||
- Utiliza GitHub Actions con el workflow co-op-translator
|
||||
- Traduce automáticamente a más de 50 idiomas
|
||||
- Archivos fuente en directorios principales
|
||||
- Archivos traducidos en `translations/{language-code}/`
|
||||
|
||||
### Añadir Mejoras Manuales a Traducciones
|
||||
|
||||
1. Localiza el archivo en `translations/{language-code}/`
|
||||
2. Realiza mejoras manteniendo la estructura
|
||||
3. Asegúrate de que los ejemplos de código sigan siendo funcionales
|
||||
4. Prueba cualquier contenido de cuestionarios localizado
|
||||
|
||||
### Metadatos de Traducción
|
||||
|
||||
Los archivos traducidos incluyen un encabezado de metadatos:
|
||||
```markdown
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "...",
|
||||
"translation_date": "...",
|
||||
"source_file": "...",
|
||||
"language_code": "..."
|
||||
}
|
||||
-->
|
||||
```
|
||||
|
||||
## Depuración y Resolución de Problemas
|
||||
|
||||
### Problemas Comunes
|
||||
|
||||
**La aplicación de cuestionarios no inicia**:
|
||||
- Verifica la versión de Node.js (se recomienda v14+)
|
||||
- Elimina `node_modules` y `package-lock.json`, ejecuta `npm install` nuevamente
|
||||
- Verifica conflictos de puertos (por defecto: Vite usa el puerto 5173)
|
||||
|
||||
**El servidor API no inicia**:
|
||||
- Verifica que la versión de Node.js cumpla con el mínimo (node >=10)
|
||||
- Comprueba si el puerto ya está en uso
|
||||
- Asegúrate de que todas las dependencias estén instaladas con `npm install`
|
||||
|
||||
**La extensión de navegador no se carga**:
|
||||
- Verifica que manifest.json esté correctamente formateado
|
||||
- Revisa la consola del navegador para errores
|
||||
- Sigue las instrucciones específicas del navegador para instalar extensiones
|
||||
|
||||
**Problemas con el proyecto de chat en Python**:
|
||||
- Asegúrate de que el paquete OpenAI esté instalado: `pip install openai`
|
||||
- Verifica que la variable de entorno GITHUB_TOKEN esté configurada
|
||||
- Revisa los permisos de acceso a GitHub Models
|
||||
|
||||
**Docsify no sirve la documentación**:
|
||||
- Instala docsify-cli globalmente: `npm install -g docsify-cli`
|
||||
- Ejecuta desde el directorio raíz del repositorio
|
||||
- Verifica que `docs/_sidebar.md` exista
|
||||
|
||||
### Consejos para el Entorno de Desarrollo
|
||||
|
||||
- Usa VS Code con la extensión Live Server para proyectos HTML
|
||||
- Instala las extensiones ESLint y Prettier para un formato consistente
|
||||
- Usa las herramientas de desarrollo del navegador para depurar JavaScript
|
||||
- Para proyectos Vue, instala la extensión Vue DevTools en el navegador
|
||||
|
||||
### Consideraciones de Rendimiento
|
||||
|
||||
- El gran número de archivos traducidos (más de 50 idiomas) hace que los clones completos sean grandes
|
||||
- Usa un clon superficial si solo trabajas en contenido: `git clone --depth 1`
|
||||
- Excluye las traducciones de las búsquedas cuando trabajes en contenido en inglés
|
||||
- Los procesos de construcción pueden ser lentos en la primera ejecución (npm install, construcción con Vite)
|
||||
|
||||
## Consideraciones de Seguridad
|
||||
|
||||
### Variables de Entorno
|
||||
|
||||
- Las claves de API nunca deben ser comprometidas en el repositorio
|
||||
- Usa archivos `.env` (ya incluidos en `.gitignore`)
|
||||
- Documenta las variables de entorno requeridas en los archivos README de los proyectos
|
||||
|
||||
### Proyectos en Python
|
||||
|
||||
- Usa entornos virtuales: `python -m venv venv`
|
||||
- Mantén las dependencias actualizadas
|
||||
- Los tokens de GitHub deben tener permisos mínimos requeridos
|
||||
|
||||
### Acceso a GitHub Models
|
||||
|
||||
- Se requieren Tokens de Acceso Personal (PAT) para GitHub Models
|
||||
- Los tokens deben almacenarse como variables de entorno
|
||||
- Nunca comprometas tokens o credenciales
|
||||
|
||||
## Notas Adicionales
|
||||
|
||||
### Público Objetivo
|
||||
|
||||
- Principiantes completos en desarrollo web
|
||||
- Estudiantes y autodidactas
|
||||
- Profesores que usan el currículo en aulas
|
||||
- El contenido está diseñado para accesibilidad y desarrollo gradual de habilidades
|
||||
|
||||
### Filosofía Educativa
|
||||
|
||||
- Enfoque de aprendizaje basado en proyectos
|
||||
- Verificaciones frecuentes de conocimiento (cuestionarios)
|
||||
- Ejercicios prácticos de codificación
|
||||
- Ejemplos de aplicación en el mundo real
|
||||
- Enfoque en fundamentos antes de frameworks
|
||||
|
||||
### Mantenimiento del Repositorio
|
||||
|
||||
- Comunidad activa de estudiantes y contribuyentes
|
||||
- Actualizaciones regulares de dependencias y contenido
|
||||
- Issues y discusiones monitoreados por mantenedores
|
||||
- Actualizaciones de traducción automatizadas mediante GitHub Actions
|
||||
|
||||
### Recursos Relacionados
|
||||
|
||||
- [Módulos de Microsoft Learn](https://docs.microsoft.com/learn/)
|
||||
- [Recursos del Student Hub](https://docs.microsoft.com/learn/student-hub/)
|
||||
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recomendado para estudiantes
|
||||
- Cursos adicionales: Generative AI, Ciencia de Datos, ML, currículos de IoT disponibles
|
||||
|
||||
### Trabajando con Proyectos Específicos
|
||||
|
||||
Para instrucciones detalladas sobre proyectos individuales, consulta los archivos README en:
|
||||
- `quiz-app/README.md` - Aplicación de cuestionarios en Vue 3
|
||||
- `7-bank-project/README.md` - Aplicación bancaria con autenticación
|
||||
- `5-browser-extension/README.md` - Desarrollo de extensiones de navegador
|
||||
- `6-space-game/README.md` - Desarrollo de juegos basados en Canvas
|
||||
- `9-chat-project/README.md` - Proyecto de asistente de chat con IA
|
||||
|
||||
### Estructura Monorepo
|
||||
|
||||
Aunque no es un monorepo tradicional, este repositorio contiene múltiples proyectos independientes:
|
||||
- Cada lección es autónoma
|
||||
- Los proyectos no comparten dependencias
|
||||
- Trabaja en proyectos individuales sin afectar a otros
|
||||
- Clona el repositorio completo para la experiencia completa del currículo
|
||||
|
||||
---
|
||||
|
||||
**Descargo de responsabilidad**:
|
||||
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Si bien nos esforzamos por lograr precisión, tenga en cuenta que las traducciones automáticas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que surjan del uso de esta traducción.
|
||||
@ -1,45 +1,78 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "75cb51f7ca9ea0b097ef4a1287e9290c",
|
||||
"translation_date": "2025-08-24T11:54:22+00:00",
|
||||
"original_hash": "71009af209f81cc01a1f2d324200375f",
|
||||
"translation_date": "2025-10-03T08:26:01+00:00",
|
||||
"source_file": "for-teachers.md",
|
||||
"language_code": "es"
|
||||
}
|
||||
-->
|
||||
## Para Educadores
|
||||
### Para Educadores
|
||||
|
||||
¿Te gustaría usar este plan de estudios en tu aula? ¡Siéntete libre de hacerlo!
|
||||
Estás invitado a usar este plan de estudios en tu aula. Funciona perfectamente con GitHub Classroom y las principales plataformas LMS, y también puede utilizarse como un repositorio independiente con tus estudiantes.
|
||||
|
||||
De hecho, puedes usarlo directamente en GitHub utilizando GitHub Classroom.
|
||||
### Uso con GitHub Classroom
|
||||
|
||||
Para hacerlo, haz un fork de este repositorio. Necesitarás crear un repositorio para cada lección, por lo que tendrás que extraer cada carpeta en un repositorio separado. De esta manera, [GitHub Classroom](https://classroom.github.com/classrooms) podrá identificar cada lección por separado.
|
||||
Para gestionar lecciones y tareas por grupo, crea un repositorio por lección para que GitHub Classroom pueda vincular cada tarea de forma independiente.
|
||||
|
||||
Estas [instrucciones completas](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) te darán una idea de cómo configurar tu aula.
|
||||
- Haz un fork de este repositorio en tu organización.
|
||||
- Crea un repositorio separado para cada lección extrayendo cada carpeta de lección en su propio repositorio.
|
||||
- Opción A: Crea repositorios vacíos (uno por lección) y copia el contenido de la carpeta de la lección en cada uno.
|
||||
- Opción B: Usa un enfoque que preserve el historial de Git (por ejemplo, dividir una carpeta en un nuevo repositorio) si necesitas mantener la procedencia.
|
||||
- En GitHub Classroom, crea una tarea por lección y vincúlala al repositorio correspondiente.
|
||||
- Configuración recomendada:
|
||||
- Visibilidad del repositorio: privado para el trabajo de los estudiantes.
|
||||
- Usa el código inicial de la rama predeterminada del repositorio de la lección.
|
||||
- Agrega plantillas de issues y pull requests para cuestionarios y entregas.
|
||||
- Opcionalmente, configura autoevaluación y pruebas si tus lecciones las incluyen.
|
||||
- Convenciones útiles:
|
||||
- Nombres de repositorios como lesson-01-intro, lesson-02-html, etc.
|
||||
- Etiquetas: quiz, assignment, needs-review, late, resubmission.
|
||||
- Tags/releases por grupo (por ejemplo, v2025-term1).
|
||||
|
||||
## Usándolo en Moodle, Canvas o Blackboard
|
||||
Consejo: Evita almacenar repositorios dentro de carpetas sincronizadas (por ejemplo, OneDrive/Google Drive) para prevenir conflictos de Git en Windows.
|
||||
|
||||
¡Este plan de estudios funciona muy bien en estos Sistemas de Gestión de Aprendizaje! Usa el [archivo de carga para Moodle](../../../../../../../teaching-files/webdev-moodle.mbz) para obtener el contenido completo, o prueba el [archivo Common Cartridge](../../../../../../../teaching-files/webdev-common-cartridge.imscc), que contiene parte del contenido. Moodle Cloud no admite exportaciones completas de Common Cartridge, por lo que es preferible usar el archivo de descarga de Moodle, que se puede cargar en Canvas. Por favor, háznos saber cómo podemos mejorar esta experiencia.
|
||||
### Uso con Moodle, Canvas o Blackboard
|
||||
|
||||
|
||||
Este plan de estudios incluye paquetes importables para flujos de trabajo comunes en LMS.
|
||||
|
||||
- Moodle: Usa el archivo de carga de Moodle [Moodle upload file](../../../../../../../teaching-files/webdev-moodle.mbz) para cargar el curso completo.
|
||||
- Common Cartridge: Usa el archivo Common Cartridge [Common Cartridge file](../../../../../../../teaching-files/webdev-common-cartridge.imscc) para una mayor compatibilidad con LMS.
|
||||
- Notas:
|
||||
- Moodle Cloud tiene soporte limitado para Common Cartridge. Es preferible usar el archivo de Moodle mencionado anteriormente, que también puede cargarse en Canvas.
|
||||
- Después de importar, revisa los módulos, fechas de entrega y configuraciones de cuestionarios para ajustarlos al calendario de tu periodo.
|
||||
|
||||
|
||||
> El plan de estudios en un aula de Moodle
|
||||
|
||||
|
||||
|
||||
> El plan de estudios en Canvas
|
||||
|
||||
## Usando el repositorio tal como está
|
||||
### Uso del repositorio directamente (sin Classroom)
|
||||
|
||||
Si prefieres no usar GitHub Classroom, puedes ejecutar el curso directamente desde este repositorio.
|
||||
|
||||
Si prefieres usar este repositorio tal como está, sin utilizar GitHub Classroom, también es posible. Necesitarás comunicarte con tus estudiantes para indicarles qué lección trabajar juntos.
|
||||
- Formatos sincrónicos/en línea (Zoom/Teams):
|
||||
- Realiza calentamientos breves dirigidos por mentores; usa salas de grupo para cuestionarios.
|
||||
- Anuncia una ventana de tiempo para los cuestionarios; los estudiantes envían respuestas como Issues en GitHub.
|
||||
- Para tareas colaborativas, los estudiantes trabajan en repositorios públicos de lecciones y abren pull requests.
|
||||
- Formatos privados/asincrónicos:
|
||||
- Los estudiantes hacen fork de cada lección en sus propios repositorios **privados** y te agregan como colaborador.
|
||||
- Envían sus entregas mediante Issues (cuestionarios) y Pull Requests (tareas) en tu repositorio de aula o en sus forks privados.
|
||||
|
||||
En un formato en línea (Zoom, Teams u otro), podrías formar salas de trabajo para los cuestionarios y guiar a los estudiantes para que se preparen para aprender. Luego, invítalos a realizar los cuestionarios y a enviar sus respuestas como 'issues' en un momento determinado. Podrías hacer lo mismo con las tareas si deseas que los estudiantes trabajen de manera colaborativa y abierta.
|
||||
### Mejores prácticas
|
||||
|
||||
Si prefieres un formato más privado, pide a tus estudiantes que hagan un fork del plan de estudios, lección por lección, en sus propios repositorios privados de GitHub y te den acceso. De esta manera, podrán completar cuestionarios y tareas de forma privada y enviártelos a través de issues en tu repositorio de aula.
|
||||
- Ofrece una lección de orientación sobre conceptos básicos de Git/GitHub, Issues y PRs.
|
||||
- Usa listas de verificación en Issues para cuestionarios/tareas de varios pasos.
|
||||
- Agrega CONTRIBUTING.md y CODE_OF_CONDUCT.md para establecer normas en el aula.
|
||||
- Incluye notas de accesibilidad (texto alternativo, subtítulos) y ofrece PDFs imprimibles.
|
||||
- Versiona tu contenido por periodo y congela los repositorios de lecciones después de publicarlos.
|
||||
|
||||
Hay muchas maneras de hacer que esto funcione en un aula en línea. ¡Por favor, cuéntanos qué funciona mejor para ti!
|
||||
### Comentarios y soporte
|
||||
|
||||
## ¡Danos tu opinión!
|
||||
Queremos que este plan de estudios funcione para ti y tus estudiantes. Por favor, abre un nuevo Issue en este repositorio para reportar errores, realizar solicitudes o sugerir mejoras, o inicia una discusión en el Teacher Corner.
|
||||
|
||||
Queremos que este plan de estudios funcione para ti y tus estudiantes. Conéctate con nosotros en el [Teacher corner](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) y abre un [**nuevo issue**](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) para cualquier solicitud, error o comentario.
|
||||
---
|
||||
|
||||
**Descargo de responsabilidad**:
|
||||
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Aunque nos esforzamos por garantizar la precisión, tenga en cuenta que las traducciones automatizadas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.
|
||||
@ -1,23 +1,31 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "1ce4deaec80130d3a0a3c906568459fc",
|
||||
"translation_date": "2025-08-24T13:01:34+00:00",
|
||||
"original_hash": "9e2f84e351a6fcb44bfc4066d98525f0",
|
||||
"translation_date": "2025-10-03T08:42:08+00:00",
|
||||
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
|
||||
"language_code": "fa"
|
||||
}
|
||||
-->
|
||||
# خواندن مستندات
|
||||
|
||||
## دستورالعملها
|
||||
|
||||
ابزارهای زیادی وجود دارند که یک توسعهدهنده وب ممکن است به آنها نیاز داشته باشد و در [مستندات MDN برای ابزارهای سمت کاربر](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) فهرست شدهاند. سه ابزار که در درس پوشش داده نشدهاند را انتخاب کنید، توضیح دهید چرا یک توسعهدهنده وب ممکن است از آن استفاده کند، و یک ابزار که در این دستهبندی قرار میگیرد را جستجو کرده و مستندات آن را به اشتراک بگذارید. از مثالهای ابزار مشابه در مستندات MDN استفاده نکنید.
|
||||
ابزارهای زیادی وجود دارند که یک توسعهدهنده وب ممکن است به آنها نیاز داشته باشد و در [مستندات MDN برای ابزارهای سمت کاربر](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) فهرست شدهاند. **سه ابزار** را انتخاب کنید که **در این درس پوشش داده نشدهاند** (به جز [ابزارهای خاص فهرستشده یا محتوای درس])، توضیح دهید **چرا** یک توسعهدهنده وب از هر ابزار استفاده میکند و یک ابزار مناسب برای هر دسته پیدا کنید. برای هر ابزار، لینک مستندات رسمی آن را به اشتراک بگذارید (نه مثالی که در MDN استفاده شده است).
|
||||
|
||||
**فرمت:**
|
||||
- نام ابزار
|
||||
- چرا یک توسعهدهنده وب از آن استفاده میکند (۲-۳ جمله)
|
||||
- لینک به مستندات
|
||||
|
||||
**طول:**
|
||||
- هر توضیح باید ۲-۳ جمله باشد.
|
||||
|
||||
## معیار ارزیابی
|
||||
|
||||
عالی | کافی | نیاز به بهبود
|
||||
عالی | قابل قبول | نیاز به بهبود
|
||||
--- | --- | -- |
|
||||
|توضیح داده شده چرا یک توسعهدهنده وب ممکن است از ابزار استفاده کند| توضیح داده شده چگونه، اما نه چرا یک توسعهدهنده ممکن است از ابزار استفاده کند| اشارهای به چگونگی یا چرایی استفاده یک توسعهدهنده از ابزار نشده است |
|
||||
توضیح داده شده که چرا توسعهدهنده وب از ابزار استفاده میکند | توضیح داده شده که چگونه، اما نه چرا توسعهدهنده از ابزار استفاده میکند | ذکر نشده که چگونه یا چرا توسعهدهنده از ابزار استفاده میکند |
|
||||
|
||||
---
|
||||
|
||||
**سلب مسئولیت**:
|
||||
این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما تلاش میکنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمههای خودکار ممکن است شامل خطاها یا نادقتیها باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، ترجمه حرفهای انسانی توصیه میشود. ما هیچ مسئولیتی در قبال سوءتفاهمها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.
|
||||
این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما تلاش میکنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمههای خودکار ممکن است شامل خطاها یا نادرستیها باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، ترجمه حرفهای انسانی توصیه میشود. ما مسئولیتی در قبال سوء تفاهمها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.
|
||||
@ -1,23 +1,41 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "9d4d75af51aaccfe9af778f792c62919",
|
||||
"translation_date": "2025-08-24T12:10:35+00:00",
|
||||
"original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
|
||||
"translation_date": "2025-10-03T08:42:15+00:00",
|
||||
"source_file": "3-terrarium/2-intro-to-css/assignment.md",
|
||||
"language_code": "fa"
|
||||
}
|
||||
-->
|
||||
# بازسازی CSS
|
||||
# تکلیف بازسازی CSS
|
||||
|
||||
## هدف
|
||||
|
||||
بازسازی پروژه تراریوم با استفاده از **Flexbox** یا **CSS Grid** برای چیدمان. HTML و CSS را بهروزرسانی کنید تا طراحی مدرن و واکنشگرا ایجاد شود. نیازی به پیادهسازی عناصر قابل کشیدن نیست—فقط بر چیدمان و استایل تمرکز کنید.
|
||||
|
||||
## دستورالعملها
|
||||
|
||||
تراریوم را با استفاده از Flexbox یا CSS Grid بازطراحی کنید و از آن اسکرینشات بگیرید تا نشان دهید که آن را در چندین مرورگر آزمایش کردهاید. ممکن است نیاز باشد که نشانهگذاری را تغییر دهید، بنابراین نسخه جدیدی از برنامه با هنر موجود برای بازطراحی خود ایجاد کنید. نگران قابلکشیدن بودن عناصر نباشید؛ فعلاً فقط HTML و CSS را بازطراحی کنید.
|
||||
1. **یک نسخه جدید** از اپلیکیشن تراریوم ایجاد کنید. مارکآپ و CSS را بهروزرسانی کنید تا از Flexbox یا CSS Grid برای چیدمان استفاده شود.
|
||||
2. **اطمینان حاصل کنید که هنر و عناصر** همانند نسخه اصلی در جای خود قرار دارند.
|
||||
3. **طراحی خود را آزمایش کنید** در حداقل دو مرورگر مختلف (مانند Chrome، Firefox، Edge).
|
||||
4. **از تراریوم خود در هر مرورگر اسکرینشات بگیرید** تا سازگاری بین مرورگرها را نشان دهید.
|
||||
5. **کد بهروزرسانیشده و اسکرینشاتها را ارسال کنید.**
|
||||
|
||||
## معیار ارزیابی
|
||||
|
||||
| معیار | عالی | قابل قبول | نیاز به بهبود |
|
||||
|-------------|---------------------------------------------------------------------------|-------------------------------------|-----------------------------------------|
|
||||
| چیدمان | کاملاً بازسازیشده با استفاده از Flexbox یا CSS Grid؛ زیبا و واکنشگرا | برخی عناصر بازسازیشده؛ استفاده جزئی از Flexbox یا Grid | استفاده کم یا عدم استفاده از Flexbox یا Grid؛ چیدمان بدون تغییر |
|
||||
| سازگاری بین مرورگرها | اسکرینشاتها برای چندین مرورگر ارائه شده؛ ظاهر سازگار | اسکرینشات برای یک مرورگر؛ ناسازگاری جزئی | بدون اسکرینشات یا ناسازگاریهای عمده |
|
||||
| کیفیت کد | HTML/CSS تمیز و سازمانیافته؛ کامنتهای واضح | کمی سازمانیافته؛ کامنتهای کم | کد نامرتب؛ بدون کامنت |
|
||||
|
||||
## نکات
|
||||
|
||||
## معیارها
|
||||
- راهنماهای [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) و [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) را مرور کنید.
|
||||
- از ابزارهای توسعهدهنده مرورگر برای آزمایش واکنشگرایی استفاده کنید.
|
||||
- کد خود را برای وضوح کامنتگذاری کنید.
|
||||
|
||||
| معیار | عالی | قابل قبول | نیاز به بهبود |
|
||||
| --------- | ----------------------------------------------------------------- | -------------------------- | ---------------------------------- |
|
||||
| | ارائه یک تراریوم کاملاً بازطراحیشده با استفاده از Flexbox یا CSS Grid | بازطراحی چند عنصر | عدم بازطراحی تراریوم به طور کامل |
|
||||
---
|
||||
|
||||
**سلب مسئولیت**:
|
||||
این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما تلاش میکنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمههای خودکار ممکن است حاوی خطاها یا نادرستیهایی باشند. سند اصلی به زبان بومی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، ترجمه حرفهای انسانی توصیه میشود. ما هیچ مسئولیتی در قبال سوءتفاهمها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.
|
||||
این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما تلاش میکنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمههای خودکار ممکن است شامل خطاها یا نادرستیها باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، توصیه میشود از ترجمه انسانی حرفهای استفاده کنید. ما مسئولیتی در قبال سوء تفاهمها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.
|
||||
@ -1,45 +1,78 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "75cb51f7ca9ea0b097ef4a1287e9290c",
|
||||
"translation_date": "2025-08-24T11:54:43+00:00",
|
||||
"original_hash": "71009af209f81cc01a1f2d324200375f",
|
||||
"translation_date": "2025-10-03T08:38:59+00:00",
|
||||
"source_file": "for-teachers.md",
|
||||
"language_code": "fa"
|
||||
}
|
||||
-->
|
||||
## برای معلمان
|
||||
### برای مربیان
|
||||
|
||||
آیا دوست دارید از این برنامه درسی در کلاس خود استفاده کنید؟ لطفاً با خیال راحت این کار را انجام دهید!
|
||||
شما میتوانید از این برنامه درسی در کلاس خود استفاده کنید. این برنامه بهطور یکپارچه با GitHub Classroom و پلتفرمهای LMS پیشرو کار میکند و همچنین میتوان آن را بهعنوان یک مخزن مستقل با دانشآموزان استفاده کرد.
|
||||
|
||||
در واقع، میتوانید از آن مستقیماً در گیتهاب با استفاده از GitHub Classroom استفاده کنید.
|
||||
### استفاده با GitHub Classroom
|
||||
|
||||
برای این کار، این مخزن را فورک کنید. شما نیاز دارید برای هر درس یک مخزن جداگانه ایجاد کنید، بنابراین باید هر پوشه را به یک مخزن جداگانه استخراج کنید. به این ترتیب، [GitHub Classroom](https://classroom.github.com/classrooms) میتواند هر درس را به صورت جداگانه شناسایی کند.
|
||||
برای مدیریت درسها و تکالیف بهصورت گروهی، برای هر درس یک مخزن جداگانه ایجاد کنید تا GitHub Classroom بتواند هر تکلیف را بهطور مستقل پیوست کند.
|
||||
|
||||
این [دستورالعملهای کامل](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) به شما ایدهای از نحوه تنظیم کلاس درس میدهد.
|
||||
- این مخزن را به سازمان خود فورک کنید.
|
||||
- برای هر درس یک مخزن جداگانه ایجاد کنید و پوشه درس مربوطه را به مخزن خودش منتقل کنید.
|
||||
- گزینه اول: مخازن خالی ایجاد کنید (یکی برای هر درس) و محتوای پوشه درس را به هر کدام کپی کنید.
|
||||
- گزینه دوم: از رویکردی که تاریخچه Git را حفظ میکند استفاده کنید (مثلاً تقسیم یک پوشه به یک مخزن جدید) اگر به سابقه نیاز دارید.
|
||||
- در GitHub Classroom، برای هر درس یک تکلیف ایجاد کنید و آن را به مخزن درس مربوطه متصل کنید.
|
||||
- تنظیمات پیشنهادی:
|
||||
- دید مخزن: خصوصی برای کار دانشآموزان.
|
||||
- استفاده از کد اولیه از شاخه پیشفرض مخزن درس.
|
||||
- افزودن قالبهای Issue و Pull Request برای آزمونها و ارسالها.
|
||||
- در صورت وجود، بهصورت اختیاری تنظیمات خودکار نمرهدهی و آزمونها را پیکربندی کنید.
|
||||
- کنوانسیونهایی که کمک میکنند:
|
||||
- نامهای مخزن مانند lesson-01-intro، lesson-02-html و غیره.
|
||||
- برچسبها: quiz، assignment، needs-review، late، resubmission.
|
||||
- برچسبها/نسخهها برای هر گروه (مثلاً v2025-term1).
|
||||
|
||||
## استفاده در Moodle، Canvas یا Blackboard
|
||||
نکته: از ذخیره مخازن داخل پوشههای همگامسازی شده (مانند OneDrive/Google Drive) خودداری کنید تا از تضادهای Git در ویندوز جلوگیری شود.
|
||||
|
||||
این برنامه درسی در این سیستمهای مدیریت یادگیری به خوبی کار میکند! از [فایل آپلود Moodle](../../../../../../../teaching-files/webdev-moodle.mbz) برای محتوای کامل استفاده کنید، یا [فایل Common Cartridge](../../../../../../../teaching-files/webdev-common-cartridge.imscc) را امتحان کنید که شامل بخشی از محتوا است. Moodle Cloud از خروجیهای کامل Common Cartridge پشتیبانی نمیکند، بنابراین بهتر است از فایل دانلود Moodle استفاده کنید که میتواند در Canvas آپلود شود. لطفاً به ما اطلاع دهید که چگونه میتوانیم این تجربه را بهبود دهیم.
|
||||
### استفاده با Moodle، Canvas یا Blackboard
|
||||
|
||||
|
||||
> برنامه درسی در یک کلاس Moodle
|
||||
این برنامه درسی شامل بستههای قابل وارد کردن برای جریانهای کاری رایج LMS است.
|
||||
|
||||
|
||||
- Moodle: از فایل آپلود Moodle [فایل آپلود Moodle](../../../../../../../teaching-files/webdev-moodle.mbz) برای بارگذاری کل دوره استفاده کنید.
|
||||
- Common Cartridge: از فایل Common Cartridge [فایل Common Cartridge](../../../../../../../teaching-files/webdev-common-cartridge.imscc) برای سازگاری گستردهتر LMS استفاده کنید.
|
||||
- نکات:
|
||||
- Moodle Cloud پشتیبانی محدودی از Common Cartridge دارد. فایل Moodle بالا را ترجیح دهید که همچنین میتواند در Canvas بارگذاری شود.
|
||||
- پس از وارد کردن، ماژولها، تاریخهای سررسید و تنظیمات آزمون را بررسی کنید تا با برنامه ترم شما مطابقت داشته باشد.
|
||||
|
||||
|
||||
> برنامه درسی در کلاس Moodle
|
||||
|
||||
|
||||
> برنامه درسی در Canvas
|
||||
|
||||
## استفاده از مخزن به شکل فعلی
|
||||
### استفاده مستقیم از مخزن (بدون Classroom)
|
||||
|
||||
اگر ترجیح میدهید از GitHub Classroom استفاده نکنید، میتوانید دوره را مستقیماً از این مخزن اجرا کنید.
|
||||
|
||||
اگر میخواهید از این مخزن به همان شکلی که هست استفاده کنید، بدون استفاده از GitHub Classroom، این کار نیز امکانپذیر است. شما باید با دانشآموزان خود هماهنگ کنید که کدام درس را با هم مرور کنند.
|
||||
- فرمتهای همزمان/آنلاین (Zoom/Teams):
|
||||
- گرم کردنهای کوتاه با هدایت مربی اجرا کنید؛ از اتاقهای گروهی برای آزمونها استفاده کنید.
|
||||
- یک بازه زمانی برای آزمونها اعلام کنید؛ دانشآموزان پاسخها را بهعنوان Issues در GitHub ارسال کنند.
|
||||
- برای تکالیف گروهی، دانشآموزان در مخازن عمومی درس کار کنند و Pull Request باز کنند.
|
||||
- فرمتهای خصوصی/غیرهمزمان:
|
||||
- دانشآموزان هر درس را به مخازن **خصوصی** خود فورک کنند و شما را بهعنوان همکار اضافه کنند.
|
||||
- آنها از طریق Issues (آزمونها) و Pull Requests (تکالیف) در مخزن کلاس شما یا فورکهای خصوصی خود ارسال کنند.
|
||||
|
||||
در یک قالب آنلاین (Zoom، Teams یا دیگر ابزارها) میتوانید اتاقهای گروهی برای آزمونها تشکیل دهید و دانشآموزان را راهنمایی کنید تا برای یادگیری آماده شوند. سپس دانشآموزان را به آزمونها دعوت کنید و از آنها بخواهید پاسخهای خود را به عنوان 'issues' در یک زمان مشخص ارسال کنند. میتوانید همین کار را با تکالیف انجام دهید اگر میخواهید دانشآموزان به صورت گروهی و در فضای باز کار کنند.
|
||||
### بهترین روشها
|
||||
|
||||
اگر یک قالب خصوصیتر را ترجیح میدهید، از دانشآموزان بخواهید برنامه درسی را درس به درس به مخازن گیتهاب خودشان به صورت خصوصی فورک کنند و به شما دسترسی بدهند. سپس میتوانند آزمونها و تکالیف را به صورت خصوصی تکمیل کرده و از طریق issues در مخزن کلاس شما به شما ارسال کنند.
|
||||
- یک درس جهتیابی درباره اصول Git/GitHub، Issues و PRs ارائه دهید.
|
||||
- از چکلیستها در Issues برای آزمونها/تکالیف چندمرحلهای استفاده کنید.
|
||||
- CONTRIBUTING.md و CODE_OF_CONDUCT.md را اضافه کنید تا هنجارهای کلاس را تنظیم کنید.
|
||||
- یادداشتهای دسترسی (متن جایگزین، زیرنویسها) اضافه کنید و فایلهای PDF قابل چاپ ارائه دهید.
|
||||
- محتوای خود را برای هر ترم نسخهبندی کنید و مخازن درس را پس از انتشار قفل کنید.
|
||||
|
||||
راههای زیادی برای اجرای این برنامه درسی در یک کلاس آنلاین وجود دارد. لطفاً به ما اطلاع دهید که چه چیزی برای شما بهتر کار میکند!
|
||||
### بازخورد و پشتیبانی
|
||||
|
||||
## لطفاً نظرات خود را با ما در میان بگذارید!
|
||||
ما میخواهیم این برنامه درسی برای شما و دانشآموزانتان مفید باشد. لطفاً برای گزارش اشکالات، درخواستها یا بهبودها یک Issue جدید در این مخزن باز کنید یا در Teacher Corner بحثی را آغاز کنید.
|
||||
|
||||
ما میخواهیم این برنامه درسی برای شما و دانشآموزانتان مفید باشد. با ما در [گوشه معلمان](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) ارتباط برقرار کنید و یک [**issue جدید**](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) برای هرگونه درخواست، اشکال یا بازخورد باز کنید.
|
||||
---
|
||||
|
||||
**سلب مسئولیت**:
|
||||
این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما تلاش میکنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمههای خودکار ممکن است حاوی خطاها یا نادرستیهایی باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، ترجمه حرفهای انسانی توصیه میشود. ما هیچ مسئولیتی در قبال سوءتفاهمها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.
|
||||
این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما تلاش میکنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمههای خودکار ممکن است شامل خطاها یا نادرستیها باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، توصیه میشود از ترجمه انسانی حرفهای استفاده کنید. ما مسئولیتی در قبال سوء تفاهمها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue