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

pull/1690/head
localizeflow[bot] 5 months ago
parent 8627ae06d5
commit 8681eec9b5

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:15:55+00:00",
"translation_date": "2026-02-06T07:42:30+00:00",
"source_file": "AGENTS.md",
"language_code": "ur"
},
@ -516,8 +516,8 @@
"language_code": "ur"
},
"README.md": {
"original_hash": "490c83786552d7fab6390991517bef09",
"translation_date": "2026-01-29T17:43:12+00:00",
"original_hash": "805cd399757df19e886e86f0891a1374",
"translation_date": "2026-02-06T07:37:30+00:00",
"source_file": "README.md",
"language_code": "ur"
},

@ -2,281 +2,281 @@
## پروجیکٹ کا جائزہ
یہ ویب ڈویلپمنٹ کے بنیادی اصولوں کو سکھانے کے لیے ایک تعلیمی نصاب کا ذخیرہ ہے، جو ابتدائی افراد کے لیے بنایا گیا ہے۔ یہ نصاب مائیکروسافٹ کلاؤڈ ایڈووکیٹس کے ذریعے تیار کردہ 12 ہفتوں کا جامع کورس ہے، جس میں جاوا اسکرپٹ، CSS، اور HTML پر مشتمل 24 عملی اسباق شامل ہیں۔
یہ ابتدائیوں کو ویب ترقی کے بنیادی اصول سکھانے کے لیے تعلیمی نصاب کا مخزن ہے۔ یہ نصاب مائیکروسافٹ کلاؤڈ ایڈووکیٹس کے تیار کردہ 12 ہفتوں پر مشتمل جامع کورس ہے، جس میں 24 عملی اسباق شامل ہیں جو جاوا اسکرپٹ، سی ایس ایس، اور ایچ ٹی ایم ایل کی تعلیم دیتے ہیں۔
### اہم اجزاء
- **تعلیمی مواد**: 24 منظم اسباق جو پروجیکٹ پر مبنی ماڈیولز میں ترتیب دیے گئے ہیں
- **عملی پروجیکٹس**: Terrarium، Typing Game، Browser Extension، Space Game، Banking App، Code Editor، اور AI Chat Assistant
- **انٹرایکٹو کوئزز**: 48 کوئزز، ہر ایک میں 3 سوالات (سبق سے پہلے/بعد کے جائزے)
- **کثیر زبان کی حمایت**: GitHub Actions کے ذریعے 50+ زبانوں میں خودکار ترجمے
- **ٹیکنالوجیز**: HTML، CSS، JavaScript، Vue.js 3، Vite، Node.js، Express، Python (AI پروجیکٹس کے لیے)
- **تعلیمی مواد**: 24 منظم اسباق پروجیکٹ بیسڈ ماڈیولز میں ترتیب دیے گئے ہیں
- **عملی پروجیکٹس**: ٹیریریم، ٹائپنگ گیم، براؤزر ایکسٹینشن، اسپیس گیم، بینکنگ ایپ، کوڈ ایڈیٹر، اور اے آئی چیٹ اسسٹنٹ
- **انٹرایکٹو کوئزز**: 48 کوئزز ہر ایک میں 3 سوالات (سبق سے پہلے اور بعد میں تشخیص)
- **کئی زبانوں کی معاونت**: گٹ ہب ایکشنز کے ذریعے 50+ زبانوں میں خودکار ترجمہ
- **ٹیکنالوجیز**: ایچ ٹی ایم ایل، سی ایس ایس، جاوا اسکرپٹ، ویو۔جے ایس 3، وائٹ، نوڈ۔جے ایس، ایکسپریس، پائتھون (AI پروجیکٹس کے لیے)
### آرکیٹیکچر
### ساخت
- سبق پر مبنی ساخت کے ساتھ تعلیمی ذخیرہ
- ہر سبق کے فولڈر میں README، کوڈ کی مثالیں، اور حل شامل ہیں
- الگ الگ پروجیکٹس مختلف ڈائریکٹریز میں (quiz-app، مختلف سبق پروجیکٹس)
- GitHub Actions کے ذریعے ترجمہ کا نظام (co-op-translator)
- Docsify کے ذریعے دستاویزات فراہم کی جاتی ہیں اور PDF کے طور پر دستیاب ہیں
- سبق پر مبنی تعلیمی مخزن
- ہر سبق کا فولڈر README، کوڈ مثالیں، اور حل رکھتا ہے
- الگ الگ ڈائریکٹریز میں اسٹینڈ الون پروجیکٹس (quiz-app، مختلف سبق کے پروجیکٹس)
- گٹ ہب ایکشنز سے ترجمہ کا نظام (co-op-translator)
- ڈاکسفائی کے ذریعے دستاویزات کی فراہمی اور PDF فارمیٹ میں دستیابی
## سیٹ اپ کمانڈز
یہ ذخیرہ بنیادی طور پر تعلیمی مواد کے استعمال کے لیے ہے۔ مخصوص پروجیکٹس کے ساتھ کام کرنے کے لیے:
یہ مخزن بنیادی طور پر تعلیمی مواد کے استعمال کے لیے ہے۔ مخصوص پروجیکٹس کے ساتھ کام کرنے کے لیے:
### مرکزی ذخیرہ سیٹ اپ
### مرکزی مخزن سیٹ اپ
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Quiz App سیٹ اپ (Vue 3 + Vite)
### کوئز ایپ سیٹ اپ (ویو 3 + وائٹ)
```bash
cd quiz-app
npm install
npm run dev # Start development server
npm run build # Build for production
npm run lint # Run ESLint
npm run dev # سرور کی ترقی شروع کریں
npm run build # پیداوار کے لیے تعمیر کریں
npm run lint # ESLint چلائیں
```
### Bank Project API (Node.js + Express)
### بینک پروجیکٹ API (نوڈ۔جے ایس + ایکسپریس)
```bash
cd 7-bank-project/api
npm install
npm start # Start API server
npm run lint # Run ESLint
npm run format # Format with Prettier
npm start # اے پی آئی سرور شروع کریں
npm run lint # ESLint چلائیں
npm run format # Prettier کے ساتھ فارمیٹ کریں
```
### Browser Extension پروجیکٹس
### براؤزر ایکسٹینشن پروجیکٹس
```bash
cd 5-browser-extension/solution
npm install
# Follow browser-specific extension loading instructions
# مخصوص براؤزر کے ایکسٹینشن لوڈ کرنے کی ہدایات پر عمل کریں
```
### Space Game پروجیکٹس
### اسپیس گیم پروجیکٹس
```bash
cd 6-space-game/solution
npm install
# Open index.html in browser or use Live Server
# فائل index.html کو براؤزر میں کھولیں یا Live Server استعمال کریں
```
### Chat پروجیکٹ (Python Backend)
### چیٹ پروجیکٹ (پائتھون بیک اینڈ)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Set GITHUB_TOKEN environment variable
# GITHUB_TOKEN ماحولیاتی متغیر کو سیٹ کریں
python api.py
```
## ترقیاتی ورک فلو
### مواد کے شراکت داروں کے لیے
### مواد کے تعاون کنندگان کے لیے
1. **ذخیرہ کو فورک کریں** اپنے GitHub اکاؤنٹ پر
2. **اپنے فورک کو لوکل طور پر کلون کریں**
3. **اپنی تبدیلیوں کے لیے ایک نئی برانچ بنائیں**
4. سبق کے مواد یا کوڈ کی مثالوں میں تبدیلی کریں
5. متعلقہ پروجیکٹ ڈائریکٹریز میں کوڈ کی تبدیلیوں کی جانچ کریں
6. شراکت کے رہنما اصولوں کے مطابق پل ریکویسٹ جمع کروائیں
1. اپنی گٹ ہب اکاؤنٹ میں مخزن کی فورک کریں
2. اپنی فورک کو مقامی طور پر کلون کریں
3. تبدیلیوں کے لیے نئی برانچ بنائیں
4. سبق کے مواد یا کوڈ کی مثالوں میں تبدیلی کریں
5. متعلقہ پروجیکٹ ڈائریکٹریز میں کوڈ کی تبدیلیوں کی جانچ کریں
6. تعاون کے رہنما اصولوں کی پیروی کرتے ہوئے پل ریکویسٹ جمع کرائیں
### سیکھنے والوں کے لیے
1. ذخیرہ کو فورک کریں یا کلون کریں
2. سبق کی ڈائریکٹریز میں ترتیب وار جائیں
3. ہر سبق کے README فائلز پڑھیں
4. سبق سے پہلے کے کوئزز مکمل کریں https://ff-quizzes.netlify.app/web/ پر
5. سبق کے فولڈرز میں کوڈ کی مثالوں پر کام کریں
6. اسائنمنٹس اور چیلنجز مکمل کریں
7. سبق کے بعد کے کوئزز لیں
1. مخزن کو فورک یا کلون کریں
2. سبق کی ڈائریکٹریز میں ترتیب سے جائیں
3. ہر سبق کے README فائلیں پڑھیں
4. سبق سے پہلے کی کوئزز مکمل کریں https://ff-quizzes.netlify.app/web/
5. سبق کے فولڈرز میں کوڈ مثالوں پر کام کریں
6. اسائنمنٹس اور چیلنجز مکمل کریں
7. سبق کے بعد کی کوئزز لیں
### لائیو ترقی
### لائیو ڈیویلپمنٹ
- **دستاویزات**: روٹ میں `docsify serve` چلائیں (پورٹ 3000)
- **Quiz App**: quiz-app ڈائریکٹری میں `npm run dev` چلائیں
- **پروجیکٹس**: HTML پروجیکٹس کے لیے VS Code Live Server ایکسٹینشن استعمال کریں
- **API پروجیکٹس**: متعلقہ API ڈائریکٹریز میں `npm start` چلائیں
- **دستاویزات**: روٹ میں `docsify serve` چلائیں (پورٹ 3000)
- **کوئز ایپ**: `quiz-app` ڈائریکٹری میں `npm run dev` چلائیں
- **پروجیکٹس**: ایچ ٹی ایم ایل پروجیکٹس کے لیے VS کوڈ لائیو سرور ایکسٹینشن استعمال کریں
- **API پروجیکٹس**: متعلقہ API ڈائریکٹریز میں `npm start` چلائیں
## جانچ کی ہدایات
## ٹیسٹنگ کی ہدایات
### Quiz App جانچ
### کوئز ایپ کی ٹیسٹنگ
```bash
cd quiz-app
npm run lint # Check for code style issues
npm run build # Verify build succeeds
npm run lint # کوڈ کے انداز کے مسائل کی جانچ کریں
npm run build # تصدیق کریں کہ تعمیر کامیاب ہو گئی ہے
```
### Bank API جانچ
### بینک 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 # کوڈ کے انداز کے مسائل کی جانچ کریں
node server.js # سرور کے بغیر غلطیوں کے شروع ہونے کی تصدیق کریں
```
### عمومی جانچ کا طریقہ
### عمومی ٹیسٹنگ کا طریقہ کار
- یہ ایک تعلیمی ذخیرہ ہے جس میں جامع خودکار ٹیسٹ شامل نہیں ہیں
- دستی جانچ پر توجہ دی جاتی ہے:
- کوڈ کی مثالیں بغیر کسی غلطی کے چلیں
- دستاویزات میں لنکس درست کام کریں
- پروجیکٹ کی تعمیر کامیابی سے مکمل ہو
- مثالیں بہترین طریقوں کی پیروی کریں
- یہ تعلیمی مخزن جامع خودکار ٹیسٹس نہیں رکھتا
- دستی ٹیسٹنگ پر توجہ مرکوز ہے:
- کوڈ کی مثالیں بغیر کسی ایرر کے چلیں
- دستاویزات میں لنکس درست کام کریں
- پروجیکٹ کامیابی سے بنیں
- مثالیں بہترین طریقہ کار کی پیروی کریں
### جمع کروانے سے پہلے کے چیک
### قبل از جمع کرانے چیکس
- `npm run lint` ان ڈائریکٹریز میں چلائیں جن میں package.json ہے
- مارک ڈاؤن لنکس کی تصدیق کریں
- کوڈ کی مثالوں کو براؤزر یا Node.js میں جانچیں
- ترجمے کی ساخت کو درست رکھیں
- `npm run lint` چلائیں جہاں `package.json` ہو
- مارک ڈاؤن لنکس کی درستگی کی تصدیق کریں
- کوڈ کی مثالوں کی براؤزر یا نوڈ۔جے ایس میں جانچ کریں
- ترجمہ شدہ مواد کی ساخت کی درستگی چیک کریں
## کوڈ اسٹائل کے رہنما اصول
### جاوا اسکرپٹ
- جدید ES6+ نحو استعمال کریں
- پروجیکٹس میں فراہم کردہ معیاری ESLint کنفیگریشنز کی پیروی کریں
- تعلیمی وضاحت کے لیے بامعنی متغیر اور فنکشن نام استعمال کریں
- سیکھنے والوں کے لیے تصورات کی وضاحت کرنے والے تبصرے شامل کریں
- جہاں Prettier کنفیگر ہو، فارمیٹ کریں
- جدید ES6+ نحو استعمال کریں
- پروجیکٹس میں فراہم کردہ ESLint کنفیگریشنز کا استعمال کریں
- تعلیمی وضاحت کے لیے بامعنی متغیر اور فنکشن کے نام رکھیں
- سیکھنے والوں کے لیے تصریحات شامل کریں
- جہاں ممکن ہو پریٹیئر سے فارمیٹنگ کریں
### HTML/CSS
- سیمینٹک HTML5 عناصر
- ریسپانسیو ڈیزائن کے اصول
- واضح کلاس نام دینے کے کنونشنز
- سیکھنے والوں کے لیے CSS تکنیکوں کی وضاحت کرنے والے تبصرے
- سمانٹک HTML5 عناصر
- ریسپانسیو ڈیزائن کے اصول
- واضح کلاس ناموں کے کنونشن
- CSS تکنیکوں کی وضاحت کے لیے تبصرے
### Python
### پائتھون
- PEP 8 اسٹائل کے رہنما اصول
- واضح، تعلیمی کوڈ کی مثالیں
- جہاں سیکھنے کے لیے مددگار ہو، ٹائپ ہنٹس شامل کریں
- PEP 8 اسٹائل گائیڈ لائنز
- واضح، تعلیمی کوڈ مثالیں
- سیکھنے میں مدد کے لیے ٹائپ ہنٹس
### مارک ڈاؤن دستاویزات
- واضح ہیڈنگ کی درجہ بندی
- زبان کی وضاحت کے ساتھ کوڈ بلاکس
- اضافی وسائل کے لنکس
- `images/` ڈائریکٹریز میں اسکرین شاٹس اور تصاویر
- تصاویر کے لیے متبادل متن برائے رسائی
- واضح سرخیوں کی ترتیب
- زبان کی وضاحت کے ساتھ کوڈ بلاکس
- اضافی وسائل کے لنکس
- `images/` فولڈرز میں اسکرین شاٹس اور تصاویر
- تصاویر کے لیے متبادل متن برائے رسائی
### فائل تنظیم
### فائل آرگنائزیشن
- اسباق کو ترتیب وار نمبر دیا گیا (1-getting-started-lessons، 2-js-basics، وغیرہ)
- ہر پروجیکٹ میں `solution/` اور اکثر `start/` یا `your-work/` ڈائریکٹریز ہوتی ہیں
- تصاویر سبق کے مخصوص `images/` فولڈرز میں محفوظ کی جاتی ہیں
- ترجمے `translations/{language-code}/` ساخت میں
- اسباق کو ترتیب وار نمبر دیے گئے (1-getting-started-lessons، 2-js-basics، وغیرہ)
- ہر پروجیکٹ میں `solution/` اور اکثر `start/` یا `your-work/` ڈائریکٹریز
- سبق کی مخصوص `images/` فولڈرز میں تصاویر محفوظ
- ترجمے `translations/{language-code}/` ڈھانچے میں
## تعمیر اور تعیناتی
## تعمیری اور نفاذی عمل
### Quiz App تعیناتی (Azure Static Web Apps)
### کوئز ایپ نفاذ (Azure Static Web Apps)
quiz-app Azure Static Web Apps تعیناتی کے لیے کنفیگر ہے:
کوئز-ایپ کو Azure Static Web Apps کے لیے ترتیب دیا گیا ہے:
```bash
cd quiz-app
npm run build # Creates dist/ folder
# Deploys via GitHub Actions workflow on push to main
npm run build # فولڈر dist/ بناتا ہے
# مین پر دھکیلنے پر GitHub Actions ورک فلو کے ذریعے تعینات کرتا ہے
```
Azure Static Web Apps کنفیگریشن:
- **ایپ کا مقام**: `/quiz-app`
- **آؤٹ پٹ مقام**: `dist`
- **ورک فلو**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
Azure Static Web Apps کی ترتیب:
- **ایپ کا مقام**: `/quiz-app`
- **آؤٹ پٹ مقام**: `dist`
- **ورک فلو**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### دستاویزات PDF جنریشن
### دستاویزات کا PDF جنریشن
```bash
npm install # Install docsify-to-pdf
npm run convert # Generate PDF from docs
npm install # دستاویزات کو پی ڈی ایف میں تبدیل کرنے والی داکسیفائی انسٹال کریں
npm run convert # داکس سے پی ڈی ایف تیار کریں
```
### Docsify دستاویزات
```bash
npm install -g docsify-cli # Install Docsify globally
docsify serve # Serve on localhost:3000
npm install -g docsify-cli # ڈوکسفی کو عالمی طور پر انسٹال کریں
docsify serve # localhost:3000 پر سروس فراہم کریں
```
### پروجیکٹ مخصوص تعمیرات
### پروجیکٹ مخصوص بلڈز
ہر پروجیکٹ ڈائریکٹری میں اپنی تعمیر کا عمل ہو سکتا ہے:
- Vue پروجیکٹس: `npm run build` پروڈکشن بنڈلز بناتا ہے
- جامد پروجیکٹس: کوئی تعمیراتی مرحلہ نہیں، فائلز کو براہ راست فراہم کریں
ہر پروجیکٹ ڈائریکٹری کا اپنا بلڈ عمل ہو سکتا ہے:
- ویو پروجیکٹس: `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`
تبدیلی کے حصے کی واضح اور وضاحتی عنوانات استعمال کریں:
- `[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 جمع کروانے سے پہلے:
PR جمع کرانے سے پہلے:
1. **کوڈ کا معیار**:
- متاثرہ پروجیکٹ ڈائریکٹریز میں `npm run lint` چلائیں
- تمام linting غلطیوں اور انتباہات کو درست کریں
1. **کوڈ کی کوالٹی**:
- متاثرہ پروجیکٹ ڈائریکٹریز میں `npm run lint` چلائیں
- تمام لینٹنگ ایررز اور وارننگز درست کریں
2. **تعمیر کی تصدیق**:
- اگر قابل اطلاق ہو تو `npm run build` چلائیں
- کوئی تعمیراتی غلطی نہ ہو
2. **بلڈ کی تصدیق**:
- اگر قابل اطلاق ہے تو `npm run build` چلائیں
- یقینی بنائیں کہ کوئی بلڈ ایرر نہیں ہے
3. **لنک کی توثیق**:
- تمام مارک ڈاؤن لنکس کی جانچ کریں
- تصویر کے حوالہ جات درست کام کریں
3. **لنک ویلیڈیشن**:
- تمام مارک ڈاؤن لنکس کی جانچ کریں
- امیج ریفرنسز کام کر رہے ہیں
4. **مواد کا جائزہ**:
- ہجے اور گرامر کے لیے پروف ریڈ کریں
- کوڈ کی مثالیں درست اور تعلیمی ہوں
- ترجمے اصل معنی کو برقرار رکھیں
4. **مواد کا جائزہ**:
- ہجے اور گرامر کی جانچ کریں
- کوڈ کی مثالیں درست اور تعلیمی ہوں
- ترجمے اصل معنی برقرار رکھیں
### شراکت کی ضروریات
### شراکت کے تقاضے
- Microsoft CLA سے اتفاق کریں (پہلے PR پر خودکار چیک)
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) کی پیروی کریں
- تفصیلی رہنما اصول کے لیے [CONTRIBUTING.md](./CONTRIBUTING.md) دیکھیں
- اگر قابل اطلاق ہو تو PR کی تفصیل میں مسئلے کے نمبر کا حوالہ دیں
- مائیکروسافٹ CLA سے اتفاق کریں (پہلی PR پر خودکار چیک)
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) کی پیروی کریں
- تفصیلی رہنما اصول کے لیے [CONTRIBUTING.md](./CONTRIBUTING.md) دیکھیں
- اگر قابل اطلاق ہو تو PR کی وضاحت میں ایشو نمبر شامل کریں
### جائزہ لینے کا عمل
### جائزہ کا عمل
- PRs کو منتظمین اور کمیونٹی کے ذریعے جائزہ لیا جاتا ہے
- تعلیمی وضاحت کو ترجیح دی جاتی ہے
- کوڈ کی مثالیں موجودہ بہترین طریقوں کی پیروی کریں
- ترجمے درستگی اور ثقافتی موزونیت کے لیے جائزہ لیے جاتے ہیں
- PRs کو مینٹینرز اور کمیونٹی کی طرف سے جانچا جاتا ہے
- تعلیمی وضاحت کو ترجیح دی جاتی ہے
- کوڈ مثالیں موجودہ بہترین طریقہ کار کی پیروی کریں
- ترجمے درستگی اور ثقافتی مناسبت کے لیے جائزہ لیے جاتے ہیں
## ترجمہ کا نظام
### خودکار ترجمہ
- GitHub Actions کے ساتھ co-op-translator ورک فلو استعمال کرتا ہے
- خودکار طور پر 50+ زبانوں میں ترجمہ کرتا ہے
- مرکزی ڈائریکٹریز میں سورس فائلز
- ترجمہ شدہ فائلز `translations/{language-code}/` ڈائریکٹریز میں
- گٹ ہب ایکشنز کے ساتھ co-op-translator ورک فلو استعمال کرتا ہے
- 50+ زبانوں میں خودکار ترجمہ
- ماخذ فائلیں مرکزی ڈائریکٹریز میں
- ترجمہ شدہ فائلیں `translations/{language-code}/` میں
### دستی ترجمہ کی بہتری شامل کرنا
### دستی ترجمہ بہتری کے اضافے
1. فائل کو `translations/{language-code}/` میں تلاش کریں
2. ساخت کو برقرار رکھتے ہوئے بہتری کریں
3. کوڈ کی مثالیں فعال رہیں
4. کسی بھی مقامی کوئز مواد کی جانچ کریں
1. `translations/{language-code}/` میں فائل تلاش کریں
2. ساخت برقرار رکھتے ہوئے بہتری کریں
3. کوڈ کی مثالیں کام کرنے والی رکھیں
4. لوکلائزڈ کوئز مواد کی جانچ کریں
### ترجمہ میٹا ڈیٹا
### ترجمے کا میٹا ڈیٹا
ترجمہ شدہ فائلز میں میٹا ڈیٹا ہیڈر شامل ہوتا ہے:
ترجمہ شدہ فائلوں میں میٹا ڈیٹا ہیڈر شامل ہوتا ہے:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,118 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## ڈیبگنگ اور خرابیوں کا ازالہ
## ڈیبگنگ اور مسئلہ حل کرنا
### عام مسائل
**Quiz app شروع نہیں ہو رہا**:
- Node.js ورژن چیک کریں (v14+ تجویز کردہ)
- `node_modules` اور `package-lock.json` حذف کریں، دوبارہ `npm install` چلائیں
- پورٹ کے تنازعات چیک کریں (ڈیفالٹ: Vite پورٹ 5173 استعمال کرتا ہے)
**کوئز ایپ شروع نہیں ہوتی**:
- نوڈ۔جے ایس کا ورژن چیک کریں (v14+ سفارش کی جاتی ہے)
- `node_modules` اور `package-lock.json` حذف کریں، پھر `npm install` چلائیں
- پورٹ کے تصادمات کی جانچ کریں (ڈیفالٹ: وائٹ 5173 پورٹ استعمال کرتا ہے)
**API سرور شروع نہیں ہو رہا**:
- Node.js ورژن کم از کم ضروریات کو پورا کرتا ہے (node >=10)
- چیک کریں کہ پورٹ پہلے سے استعمال میں ہے
- تمام انحصارات `npm install` کے ساتھ انسٹال کریں
**API سرور شروع نہیں ہوتا**:
- نوڈ۔جے ایس کا ورژن کم از کم 10 ہو
- چیک کریں کہ پورٹ پہلے سے استعمال میں نہ ہو
- تمام dependencies `npm install` سے انسٹال کریں
**براؤزر ایکسٹینشن لوڈ نہیں ہو رہا**:
- تصدیق کریں کہ manifest.json صحیح طور پر فارمیٹ کیا گیا ہے
- براؤزر کنسول میں غلطیوں کو چیک کریں
- براؤزر مخصوص ایکسٹینشن انسٹالیشن ہدایات پر عمل کریں
**براؤزر ایکسٹینشن لوڈ نہیں ہوتی**:
- `manifest.json` کی صحیح فارمیٹنگ یقینی بنائیں
- براؤزر کنسول میں ایررز چیک کریں
- براؤزر مخصوص انسٹالیشن ہدایات پر عمل کریں
**Python chat پروجیکٹ کے مسائل**:
- تصدیق کریں کہ OpenAI پیکیج انسٹال ہے: `pip install openai`
- GITHUB_TOKEN ماحول متغیر سیٹ کریں
- GitHub Models تک رسائی کی اجازت چیک کریں
**پائتھون چیٹ پروجیکٹ کے مسائل**:
- OpenAI پیکیج انسٹال کریں: `pip install openai`
- GITHUB_TOKEN ماحول متغیر سیٹ ہے
- GitHub Models کی رسائی کی اجازتیں چیک کریں
**Docsify دستاویزات فراہم نہیں کر رہا**:
- docsify-cli کو گلوبلی انسٹال کریں: `npm install -g docsify-cli`
- ذخیرہ کی روٹ ڈائریکٹری سے چلائیں
- تصدیق کریں کہ `docs/_sidebar.md` موجود ہے
**Docsify دستاویزات ظاہر نہیں کرتا**:
- docsify-cli عالمی طور پر انسٹال کریں: `npm install -g docsify-cli`
- مخزن کی روٹ ڈائریکٹری سے چلائیں
- `docs/_sidebar.md` موجود ہے
### ترقیاتی ماحول کے نکات
### ترقیاتی ماحول کے ٹپس
- HTML پروجیکٹس کے لیے VS Code کے ساتھ Live Server ایکسٹینشن استعمال کریں
- مستقل فارمیٹنگ کے لیے ESLint اور Prettier ایکسٹینشنز انسٹال کریں
- جاوا اسکرپٹ کی ڈیبگنگ کے لیے براؤزر DevTools استعمال کریں
- Vue پروجیکٹس کے لیے Vue DevTools براؤزر ایکسٹینشن انسٹال کریں
- HTML پروجیکٹس کے لیے VS کوڈ میں لائیو سرور ایکسٹینشن استعمال کریں
- مستقل فارمیٹنگ کے لیے ESLint اور Prettier ایکسٹینشن نصب کریں
- جاوا اسکرپٹ کے لیے براؤزر کے ڈویلپر ٹولز استعمال کریں
- ویو پروجیکٹس کے لیے، Vue DevTools براؤزر ایکسٹینشن انسٹال کریں
### کارکردگی کے تحفظات
### کارکردگی کے ملاحظات
- ترجمہ شدہ فائلز کی بڑی تعداد (50+ زبانیں) کا مطلب ہے کہ مکمل کلونز بڑے ہیں
- اگر صرف مواد پر کام کر رہے ہیں تو شالو کلون استعمال کریں: `git clone --depth 1`
- انگریزی مواد پر کام کرتے وقت ترجمے کو تلاش سے خارج کریں
- پہلی بار چلانے پر تعمیراتی عمل سست ہو سکتا ہے (npm install، Vite build)
- ترجمہ شدہ فائلوں کی بڑی تعداد (50+ زبانیں) مکمل کلون کو بڑا بناتی ہے
- صرف مواد پر کام کے لیے شالو کلون استعمال کریں: `git clone --depth 1`
- انگریزی مواد پر کام کرتے وقت ترجموں کو تلاش سے خارج کریں
- پہلی بار چلانے پر بلڈ عمل سست ہو سکتا ہے (npm install، وائٹ بلڈ)
## سیکیورٹی تحفظات
## سیکیورٹی کے ملاحظات
### ماحول متغیرات
- API کیز کو کبھی بھی ذخیرہ میں شامل نہ کریں
- `.env` فائلز استعمال کریں (پہلے سے `.gitignore` میں شامل ہیں)
- پروجیکٹ READMEs میں مطلوبہ ماحول متغیرات کی دستاویز کریں
- API کیز کبھی بھی مخزن میں جمع نہ کریں
- `.env` فائلوں کا استعمال کریں (جو `.gitignore` میں ہیں)
- پروجیکٹ README میں مطلوبہ ماحول متغیرات دستاویزی شکل میں شامل کریں
### Python پروجیکٹس
### پائتھون پروجیکٹس
- ورچوئل ماحول استعمال کریں: `python -m venv venv`
- انحصارات کو اپ ڈیٹ رکھیں
- GitHub ٹوکنز کو کم سے کم مطلوبہ اجازت دیں
- ورچوئل ماحول استعمال کریں: `python -m venv venv`
- dependencies کو اپ ڈیٹ رکھیں
- GitHub ٹوکنز کو کم سے کم ضروری اجازت دی جائے
### GitHub Models تک رسائی
### GitHub Models کی رسائی
- GitHub Models کے لیے Personal Access Tokens (PAT) ضروری ہیں
- ٹوکنز کو ماحول متغیرات کے طور پر محفوظ کریں
- ٹوکنز یا اسناد کو کبھی بھی ذخیرہ میں شامل نہ کریں
- ذاتی رسائی ٹوکنز (PAT) GitHub Models کے لیے ضروری ہیں
- ٹوکنز کو ماحول متغیرات کے طور پر محفوظ کریں
- ٹوکنز یا اسناد کبھی جمع نہ کریں
## اضافی نوٹس
### ہدف سامعین
### ہدف مخاطب
- ویب ڈویلپمنٹ کے مکمل ابتدائی افراد
- طلباء اور خود سیکھنے والے
- اس نصاب کو کلاس رومز میں استعمال کرنے والے اساتذہ
- مواد رسائی اور مہارت کی تدریجی تعمیر کے لیے ڈیزائن کیا گیا ہے
- ویب ترقی میں مکمل نئے شروعات کرنے والے
- طلباء اور خود سیکھنے والے
- اساتذہ جو نصاب کو کلاس رومز میں استعمال کرتے ہیں
- مواد رسائی کے لیے ڈیزائن کیا گیا ہے اور ہنر کی تدریجی تعمیر کے لیے
### تعلیمی فلسفہ
- پروجیکٹ پر مبنی سیکھنے کا طریقہ
- بار بار علم کی جانچ (کوئزز)
- عملی کوڈنگ مشقیں
- حقیقی دنیا کے اطلاق کی مثالیں
- فریم ورک سے پہلے بنیادی اصولوں پر توجہ
- پروجیکٹ بیسڈ سیکھنے کا طریقہ
- کثرت سے علم کی جانچ (کوئزز)
- عملی کوڈنگ مشقیں
- حقیقی دنیا کی مثالیں
- فریم ورکس سے پہلے بنیادی باتوں پر توجہ
### ذخیرہ کی دیکھ بھال
### مخزن کی دیکھ بھال
- سیکھنے والوں اور شراکت داروں کی فعال کمیونٹی
- انحصارات اور مواد کی باقاعدہ اپ ڈیٹس
- منتظمین کے ذریعے مسائل اور مباحثوں کی نگرانی
- GitHub Actions کے ذریعے ترجمہ کی اپ ڈیٹس خودکار
- متحرک سیکھنے والوں اور تعاون کنندگان کی کمیونٹی
- dependencies اور مواد کو باقاعدگی سے اپ ڈیٹ کیا جاتا ہے
- ایشوز اور مباحثوں کی نگرانی مینٹینرز کرتے ہیں
- ترجمہ کی اپ ڈیٹس گٹ ہب ایکشنز سے خودکار ہیں
### متعلقہ وسائل
- [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) سیکھنے والوں کے لیے تجویز کردہ
- اضافی کورسز: Generative AI، Data Science، ML، IoT نصاب دستیاب ہیں
- [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) کو سیکھنے والوں کے لیے تجویز کیا گیا
- اضافی کورسز: جنریٹیو AI، ڈیٹا سائنس، ML، IoT نصابات دستیاب ہیں
### مخصوص پروجیکٹس کے ساتھ کام کرنا
انفرادی پروجیکٹس پر تفصیلی ہدایات کے لیے، README فائلز دیکھیں:
- `quiz-app/README.md` - Vue 3 کوئز ایپلیکیشن
- `7-bank-project/README.md` - تصدیق کے ساتھ بینکنگ ایپلیکیشن
- `5-browser-extension/README.md` - براؤزر ایکسٹینشن ڈویلپمنٹ
- `6-space-game/README.md` - Canvas پر مبنی گیم ڈویلپمنٹ
- `9-chat-project/README.md` - AI چیٹ اسسٹنٹ پروجیکٹ
مخصوص پروجیکٹس کے تفصیلی ہدایات کے لیے درج ذیل README فائلز دیکھیں:
- `quiz-app/README.md` - ویو 3 کوئز ایپلیکیشن
- `7-bank-project/README.md` - بینکنگ ایپلیکیشن تصدیق کے ساتھ
- `5-browser-extension/README.md` - براؤزر ایکسٹینشن ڈیویلپمنٹ
- `6-space-game/README.md` - کینواس پر مبنی گیم ڈیویلپمنٹ
- `9-chat-project/README.md` - AI چیٹ اسسٹنٹ پروجیکٹ
### Monorepo ساخت
### مونو ریپو ساخت
اگرچہ یہ روایتی Monorepo نہیں ہے، یہ ذخیرہ متعدد آزاد پروجیکٹس پر مشتمل ہے:
- ہر سبق خود مختار ہے
- پروجیکٹس انحصارات کا اشتراک نہیں کرتے
- انفرادی پروجیکٹس پر کام کریں بغیر دوسروں کو متاثر کیے
- مکمل نصاب کے تجربے کے لیے پورے ذخیرہ کو کلون کریں
یہ کلاسیکل مونو ریپو نہیں ہے، بلکہ اس میں کئی آزاد پروجیکٹس شامل ہیں:
- ہر سبق خود مختار ہے
- پروجیکٹس کی dependencies مشترک نہیں
- ایک پروجیکٹ پر کام کریں بغیر دوسرے متاثر کیے
- مکمل نصاب کا تجربہ کرنے کے لیے پورے مخزن کو کلون کریں
---
**ڈسکلیمر**:
یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**دستخطی نوٹس**:
یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کے ذریعے ترجمہ کی گئی ہے۔ اگرچہ ہم درستگی کی کوشش کرتے ہیں، براہ کرم اس بات سے آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا کمی بیشی ہوسکتی ہے۔ اصل دستاویز اپنے مادری زبان میں ہی مستند ذریعہ سمجھی جائے۔ اہم معلومات کے لیے پیشہ ورانہ انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمہ کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا بدفہمی کی ذمہ داری ہم پر عائد نہیں ہوگی۔
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -1,267 +1,264 @@
[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![گیٹ ہب لائسنس](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![گیٹ ہب تعاون کرنے والے](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![گیٹ ہب مسائل](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![گیٹ ہب پل ریکویسٹ](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![پی آر خوش آمدید](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
[![گیٹ ہب واچرز](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![گیٹ ہب فورکس](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![گیٹ ہب اسٹارز](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
[![مائیکروسافٹ فاؤنڈری ڈسکارڈ](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# ابتدائی افراد کے لیے ویب ڈیولپمنٹ - ایک نصاب
# ابتدائیوں کے لیے ویب ڈیولپمنٹ - ایک نصاب
Microsoft Cloud Advocates کے ذریعہ تیار کردہ 12 ہفتوں پر محیط مکمل کورس کے ساتھ ویب ڈیولپمنٹ کی بنیادی باتیں سیکھیں۔ 24 اسباق میں سے ہر ایک JavaScript، CSS، اور HTML کو ہاتھوں کے عملی پروجیکٹس جیسے کہ ٹیریریمز، براؤزر ایکسٹینشنز، اور اسپیس گیمز کے ذریعے تفصیل سے بتاتا ہے۔ کوئزز، مباحثوں، اور عملی اسائنمنٹس کے ذریعے حصہ لیں۔ اپنی مہارتوں کو بہتر بنائیں اور ہمارے مؤثر پروجیکٹ پر مبنی تدریسی طریقہ کار کے ساتھ اپنی معلومات کو بہتر طریقے سے برقرار رکھیں۔ آج ہی اپنے کوڈنگ کے سفر کا آغاز کریں!
مائیکروسافٹ کلاؤڈ ایڈووکیٹس کے ذریعے ہمارے 12 ہفتوں کے جامع کورس کے ساتھ ویب ڈیولپمنٹ کے بنیادی اصول سیکھیں۔ 24 اسباق میں سے ہر ایک جاوا اسکرپٹ، CSS، اور HTML کو ہاتھ سے کرنے والے پروجیکٹس جیسے تیریریمز، براؤزر ایکسٹینشنز، اور خلائی کھیل کے ذریعے گہرائی میں لے جاتا ہے۔ کوئزز، مباحثے، اور عملی اسائنمنٹس میں حصہ لیں۔ اپنی مہارتوں کو بہتر بنائیں اور ہماری مؤثر پروجیکٹ پر مبنی تدریسی طریقہ کار کے ساتھ اپنے علم کو بہتر طریقے سے محفوظ کریں۔ آج ہی اپنی کوڈنگ کا سفر شروع کریں!
Azure AI Foundry Discord کمیونٹی میں شامل ہوں
ازور AI فاؤنڈری ڈسکارڈ کمیونٹی میں شامل ہوں
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
[![مائیکروسافٹ فاؤنڈری ڈسکارڈ](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
ان وسائل کو استعمال کرنے کے لیے یہ اقدامات کریں:
1. **ریپوزیٹری کو فورک کریں**: کلک کریں [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
1. **ریپوزیٹری کو فورک کریں**: کلک کریں [![گیٹ ہب فورکس](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **ریپوزیٹری کلون کریں**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Azure AI Foundry Discord میں شامل ہوں اور ماہرین و ساتھی ڈویلپرز سے ملاقات کریں**](https://discord.com/invite/ByRwuEEgH4)
3. [**Azure AI Foundry Discord میں شامل ہوں اور ماہرین و ساتھی ڈیولپرز سے ملیں**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 کثیراللسانی معاونت
### 🌐 کثیراللسانی حمایت
#### GitHub Action کے ذریعے سپورٹ کی گئی (خودکار اور ہمیشہ جدید)
#### GitHub ایکشن کے ذریعے حمایت یافتہ (خودکار اور ہمیشہ تازہ ترین)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](./README.md) | [Vietnamese](../vi/README.md)
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [چینی (سادہ)](../zh-CN/README.md) | [چینی (روایتی، ہانگ کانگ)](../zh-HK/README.md) | [چینی (روایتی، مکاو)](../zh-MO/README.md) | [چینی (روایتی، تائیوان)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [نائیجیریائی پڈگن](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [اردو](./README.md) | [Vietnamese](../vi/README.md)
> **مقامی طور پر کلون کرنا پسند کریں؟**
> **کیا آپ لوکل کلون کرنا پسند کریں گے؟**
> یہ ریپوزیٹری 50+ زبانوں کے تراجم شامل ہے جو ڈاؤن لوڈ سائز کو کافی بڑھا دیتا ہے۔ بغیر تراجم کے کلون کرنے کے لیے sparse checkout استعمال کریں:
> یہ ریپوزیٹری 50+ زبانوں کے تراجم شامل کرتی ہے جو ڈاؤن لوڈ سائز کو بہت بڑھاتی ہے۔ بغیر تراجم کے کلون کرنے کے لیے sparse checkout استعمال کریں:
> ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> اس سے آپ کو کورس مکمل کرنے کے لیے ہر چیز ملے گی جس سے ڈاؤن لوڈ بہت تیز ہوجاتا ہے۔
> اس سے آپ کو کورس مکمل کرنے کے لیے درکار تمام مواد تیز ترین ڈاؤن لوڈ کے ساتھ مل جائے گا۔
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**اگر آپ مزید زبانوں کی حمایت چاہتے ہیں تو وہ یہاں دستیاب ہیں [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**اگر آپ اضافی ترجمہ شدہ زبانوں کا اضافہ چاہتے ہیں تو وہ یہاں درج ہیں [یہاں](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[![ویژول اسٹوڈیو کوڈ میں کھولیں](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _کیا آپ طالب علم ہیں؟_
وزٹ کریں [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) جہاں آپ کو ابتدائی وسائل، طالب علم پیک، اور مفت سرٹیفیکیٹ واؤچر حاصل کرنے کے طریقے ملیں گے۔ یہ وہ صفحہ ہے جسے آپ کو بک مارک کرنا چاہیے اور وقتاً فوقتاً چیک کرنا چاہیے کیونکہ ہم ہر مہینے مواد تبدیل کرتے ہیں۔
وزٹ کریں [**طالب علم ہب صفحہ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) جہاں آپ کو ابتدائی وسائل، طالب علم پیکز اور یہاں تک کہ مفت سرٹیفیکیٹ ووچر حاصل کرنے کے طریقے ملیں گے۔ یہ وہ صفحہ ہے جس کا آپ کو وقتاً فوقتاً جائزہ لینا چاہیے کیونکہ ہم ہر ماہ مواد اپ ڈیٹ کرتے ہیں۔
### 📣 اعلان - نئے GitHub Copilot ایجنٹ موڈ چیلنجز مکمل کرنے کے لیے!
### 📣 اعلان - نئے GitHub Copilot Agent موڈ چیلنجز مکمل کریں!
نیا چیلنج شامل کیا گیا ہے، زیادہ تر ابواب میں "GitHub Copilot Agent Challenge 🚀" تلاش کریں۔ یہ آپ کے لیے GitHub Copilot اور Agent موڈ استعمال کرتے ہوئے مکمل کرنے کے لیے نیا چیلنج ہے۔ اگر آپ نے پہلے Agent موڈ استعمال نہیں کیا تو یہ صرف متن تیار کرنے کے قابل نہیں بلکہ فائلیں بنانے اور ایڈٹ کرنے، کمانڈز چلانے اور بہت کچھ کرنے کے قابل ہے۔
نیا چیلنج شامل کیا گیا ہے، زیادہ تر ابواب میں "GitHub Copilot Agent Challenge 🚀" تلاش کریں۔ یہ ایک نیا چیلنج ہے جو آپ GitHub Copilot اور Agent موڈ کے ذریعے مکمل کریں گے۔ اگر آپ نے Agent موڈ پہلے استعمال نہیں کیا تو یہ صرف متن تیار کرنے کے قابل نہیں بلکہ فائلیں تخلیق اور ترمیم، کمانڈز چلانے اور مزید کرنے کے قابل ہے۔
### 📣 اعلان - _نئی پروجیکٹ جنریٹو AI استعمال کرتے ہوئے بنانے کے لیے_
### 📣 اعلان - _جدید منصوبہ جنریٹیو AI کے ذریعے بنانے کے لیے_
نیا AI اسسٹنٹ پروجیکٹ شامل کیا گیا ہے، چیک کریں [پروجیکٹ](./9-chat-project/README.md)
نیا AI اسسٹنٹ پروجیکٹ ابھی شامل کیا گیا ہے، چیک کریں [پروجیکٹ](./9-chat-project/README.md)
### 📣 اعلان - ئی نصاب_ جنریٹو AI کے لیے جاوا اسکرپٹ میں ابھی ریلیز ہوا ہے
### 📣 اعلان - یا نصاب_ جنریٹیو AI برائے جاوا اسکرپٹ ابھی جاری کیا گیا ہے
ہماری نئی جنریٹو AI کی نصاب مت چھوڑیں!
ہمارا نیا جنریٹیو AI نصاب مت چھوڑیں!
شروع کرنے کے لیے وزٹ کریں [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)!
![Background](../../translated_images/ur/background.148a8d43afde5730.webp)
![پس منظر](../../translated_images/ur/background.148a8d43afde5730.webp)
- بنیادی سے لے کر RAG تک ہر چیز کے لیے اسباق۔
- GenAI اور ہمارے کمپینین ایپ کے استعمال سے تاریخی کرداروں کے ساتھ بات چیت کریں۔
- مزے دار اور دلچسپ بیانیہ، آپ وقت کا سفر کریں گے!
- اسباق میں بنیادیات سے لے کر RAG تک سب شامل ہیں۔
- تاریخی کرداروں کے ساتھ GenAI اور ہمارے ہمراہ ایپ کے ذریعے بات چیت کریں۔
- لطف اندوز اور دلچسپ کہانی، آپ وقت میں سفر کریں گے!
![character](../../translated_images/ur/character.5c0dd8e067ffd693.webp)
![کردار](../../translated_images/ur/character.5c0dd8e067ffd693.webp)
ہر سبق میں ایک اسائنمنٹ، نالج چیک، اور ایک چیلنج شامل ہے تاکہ آپ کو درج ذیل موضوعات سیکھنے میں رہنمائی ملے:
- پرامپٹ اور پرامپٹ انجینئرنگ
ہر سبق میں ایک اسائنمنٹ، علم کی جانچ اور ایک چیلنج شامل ہے تاکہ آپ کو درج ذیل موضوعات پر رہنمائی کرے:
- پرامپٹنگ اور پرامپٹ انجینئرنگ
- ٹیکسٹ اور امیج ایپ جنریشن
- سرچ ایپس
شروع کرنے کے لیے وزٹ کریں [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course)!
شروع کرنے کے لیے وزٹ کریں [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)!
## 🌱 آغاز کریں
## 🌱 شروعات
> **اساتذہ**، ہم نے [کچھ تجاویز شامل کی ہیں](for-teachers.md) کہ اس نصاب کو کس طرح استعمال کیا جائے۔ ہمیں آپ کی رائے خوشی ہوگی [ہماری مباحثہ فورم میں](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **اساتذہ**، ہم نے [کچھ تجاویز شامل کی ہیں](for-teachers.md) کہ اس نصاب کو کیسے استعمال کیا جائے۔ ہم آپ کی رائے کے منتظر ہیں [ہمارے مباحثہ فورم میں](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[سیکھنے والے](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**، ہر سبق کے لیے پری لیکچر کوئز سے شروع کریں اور لیکچر کے مواد کو پڑھیں، مختلف سرگرمیاں مکمل کریں اور پوسٹ لیکچر کوئز کے ساتھ اپنی سمجھ کو چیک کریں۔
**[سیکھنے والے](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**، ہر سبق کے لیے، پہلے پری لیکچر کوئز سے شروع کریں اور لیکچر کے مواد کو پڑھیں، مختلف سرگرمیاں مکمل کریں اور اپنی سمجھ کو پوسٹ لیکچر کوئز کے ذریعے جانچیں۔
اپنے تعلیمی تجربے کو بڑھانے کے لیے، اپنے ساتھی سیکھنے والوں کے ساتھ جڑیں اور پروجیکٹس پر اکٹھے کام کریں! ہمارے [مباحثہ فورم](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) میں مباحثوں کی حوصلہ افزائی کی جاتی ہے جہاں ہمارے ماڈریٹرز کی ٹیم آپ کے سوالات کا جواب دینے کے لیے دستیاب ہوگی۔
اپنے تعلیمی تجربے کو بہتر بنانے کے لیے، اپنے ساتھیوں سے مل کر پروجیکٹس پر کام کریں! مباحثے کی حوصلہ افزائی کی جاتی ہے ہمارے [مباحثہ فورم](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) میں جہاں ہمارے موڈریٹرز آپ کے سوالات کے جواب کے لیے دستیاب ہوں گے۔
تعلیم کو مزید بڑھانے کے لیے، ہم سختی سے مشورہ دیتے ہیں کہ آپ اضافی مطالعہ کے مواد کے لیے [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) کو دریافت کریں۔
اپنی تعلیم کو مزید فروغ دینے کے لیے، ہم آپ کو [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) پر اضافی مطالعہ مواد دریافت کرنے کی زوردار سفارش کرتے ہیں۔
### 📋 اپنا ماحول مرتب کرنا
### 📋 اپنا ماحول سیٹ اپ کرنا
اس نصاب کے لیے ترقیاتی ماحول تیار ہے! شروع کرتے وقت آپ نصاب کو ایک [Codespace](https://github.com/features/codespaces/) (_ایک براؤزر پر مبنی، بغیر انسٹالیشن کی ضرورت والا ماحول_) میں یا اپنے کمپیوٹر پر کوئی ٹیکسٹ ایڈیٹر جیسے [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) استعمال کرتے ہوئے لوکل طور پر چلا سکتے ہیں۔
اس نصاب کے لیے ڈویلپمنٹ کا ماحول تیار ہے! جب آپ شروعات کریں تو آپ منتخب کر سکتے ہیں کہ نصاب کو [Codespace](https://github.com/features/codespaces/) میں چلایا جائے (_ایک براؤزر بیسڈ، بغیر انسٹالیشن کے ماحول_), یا اپنے کمپیوٹر پر مقامی طور پر کسی ٹیکسٹ ایڈیٹر مثلاً [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) کا استعمال کرتے ہوئے۔
#### اپنی ریپوزیٹری بنائیں
اپنا کام آسانی سے محفوظ کرنے کے لیے، یہ تجویز کیا جاتا ہے کہ آپ اس ریپوزیٹری کی اپنی کاپی بنائیں۔ آپ یہ صفحہ کے اوپر موجود **Use this template** بٹن پر کلک کرکے کر سکتے ہیں۔ یہ آپ کے GitHub اکاؤنٹ میں نصاب کی کاپی کے ساتھ ایک نئی ریپوزیٹری بنائے گا۔
#### اپنا ریپوزیٹری بنائیں
اپنے کام کو آسانی سے محفوظ کرنے کے لیے، آپ کو مشورہ دیا جاتا ہے کہ آپ اپنا ذاتی کاپی ریپوزیٹری بنائیں۔ یہ آپ اس صفحے کے اوپر "Use this template" بٹن کو کلک کر کے کر سکتے ہیں۔ اس سے آپ کے گٹ ہب اکاؤنٹ میں نصاب کی ایک کوپی کے ساتھ نیا ریپوزیٹری بن جائے گا۔
مندرجہ ذیل اقدامات کی پیروی کریں:
1. **ریپوزیٹری کو فورک کریں**: اس صفحہ کے اوپر دائیں کونے میں موجود "Fork" بٹن پر کلک کریں۔
یہ اقدامات پر عمل کریں:
1. **ریپوزیٹری کو فورک کریں**: اس صفحے کے اوپری دائیں کونے میں "Fork" بٹن پر کلک کریں۔
2. **ریپوزیٹری کلون کریں**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Codespace میں نصاب چلانا
#### کورس کو Codespace میں چلانا
آپ کی بنائی ہوئی ریپوزیٹری میں، **Code** بٹن پر کلک کریں اور **Open with Codespaces** منتخب کریں۔ یہ آپ کے لیے ایک نیا Codespace بنائے گا جہاں آپ کام کر سکیں گے۔
اپنے بنائے گئے ریپوزیٹری کی کاپی میں، **Code** بٹن پر کلک کریں اور **Open with Codespaces** کا انتخاب کریں۔ یہ آپ کے لیے نیا Codespace تخلیق کرے گا جس میں آپ کام کریں گے۔
![Codespace](../../translated_images/ur/createcodespace.0238bbf4d7a8d955.webp)
#### نصاب کو اپنے کمپیوٹر پر لوکل چلانا
#### کورس کو اپنے کمپیوٹر پر مقامی طور پر چلانا
اس نصاب کو اپنے کمپیوٹر پر لوکل چلانے کے لیے، آپ کو ایک ٹیکسٹ ایڈیٹر، ایک براؤزر، اور ایک کمانڈ لائن ٹول کی ضرورت ہوگی۔ ہمارا پہلا سبق، [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages)، آپ کو مختلف آپشنز کے بارے میں بتائے گا تاکہ آپ منتخب کر سکیں کہ آپ کے لیے کون سا بہترین ہے۔
اس نصاب کو اپنے کمپیوٹر پر چلانے کے لیے، آپ کو ٹیکسٹ ایڈیٹر، براؤزر، اور کمانڈ لائن ٹول کی ضرورت ہوگی۔ ہمارا پہلا سبق، [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages)، آپ کو ہر ایک کے مختلف آپشنز دکھائے گا تاکہ آپ منتخب کر سکیں کہ کون سا آپ کے لیے بہترین ہے۔
ہماری تجویز ہے کہ آپ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) کو اپنے ایڈیٹر کے طور پر استعمال کریں، جس میں بلٹ ان [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) بھی موجود ہے۔ آپ Visual Studio Code یہاں سے ڈاؤن لوڈ کر سکتے ہیں [here](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)۔
ہماری تجویز ہے کہ آپ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) بطور ایڈیٹر استعمال کریں، جس میں بلٹ ان [ٹرمینل](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) بھی موجود ہے۔ آپ Visual Studio Code یہاں سے ڈاؤن لوڈ کر سکتے ہیں: [یہاں](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)۔
1. اپنی ریپوزیٹری کو اپنے کمپیوٹر پر کلون کریں۔ آپ یہ **Code** بٹن پر کلک کرکے اور URL کاپی کرکے کر سکتے ہیں:
1. اپنی ریپوزیٹری کو اپنے کمپیوٹر پر کلون کریں۔ یہ آپ **Code** بٹن پر کلک کرکے اور URL کو کاپی کرکے کر سکتے ہیں:
[CodeSpace](./images/createcodespace.png)
پھر، [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) کے اندر [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) کھولیں اور درج ذیل کمانڈ چلائیں، `<your-repository-url>` کو اس URL سے بدل کر جو آپ نے ابھی کاپی کیا ہے:
پھر، [ویژول اسٹوڈیو کوڈ](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) کے اندر [ٹرمینل](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) کھولیں اور مندرجہ ذیل کمانڈ چلائیں، `<your-repository-url>` کو اس یو آر ایل سے تبدیل کرتے ہوئے جو آپ نے ابھی کاپی کیا ہے:
```bash
git clone <your-repository-url>
```
2. Visual Studio Code میں فولڈر کھولیں۔ آپ یہ **File** > **Open Folder** پر کلک کرکے اور اس فولڈر کو منتخب کرکے کر سکتے ہیں جسے آپ نے ابھی کلون کیا ہے۔
2. فولڈر کو Visual Studio Code میں کھولیں۔ آپ یہ **File** > **Open Folder** پر کلک کر کے اور اسی فولڈر کو منتخب کر کے کر سکتے ہیں جسے آپ نے ابھی کلون کیا ہے۔
> Visual Studio Code ایکسٹینشنز کی سفارش کی جاتی ہے:
> تجویز کردہ Visual Studio Code ایکسٹینشنز:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code میں HTML صفحات کا پیش نظارہ کرنے کے لیے
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - آپ کی کوڈ لکھنے کی رفتار کو تیز کرنے میں مدد کے لیے
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code کے اندر HTML صفحات کا پیش نظارہ کرنے کے لیے
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - آپ کو کوڈ جلدی لکھنے میں مدد دینے کے لیے
## 📂 ہر سبق میں شامل ہے:
- اختیاری سکچ نوٹ
- اختیاری معاون ویڈیو
- سبق سے پہلے گرم اپ کوئز
- اختیاری اسکیچنوٹ
- اختیاری اضافی ویڈیو
- سبق سے پہلے کی وارم اپ کوئز
- تحریری سبق
- پراجیکٹ پر مبنی اسباق کے لیے، پروجیکٹ بنانے کے مرحلہ وار رہنما
- معلومات کی جانچ
- پروجیکٹ پر مبنی اسباق کے لیے، پروجیکٹ بنانے کے لیے مرحلہ وار رہنمائی
- علم کے چیک
- ایک چیلنج
- معاون مطالعہ
- اسائنمنٹ
- [سبق کے بعد کا کوئز](https://ff-quizzes.netlify.app/web/)
- اضافی مطالعہ
- اسباق کے بعد کوئز [post-lesson quiz](https://ff-quizzes.netlify.app/web/)
> **کوئزز کے بارے میں ایک نوٹ**: تمام کوئزز Quiz-app فولڈر میں موجود ہیں، کل 48 کوئزز ہر ایک میں تین سوالات شامل ہیں۔ یہ [یہاں](https://ff-quizzes.netlify.app/web/) دستیاب ہیں۔ کوئز ایپ کو لوکل طور پر چلایا جا سکتا ہے یا Azure پر ڈپلائے کیا جا سکتا ہے؛ ہدایات کے لیے `quiz-app` فولڈر میں دی گئی ہدایات پر عمل کریں۔
> **کوئزز کے بارے میں ایک نوٹ**: تمام کوئزز Quiz-app فولڈر میں موجود ہیں، کل 48 کوئزز جن میں سے ہر ایک میں تین سوالات ہیں۔ یہ کوئز [یہاں](https://ff-quizzes.netlify.app/web/) دستیاب ہیں اور کوئز ایپ کو مقامی طور پر چلایا جا سکتا ہے یا Azure پر تعینات کیا جا سکتا ہے؛ `quiz-app` فولڈر میں ہدایات پر عمل کریں۔
## 🗃️ اسباق
| | پراجیکٹ کا نام | سکھائے گئے تصورات | تعلیمی مقاصد | منسلک سبق | مصنف |
| | پروجیکٹ کا نام | مفاہیم جو سکھائے گئے | سیکھنے کے مقاصد | متعلقہ سبق | مصنف |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | شروع کرنا | پروگرامنگ اور ٹولز کا تعارف | اکثر پروگرامنگ زبانوں کی بنیادی بنیادیں سیکھیں اور وہ سافٹ ویئر جو ماہر ڈویلپرز کو ان کے کام میں مدد دیتا ہے | [پروگرامنگ زبانوں اور ٹولز کا تعارف](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | شروع کرنا | GitHub کے بنیادی اصول، ٹیم کے ساتھ کام کرنا | اپنے پراجیکٹ میں GitHub کا استعمال کیسے کریں، دوسروں کے ساتھ کوڈ بیس پر تعاون کیسے کریں | [GitHub کا تعارف](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | شروع کرنا | قابل رسائی ہونا | ویب کی قابل رسائی کی بنیادی باتیں سیکھیں | [قابل رسائی اصول](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 01 | شروع کرنا | پروگرامنگ کا تعارف اور آلات کا تعارف | زیادہ تر پروگرامنگ زبانوں کے بنیادی اصول سیکھیں اور اس سوفٹ ویئر کے بارے میں جانیں جو پیشہ ورانہ ڈویلپرز اپنے کام کے لیے استعمال کرتے ہیں | [پروگرامنگ زبانوں اور آلات کا تعارف](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | شروع کرنا | GitHub کی بنیادی باتیں، ٹیم کے ساتھ کام کرنا | اپنے پروجیکٹ میں GitHub کا استعمال کیسے کریں، اور دوسروں کے ساتھ کوڈ بیس پر تعاون کیسے کریں | [GitHub کا تعارف](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | شروع کرنا | قابل رسائی | ویب کی بنیادی رسائی کے بارے میں سیکھیں | [قابل رسائی کے بنیادی اصول](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS بنیادیات | JavaScript ڈیٹا کی اقسام | JavaScript ڈیٹا کی اقسام کی بنیادی باتیں | [ڈیٹا کی اقسام](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS بنیادیات | فنکشنز اور میتھڈز | اپلیکیشن کی منطق کے بہاؤ کو منظم کرنے کے لیے فنکشنز اور میتھڈز کے بارے میں سیکھیں | [فنکشنز اور میتھڈز](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS بنیادیات | JS کے ساتھ فیصلے کرنا | اپنے کوڈ میں فیصلہ سازی کے طریقے بنانا سیکھیں | [فیصلے کرنا](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS بنیادیات | ارے اور لوپ | JavaScript میں ارے اور لوپ کے ذریعے ڈیٹا کے ساتھ کام کریں | [ارے اور لوپ](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML عملی طور پر | آن لائن ٹیریریم بنانے کے لیے HTML تیار کریں، لے آؤٹ بنانے پر زور دیں | [HTML کا تعارف](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS عملی طور پر | آن لائن ٹیریریم کے لیے CSS تیار کریں، CSS کی بنیادی باتوں پر توجہ دیں جن میں صفحہ کو جوابدہ بنانا شامل ہے | [CSS کا تعارف](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript کلوزرز، DOM کی منیپولیشن | ٹیریریم کو ڈریگ/ڈراپ انٹرفیس کے طور پر کام کرنے کے لیے JavaScript تیار کریں، کلوزرز اور DOM کی منیپولیشن پر توجہ دیں | [JavaScript کلوزرز، DOM کی منیپولیشن](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | ٹائپنگ گیم بنائیں | اپنے JavaScript ایپ کی منطق کو چلانے کے لیے کی بورڈ ایونٹس کا استعمال کیسے کریں | [ایونٹ پر مبنی پروگرامنگ](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | براؤزرز کے ساتھ کام | براؤزرز کیسے کام کرتے ہیں، ان کی تاریخ، اور براؤزر ایکسٹینشن کے پہلے عناصر کو کیسے تیار کریں | [براؤزرز کے بارے میں](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | فارم بنانا، API کال کرنا اور لوکل سٹوریج میں ویری ایبلز محفوظ کرنا | اپنی براؤزر ایکسٹینشن کے JavaScript عناصر بنائیں تاکہ API کال کی جا سکے اور لوکل سٹوریج میں محفوظ ویری ایبلز استعمال کریں | [APIs، فارم اور لوکل سٹوریج](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | براؤزر کے پس منظر کے عمل، ویب کارکردگی | ایکسٹینشن کے آئیکن کو منظم کرنے کے لیے براؤزر کے پس منظر کے عمل استعمال کریں؛ ویب کارکردگی اور کچھ بہتری کے طریقے سیکھیں | [پس منظر کے کام اور کارکردگی](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | JavaScript کے ساتھ جدید گیم کی ترقی | کلاسز اور کمپوزیشن کا استعمال کرتے ہوئے وراثت اور Pub/Sub پیٹرن کے بارے میں سیکھیں، گیم بنانے کی تیاری کے لیے | [جدید گیم ڈیویلپمنٹ کا تعارف](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | کینوس پر ڈرائنگ | کینوس API کے بارے میں سیکھیں، جو اسکرین پر عناصر کی ڈرائنگ کے لیے استعمال ہوتا ہے | [کینوس پر ڈرائنگ](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | اسکرین پر عناصر کو حرکت دینا | دریافت کریں کہ کس طرح عناصر کو کارٹیسیئن کوآرڈینیٹ اور کینوس API کا استعمال کرتے ہوئے حرکت دی جا سکتی ہے | [عناصر کو حرکت دینا](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | ٹکراؤ کی شناخت | عناصر کو ایک دوسرے سے ٹکرانے اور ردعمل کرنے دیں، کی پریسز استعمال کرتے ہوئے اور ایک کول ڈاؤن فنکشن مہیا کریں تاکہ گیم کی کارکردگی یقینی بنائی جا سکے | [ٹکراؤ کی شناخت](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | سکور برقرار رکھنا | گیم کی حالت اور کارکردگی کی بنیاد پر ریاضیاتی حسابات کریں | [سکور برقرار رکھنا](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | گیم کو ختم کرنا اور دوبارہ شروع کرنا | گیم کو ختم کرنے اور دوبارہ شروع کرنے کے بارے میں سیکھیں، بشمول اثاثوں کی صفائی اور ویری ایبل کی قدروں کو ری سیٹ کرنا | [ختم ہونے کی شرط](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | ویب ایپ میں HTML ٹیمپلیٹس اور روٹس | روٹنگ اور HTML ٹیمپلیٹس کا استعمال کرتے ہوئے ایک کثیر صفحہ ویب سائٹ کا اسکیفولڈ کیسے بنائیں سیکھیں | [HTML ٹیمپلیٹس اور روٹس](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | لاگ ان اور رجسٹریشن فارم بنائیں | فارم بنانا اور ویلیڈیشن رُوٹینز کو ہینڈل کرنا سیکھیں | [فارمز](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | ڈیٹا حاصل کرنے اور استعمال کرنے کے طریقے | آپ کی ایپ میں ڈیٹا کا بہاؤ، اسے کیسے حاصل اور محفوظ کریں، اور اسے کیسے خارج کریں | [ڈیٹا](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | اسٹیٹ مینجمنٹ کے تصورات | سیکھیں کہ آپ کی ایپ اسٹیٹ کو کیسے برقرار رکھتی ہے اور اسے پروگرام کے ذریعے کیسے منظم کرتی ہے | [اسٹیٹ مینجمنٹ](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | VScode کے ساتھ کام کرنا | کوڈ ایڈیٹر کا استعمال سیکھیں| [VScode کوڈ ایڈیٹر کا استعمال](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | AI کے ساتھ کام کرنا | اپنا AI اسسٹنٹ بنانے کا طریقہ سیکھیں | [AI اسسٹنٹ پراجیکٹ](./9-chat-project/README.md) | Chris |
| 05 | JS بنیادیات | فنکشنز اور طریقے | ایک ایپلیکیشن کے منطق کے بہاؤ کو منظم کرنے کے لیے فنکشنز اور طریقے سیکھیں | [فنکشنز اور طریقے](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS بنیادیات | JS کے ساتھ فیصلے کرنا | اپنے کوڈ میں فیصلہ سازی کے طریقے استعمال کرتے ہوئے شرائط بنانے کا طریقہ سیکھیں | [فیصلے کرنا](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS بنیادیات | Arrays اور Loops | JavaScript میں Arrays اور Loops کے ساتھ ڈیٹا پر کام کریں | [Arrays اور Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML پریکٹس میں | آن لائن ٹیریریم بنانے کے لیے HTML تیار کریں، خصوصاً لے آوٹ پر توجہ دیں | [HTML کا تعارف](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS پریکٹس میں | آن لائن ٹیریریم کو سٹائل کرنے کے لیے CSS تیار کریں، CSS کی بنیادی باتوں پر توجہ دیں بشمول صفحہ کو ریسپانسیو بنانا | [CSS کا تعارف](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures، DOM میں ہیر پھیر | ٹیریریم کو drag/drop انٹرفیس بنانے کے لیے JavaScript تیار کریں، closures اور DOM میں ہیر پھیر پر توجہ دیں | [JavaScript Closures، DOM میں ہیر پھیر](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | ٹائپنگ گیم بنائیں | اپنے JavaScript ایپ میں لاجک چلانے کے لیے کی بورڈ ایونٹس کا استعمال سیکھیں | [ایونٹ ڈریون پروگرامنگ](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | براؤزرز کے ساتھ کام کرنا | براؤزرز کام کیسے کرتے ہیں، ان کی تاریخ، اور براؤزر ایکسٹینشن کے پہلے عناصر کو ترتیب دینا سیکھیں | [براؤزرز کے بارے میں](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | فارم بنانا، API کال کرنا اور variables کو مقامی اسٹوریج میں محفوظ کرنا | براؤزر ایکسٹینشن کے JavaScript عناصر بنائیں تاکہ API کال کرے، اس میں مقامی اسٹوریج میں محفوظ variables استعمال ہوں | [APIs، فارمز، اور لوکل اسٹوریج](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | براؤزر میں پس منظر کے عمل، ویب کی کارکردگی | ایکسٹینشن کے آئیکون کا انتظام کرنے کے لیے براؤزر کے پس منظر کے عمل استعمال کریں؛ ویب کی کارکردگی اور بہتری کے لیے طریقے سیکھیں | [پس منظر کے کام اور کارکردگی](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | جاوا اسکرپٹ کے ساتھ مزید جدید گیم کی ترقی | Classes اور Composition دونوں کے ذریعے Inheritance اور Pub/Sub پیٹرن کے بارے میں سیکھیں، گیم بنانے کی تیاری کے لیے | [جدید گیم کی ترقی کا تعارف](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | کینوس پر ڈرائنگ | Canvas API کے بارے میں سیکھیں، جو اسکرین پر عناصر ڈرائنگ کے لیے استعمال ہوتا ہے | [کینوس پر ڈرائنگ](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | اسکرین پر عناصر کو حرکت دینا | دریافت کریں کہ عناصر کس طرح Cartesian coordinates اور Canvas API کا استعمال کرتے ہوئے حرکت پا سکتے ہیں | [عناصر کو حرکت دینا](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | ٹکراؤ کی شناخت | عنصر آپس میں ٹکرا جائیں اور ایک دوسرے کے ردعمل ظاہر کریں، keypresses استعمال کریں اور گیم کی کارکردگی کو یقینی بنانے کے لیے cooldown فنکشن فراہم کریں | [ٹکراؤ کی شناخت](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | اسکور رکھنا | گیم کی حالت اور کارکردگی کی بنیاد پر ریاضی کے حساب کتاب کریں | [اسکور رکھنا](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | گیم کو ختم کرنا اور دوبارہ شروع کرنا | گیم کو ختم کرنے اور دوبارہ شروع کرنے کے بارے میں سیکھیں، جس میں اثاثے صاف کرنا اور متغیرات کی ویلیوز کو ری سیٹ کرنا شامل ہے | [اختتامی شرط](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | ویب ایپ میں HTML ٹیمپلیٹس اور راستے | ملٹی پیج ویب سائٹ کا اسکیفولڈ بنانا سیکھیں جس میں routing اور HTML ٹیمپلیٹس کا استعمال کیا گیا ہو | [HTML ٹیمپلیٹس اور راستے](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | لاگ ان اور رجسٹریشن فارم بنائیں | فارم بنانے اور ویلڈیٹیشن روتینز ہینڈل کرنے کے بارے میں سیکھیں | [فارمز](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | ڈیٹا حاصل کرنے اور استعمال کرنے کے طریقے | آپ کی ایپ میں ڈیٹا کا بہاؤ، اسے کیسے حاصل کریں، ذخیرہ کریں اور ضائع کریں | [ڈیٹا](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | ریاست کے نظم و نسق کے تصورات | اپنی ایپ میں ریاست کو کیسے برقرار رکھا جائے اور اسے پروگرام کے ذریعے کیسے منظم کیا جائے | [ریاست کا نظم و نسق](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | VsCode کے ساتھ کام کرنا | کوڈ ایڈیٹر استعمال کرنا سیکھیں | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | AI کے ساتھ کام کرنا | اپنا AI اسسٹنٹ بنانے کا طریقہ سیکھیں | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 تعلیم و تدریس
## 🏫 تدریسی اصول
ہمارا نصاب دو اہم تعلیمی اصولوں کو ذہن میں رکھتے ہوئے تیار کیا گیا ہے:
* پراجیکٹ پر مبنی سیکھنا
* کثرت سے کوئزز
ہمارا نصاب دو اہم تدریسی اصولوں کے ساتھ ڈیزائن کیا گیا ہے:
* پروجیکٹ کی بنیاد پر سیکھنا
* اکثر کوئزز
یہ پروگرام جاوا اسکرپٹ، HTML، اور CSS کی بنیادیں سکھاتا ہے، نیز آج کے ویب ڈویلپرز کے استعمال کردہ جدید ٹولز اور تکنیکس بھی۔ طلباء کو موقع ملے گا کہ وہ ہاتھوں ہاتھ تجربہ حاصل کریں جیسے کہ ٹائپنگ گیم، ورچوئل ٹیریریم، ماحول دوست براؤزر ایکسٹینشن، اسپیس-انوائیڈر طرز کا گیم، اور کاروباروں کے لیے بینکنگ ایپ بنانا۔ سیریز کے اختتام پر طلباء کو ویب ڈیویلپمنٹ کی مضبوط سمجھ حاصل ہو جائے گی۔
پروگرام JavaScript، HTML، اور CSS کی بنیادی باتیں سکھاتا ہے، نیز آج کے ویب ڈویلپرز کے استعمال کے جدید آلے اور تکنیک بھی۔ طلباء کو علاقوں میں عملی تجربہ حاصل کرنے کا موقع ملے گا جیسا کہ ٹائپنگ گیم، ورچوئل ٹیریریم، ماحول دوست براؤزر ایکسٹینشن، اسپیس-انوائڈر قسم کا گیم، اور کاروباری بینکنگ ایپ بنانے کے ذریعے۔ سیریز کے اختتام تک، طلباء کو ویب ڈیولپمنٹ کی مضبوط سمجھ حاصل ہو جائے گی۔
> 🎓 آپ اس نصاب کے کچھ ابتدائی اسباق کو Microsoft Learn پر ایک [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) کی طرح لے سکتے ہیں!
> 🎓 آپ اس نصاب کے پہلے چند اسباق کو مائیکروسافٹ لرن پر [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) کے طور پر لے سکتے ہیں!
مواد کو پراجیکٹس کے ساتھ ہم آہنگ رکھ کر، عمل طلباء کے لیے زیادہ دلچسپ بنایا جاتا ہے اور تصورات کے یاد رکھنے کی صلاحیت بڑھے گی۔ ہم نے جاوا اسکرپٹ بنیادیات میں چند ابتدائی اسباق بھی لکھے ہیں تاکہ تصورات کا تعارف کرایا جا سکے، جو "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ویڈیو ٹیوٹوریلز کی کلیکشن سے ایک ویڈیو کے ساتھ جوڑے گئے ہیں، جن میں سے کچھ مصنفین نے اس نصاب میں حصہ لیا ہے۔
پروجیکٹس سے مواد کے ہم آہنگ رہنے سے، عمل طلباء کے لیے مزید پرکشش ہوتا ہے اور تصورات کے برقرار رہنے میں اضافہ ہوتا ہے۔ ہم نے JavaScript کے بنیادیات میں کئی ابتدائی اسباق لکھے ہیں تاکہ تصورات متعارف کروائے جا سکیں، جن کے ساتھ "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" کے ویڈیو ٹیوٹوریلز کی ایک ویڈیو منسلک ہے، جن کے بعض مصنفین نے اس نصاب میں حصہ ڈالا ہے۔
اس کے علاوہ، کلاس سے پہلے ایک کم داؤ کا کوئز طلباء کی نیت کو کسی موضوع سیکھنے کی طرف مرکوز کرتا ہے، جبکہ کلاس کے بعد دوسرا کوئز مزید یادداشت کو یقینی بناتا ہے۔ یہ نصاب لچکدار اور مزیدار ہونے کے لیے ڈیزائن کیا گیا ہے اور اسے مکمل یا جزوی طور پر لیا جا سکتا ہے۔ پراجیکٹس چھوٹے سے شروع ہوکر 12 ہفتوں کے دورانیے کے اختتام تک بتدریج پیچیدہ ہوتے جاتے ہیں۔
اس کے علاوہ، کلاس سے پہلے کم دباؤ والا کوئز طلباء کی سیکھنے کی نیت قائم کرتا ہے، اور کلاس کے بعد دوسرا کوئز مزید برقرار رکھنے کو یقینی بناتا ہے۔ یہ نصاب لچکدار اور مزے دار بنانے کے لیے ڈیزائن کیا گیا ہے اور اسے مکمل طور پر یا جزوی طور پر لیا جا سکتا ہے۔ پروجیکٹس چھوٹے شروع ہوتے ہیں اور 12 ہفتوں کے دوران پیچیدہ ہوتے جاتے ہیں۔
اگرچہ ہم نے جان بوجھ کر جاوا اسکرپٹ فریم ورکس متعارف نہیں کروائے تاکہ ایک ویب ڈویلپر کے طور پر ابتدائی سکلز پر توجہ دی جا سکے، اس نصاب کو مکمل کرنے کے لیے اگلا اچھا قدم Node.js کے بارے میں سیکھنا ہو گا، جو ایک دوسری ویڈیو کلیکشن "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" کے ذریعے ممکن ہے۔
اگرچہ ہم نے جان بوجھ کر JavaScript فریم ورکس متعارف نہیں کرائے تاکہ ویب ڈویلپر کے بنیادی اسکلز پر توجہ دی جا سکے، اس نصاب کو مکمل کرنے کے لیے اگلا اچھا قدم Node.js کے بارے میں سیکھنا ہو گا جسے "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" کے ویڈیو کلیکشن کے ذریعے سیکھا جا سکتا ہے۔
> ہمارے [Code of Conduct](CODE_OF_CONDUCT.md) اور [Contributing](CONTRIBUTING.md) رہنما خطوط ملاحظہ کریں۔ ہم آپ کی تعمیری فیڈ بیک کا خیرمقدم کرتے ہیں!
> ہمارے [Code of Conduct](CODE_OF_CONDUCT.md) اور [Contributing](CONTRIBUTING.md) رہنما اصول دیکھیں۔ ہم آپ کی تعمیری رائے کا خیرمقدم کرتے ہیں!
## 🧭 آفلائن رسائی
آپ [Docsify](https://docsify.js.org/#/) کا استعمال کرکے اس دستاویز کو آف لائن چلا سکتے ہیں۔ اس ریپو کو فورک کریں، اپنے مقامی کمپیوٹر پر [Docsify انسٹال کریں](https://docsify.js.org/#/quickstart)، اور پھر اس ریپو کے روٹ فولڈر میں `docsify serve` ٹائپ کریں۔ ویب سائٹ آپ کی لوکل ہوسٹ پر پورٹ 3000 پر دستیاب ہو جائے گی: `localhost:3000`۔
## 🧭 آف لائن رسائی
آپ [Docsify](https://docsify.js.org/#/) کا استعمال کرتے ہوئے اس دستاویز کو آف لائن چلا سکتے ہیں۔ اس ریپوزیٹری کو فورک کریں، اپنے مقامی کمپیوٹر پر [Docsify انسٹال کریں](https://docsify.js.org/#/quickstart)، اور پھر اس ریپوزیٹری کے روٹ فولڈر میں `docsify serve` ٹائپ کریں۔ ویب سائٹ آپ کے مقامی ہوسٹ پر پورٹ 3000 پر چلائی جائے گی: `localhost:3000`۔
## 📘 پی ڈی ایف
تمام اسباق کا پی ڈی ایف [یہاں](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) پایا جا سکتا ہے۔
تمام اسباق کا پی ڈی ایف [یہاں](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) مل سکتا ہے۔
## 🎒 دیگر کورسز
ہماری ٹیم دیگر کورسز بھی تیار کرتی ہے! دیکھیں:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### لینگ چین
[![ابتدائیوں کے لئے LangChain4j](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![ابتدائیوں کے لئے LangChain.js](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### ایزور / ایج / MCP / ایجنٹس
[![ابتدائیوں کے لئے AZD](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![ابتدائیوں کے لئے ایج AI](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![ابتدائیوں کے لئے MCP](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![ابتدائیوں کے لئے AI ایجنٹس](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
### Azure / Edge / MCP / Agents
[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### جنریٹو AI سیریز
[![ابتدائیوں کے لئے جنریٹو AI](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![جنریٹو AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![جنریٹو AI (جاوا)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![جنریٹو AI (جاوا اسکرپٹ)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
### Generative AI Series
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### بنیادی تعلیم
[![ابتدائیوں کے لئے مشین لرننگ](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![ابتدائیوں کے لئے ڈیٹا سائنس](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![ابتدائیوں کے لئے AI](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![ابتدائیوں کے لئے سائبر سیکیورٹی](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![ابتدائیوں کے لئے ویب ڈیولپمنٹ](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![ابتدائیوں کے لئے آئی او ٹی](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![ابتدائیوں کے لئے XR ڈیولپمنٹ](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Core Learning
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### کوپائلٹ سیریز
[![AI پیئر پروگرامنگ کے لئے کوپائلٹ](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![C#/.NET کے لئے کوپائلٹ](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![کوپائلٹ ایڈونچر](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
### Copilot Series
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## مدد حاصل کریں
## مدد حاصل کرنا
اگر آپ پھنس جاتے ہیں یا AI ایپس بنانے کے بارے میں کوئی سوال ہے۔ دیگر سیکھنے والوں اور تجربہ کار ڈویلپرز کے ساتھ MCP پر گفتگو میں شامل ہوں۔ یہ ایک معاون کمیونٹی ہے جہاں سوالات خوش آمدید ہیں اور علم آزادانہ طور پر شیئر کیا جاتا ہے۔
اگر آپ پھنس جائیں یا AI ایپس بنانے کے بارے میں کوئی سوال ہو تو شامل ہوں۔ MCP کے بارے میں گفتگو میں دوسرے سیکھنے والے اور تجربہ کار ڈویلپرز کے ساتھ شامل ہوں۔ یہ ایک معاون کمیونٹی ہے جہاں سوالات کا خیرمقدم کیا جاتا ہے اور علم آزادانہ طور پر شیئر کیا جاتا ہے۔
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
اگر آپ کے پاس پروڈکٹ فیڈبیک یا تعمیر کے دوران غلطیاں ہیں تو یہاں جائیں:
اگر آپ کے پاس مصنوعات کا فیڈبیک یا تعمیر کے دوران غلطیاں ہیں تو وزٹ کریں:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## لائسنس
یہ ریپوزیٹری MIT لائسنس کے تحت لائسنس یافتہ ہے۔ مزید معلومات کے لیے [LICENSE](../../LICENSE) فائل دیکھیں۔
یہ ریپوزٹری MIT لائسنس کے تحت لائسنس یافتہ ہے۔ مزید معلومات کے لیے [LICENSE](../../LICENSE) فائل دیکھیں۔
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**انتباہ**:
اس دستاویز کا ترجمہ AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کے ذریعے کیا گیا ہے۔ اگرچہ ہم درستگی کے لیے کوشاں ہیں، براہ کرم نوٹ کریں کہ خودکار ترجمے میں غلطیاں یا بے دقتیاں ہو سکتی ہیں۔ اصلی دستاویز اپنی مادری زبان میں معتبر ماخذ سمجھی جانی چاہیے۔ اہم معلومات کے لیے پیشہ ور انسانی ترجمہ تجویز کیا جاتا ہے۔ اس ترجمہ کے استعمال سے ہونے والی کسی بھی غلط فہمی یا غلط تشریح کی ذمہ داری ہم پر نہیں ہوگی۔
**ڈس کلیمر**:
یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کے ذریعے ترجمہ کی گئی ہے۔ اگرچہ ہم درستگی کے لیے کوشاں ہیں، برائے مہربانی یاد رکھیں کہ خودکار ترجموں میں غلطیاں یا غیر یقینی باتیں ہو سکتی ہیں۔ اصل دستاویز اپنی مادری زبان میں معتبر ماخذ سمجھی جانی چاہیے۔ اہم معلومات کے لیے پیشہ ور انسانی ترجمہ تجویز کیا جاتا ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تعبیر کے لیے ہم ذمہ دار نہیں ہیں۔
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:16:34+00:00",
"translation_date": "2026-02-06T07:43:26+00:00",
"source_file": "AGENTS.md",
"language_code": "zh-CN"
},
@ -516,8 +516,8 @@
"language_code": "zh-CN"
},
"README.md": {
"original_hash": "490c83786552d7fab6390991517bef09",
"translation_date": "2026-01-29T17:44:53+00:00",
"original_hash": "805cd399757df19e886e86f0891a1374",
"translation_date": "2026-02-06T07:39:14+00:00",
"source_file": "README.md",
"language_code": "zh-CN"
},

@ -2,43 +2,43 @@
## 项目概述
这是一个用于教授初学者网页开发基础知识的教育课程库。该课程是由微软云倡导者开发的全面12周课程包含24节动手实践课程涵盖JavaScript、CSS和HTML
这是一个面向初学者的网页开发基础教学课程仓库。该课程由微软云推广者开发是一个为期12周的综合课程包含24个涵盖JavaScript、CSS和HTML的实践课程
### 主要组成部分
### 关键组成部分
- **育内容**24节结构化课程,按项目模块组织
- **学内容**24个结构化课程,按项目模块组织
- **实践项目**生态瓶、打字游戏、浏览器扩展、太空游戏、银行应用、代码编辑器和AI聊天助手
- **互动测验**48个测验每个测验包含3个问题课前/课后评估)
- **多语言支持**通过GitHub Actions实现50多种语言的自动翻译
- **互动测验**48个测验每个包含3个问题课前/课后评估)
- **多语言支持**通过GitHub Actions自动翻译至50多种语言
- **技术栈**HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python用于AI项目
### 架构
- 基于课程的教育资源
- 基于课程结构的教育仓
- 每个课程文件夹包含README、代码示例和解决方案
- 独立项目存放在单独的目录中quiz-app各种课程项目
- 使用GitHub Actions的翻译系统co-op-translator
- 文档通过Docsify提供并可导出为PDF
- 独立项目位于单独目录quiz-app各种课程项目
- 使用GitHub Actionsco-op-translator进行翻译系统
- 通过Docsify托管文档并提供PDF格式
## 设置命令
## 安装命令
此资源库主要用于教育内容的学习。对于具体项目的操作:
本仓库主要用于学习内容浏览。针对具体项目操作:
### 主资源库设置
### 主仓库安装
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### 测验应用设置Vue 3 + Vite
### 测验应用安装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
npm run dev # 启动开发服务器
npm run build # 构建生产环境
npm run lint # 运行 ESLint
```
### 银行项目APINode.js + Express
@ -46,9 +46,9 @@ npm run lint # Run ESLint
```bash
cd 7-bank-project/api
npm install
npm start # Start API server
npm run lint # Run ESLint
npm run format # Format with Prettier
npm start # 启动 API 服务器
npm run lint # 运行 ESLint
npm run format # 使用 Prettier 格式化
```
### 浏览器扩展项目
@ -56,7 +56,7 @@ npm run format # Format with Prettier
```bash
cd 5-browser-extension/solution
npm install
# Follow browser-specific extension loading instructions
# 遵循浏览器特定的扩展加载说明
```
### 太空游戏项目
@ -64,7 +64,7 @@ npm install
```bash
cd 6-space-game/solution
npm install
# Open index.html in browser or use Live Server
# 在浏览器中打开 index.html 或使用实时服务器
```
### 聊天项目Python后端
@ -72,37 +72,37 @@ npm install
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Set GITHUB_TOKEN environment variable
# 设置 GITHUB_TOKEN 环境变量
python api.py
```
## 开发工作流程
### 对于内容贡献者
### 内容贡献者指南
1. **Fork资源库**到你的GitHub账户
2. **克隆你的Fork**到本地
3. **创建新分支**以进行更改
1. **Fork 仓库** 到你的GitHub账户
2. **克隆你的fork**到本地
3. **新建分支**用于变更
4. 修改课程内容或代码示例
5. 在相关项目目录测试代码更改
6. 按照贡献指南提交拉取请求
5. 在相关项目目录测试代码更改
6. 提交PR并遵循贡献指南
### 对于学习者
### 学习者指导
1. Fork或克隆资源
2. 按顺序浏览课程目录
3. 阅读每课程的README文件
4. 在https://ff-quizzes.netlify.app/web/完成课前测验
5. 在课程文件夹中完成代码示例
1. Fork或克隆
2. 按顺序进入课程目录
3. 阅读每课程的README文件
4. 在 https://ff-quizzes.netlify.app/web/ 完成课前测验
5. 按课件操作代码示例
6. 完成作业和挑战
7. 进行课后测验
7. 参加课后测验
### 实时开发
- **文档**根目录运行`docsify serve`端口3000
- **测验应用**在quiz-app目录运行`npm run dev`
- **项目**使用VS Code的Live Server扩展运行HTML项目
- **API项目**在相关API目录运行`npm start`
- **文档**:根目录运行 `docsify serve` 端口3000
- **测验应用**在quiz-app目录运行 `npm run dev`
- **项目**使用VS Code Live Server扩展启动HTML项目
- **API项目**运行各自API目录中的 `npm start`
## 测试说明
@ -110,85 +110,85 @@ python api.py
```bash
cd quiz-app
npm run lint # Check for code style issues
npm run build # Verify build succeeds
npm run lint # 检查代码风格问题
npm run build # 验证构建是否成功
```
### 银行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 # 检查代码风格问题
node server.js # 验证服务器启动无误
```
### 一般测试方法
### 常规测试方法
- 这是一个教育资源库,没有全面的自动化测试
- 手动测试重点
- 代码示例运行无错
- 文档中的链接正常工作
- 项目构建成功完成
- 示例遵循最佳实践
- 本仓库为教育用途,无全面自动化测试
- 手动测试侧重于
- 代码示例能正常运行无
- 文档中的链接有效
- 项目构建成功
- 示例符合最佳实践
### 提交前检查
- 在含package.json目录运行`npm run lint`
- 验证Markdown链接是否有效
- 在含package.json目录运行 `npm run lint`
- 验证Markdown链接有效
- 在浏览器或Node.js中测试代码示例
- 确保翻译保持正确结构
- 确认翻译结构完整
## 代码风格指南
### JavaScript
- 使用现代ES6+语法
- 遵循项目中提供标准ESLint配置
- 使用有意义的变量和函数名称以便于学习
- 添加注释解释概念以帮助学习者
- 在配置了Prettier的地方进行格式化
- 遵循项目中的ESLint标准配置
- 变量和函数命名应清晰易懂,便于教学
- 添加注释解释概念
- 使用配置好的Prettier进行格式化
### HTML/CSS
- 使用语义化HTML5元素
- 语义化HTML5元素
- 响应式设计原则
- 清晰的类命名规范
- 添加注释解释CSS技术以帮助学习者
- CSS注释帮助学习者理解技术细节
### Python
- 遵循PEP 8风格指南
- 提供清晰的教育代码示例
- 在有帮助的地方添加类型提示
- 遵循PEP 8规范
- 清晰易懂的教学代码示例
- 在适当位置添加类型提示
### Markdown文档
- 清晰的标题层次结构
- 带语言说明的代码块
- 链接到额外资源
- 在`images/`目录中提供截图和图片
- 为图片添加辅助文本以提高可访问性
- 结构清晰的标题层级
- 指定语言的代码块
- 提供额外资源链接
- 在 `images/` 目录中包含截图和图片
- 图片提供alt文本以增强无障碍访问
### 文件组织
- 课程按顺序编号1-getting-started-lessons, 2-js-basics等)
- 每个项目有`solution/`目录,通常还有`start/`或`your-work/`目录
- 图片存储在课程特定的`images/`文件夹中
- 翻译存储在`translations/{language-code}/`结构中
- 课程按序号命名1-getting-started-lessons2-js-basics 等)
- 每个项目包含 `solution/` ,通常还有 `start/``your-work/` 目录
- 图片存放在对应课程的 `images/` 文件夹
- 翻译文件位于 `translations/{language-code}/` 结构内
## 构建部署
## 构建部署
### 测验应用部署Azure Static Web Apps
### 测验应用部署Azure 静态网页应用
测验应用已配置为Azure Static Web Apps部署:
quiz-app 配置用于 Azure 静态网页应用部署:
```bash
cd quiz-app
npm run build # Creates dist/ folder
# Deploys via GitHub Actions workflow on push to main
npm run build # 创建 dist/ 文件夹
# 在推送到 main 时通过 GitHub Actions 工作流程进行部署
```
Azure Static Web Apps配置:
Azure静态网页应用配置:
- **应用位置**`/quiz-app`
- **输出位置**`dist`
- **工作流**`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
@ -196,87 +196,87 @@ Azure Static Web Apps配置
### 文档PDF生成
```bash
npm install # Install docsify-to-pdf
npm run convert # Generate PDF from docs
npm install # 安装 docsify-to-pdf
npm run convert # 从 docs 生成 PDF
```
### Docsify文档
```bash
npm install -g docsify-cli # Install Docsify globally
docsify serve # Serve on localhost:3000
npm install -g docsify-cli # 全局安装 Docsify
docsify serve # 在 localhost:3000 上提供服务
```
### 项目特定构建
### 项目构建
每个项目目录可能有自己的构建过程:
各项目目录可能有独立构建流程:
- Vue项目`npm run build`生成生产包
- 静态项目:无需构建步骤,直接提供文件
- 静态项目:无构建步骤,直接服务文件
## 拉取请求指南
## Pull Request指南
### 标题格式
使用清晰、描述性的标题指明更改的区域
- `[Quiz-app] 为课程X添加新测验`
- `[Lesson-3] 修复生态瓶项目中的拼写错误`
- `[Translation] 为课程5添加西班牙语翻译`
- `[Docs] 更新设置说明`
使用清晰描述变更区域的标题
- `[Quiz-app] 增第X课测验`
- `[Lesson-3] 修正生态瓶项目中的错字`
- `[Translation] 为第5课添加西班牙语翻译`
- `[Docs] 更新安装说明`
### 必检查
### 必检查
提交PR前:
提交PR前
1. **代码质量**
- 在受影响的项目目录运行`npm run lint`
- 在相关项目中运行 `npm run lint`
- 修复所有lint错误和警告
2. **构建验证**
- 如果适用,运行`npm run build`
- 确保没有构建错误
- 如有,运行 `npm run build`
- 确保构建错误
3. **链接验**
3. **链接验**
- 测试所有Markdown链接
- 验证图片引用是否正常工作
- 验证图片引用正常
4. **内容审查**
- 校对拼写和语法
- 确保代码示例正确且具有教育意义
- 验证翻译保持原意
- 拼写和语法检查
- 确认代码示例正确且具教学意义
- 翻译保持原意准确
### 贡献要求
- 同意微软CLA首次PR时自动检查
- 遵[微软开源行为准则](https://opensource.microsoft.com/codeofconduct/)
- 参阅[CONTRIBUTING.md](./CONTRIBUTING.md)获取详细指南
- 在PR描述中引用问题编号如果适用
- 同意微软CLA自动检查首次PR时
- 遵[微软开源行为准则](https://opensource.microsoft.com/codeofconduct/)
- 详见 [CONTRIBUTING.md](./CONTRIBUTING.md)
- 若有PR描述中引用关联Issue号
### 审核流程
- PR由维护者和社区审核
- 优先考虑教清晰度
- 维护者与社区共同审核PR
- 优先考虑教清晰度
- 代码示例应遵循当前最佳实践
- 翻译需审核准确性和文化适应性
- 翻译需确保准确和文化适应性
## 翻译系统
### 自动翻译
- 使用GitHub Actions和co-op-translator工作流
- 自动翻译为50多种语言
- 自动支持50多种语言翻译
- 源文件位于主目录
- 翻译文件存储在`translations/{language-code}/`目录中
- 翻译文件存放于 `translations/{language-code}/`
### 添加手动翻译改进
### 手动翻译改进
1. 在`translations/{language-code}/`中找到文件
2. 在保持结构的同时进行改进
3. 确保代码示例仍然可用
4. 测试任何本地化测验内容
1. 在 `translations/{language-code}/` 找到对应文件
2. 改进时保持文件结构完整
3. 确保代码示例保持可用
4. 测试本地化测验内容
### 翻译元数据
翻译文件包含元数据头
翻译文件带有元数据头部
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,67 +289,67 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## 调试故障排除
## 调试故障排除
### 常见问题
**测验应用无法启动**
- 检查Node.js版本推荐v14+
- 删除`node_modules`和`package-lock.json`,重新运行`npm install`
- 检查端口冲突(默认:Vite使用端口5173
**测验应用启动失败**
- 检查Node.js版本推荐v14以上
- 删除 `node_modules` `package-lock.json`,重新运行 `npm install`
- 检查端口冲突Vite默认使用5173端口
**API服务器无法启动**
- 验证Node.js版本是否满足最低要求node >=10
- 检查端口是否已被占用
- 确保所有依赖项已通过`npm install`安装
- 验证Node.js版本满足最低要求node >=10
- 端口是否已被占用
- 确保所有依赖已安装npm install
**浏览器扩展无法加载**
- 验证manifest.json格式是否正确
- 检查浏览器控制台中的错误
- 按照浏览器特定的扩展安装说明操作
- 确认manifest.json格式正确
- 浏览器控制台检查错误信息
- 遵循浏览器特定的扩展安装说明
**Python聊天项目问题**
- 确保安装OpenAI包`pip install openai`
- 验证是否设置了GITHUB_TOKEN环境变量
- 确保安装OpenAI包`pip install openai`
- 环境变量GITHUB_TOKEN已设置
- 检查GitHub Models访问权限
**Docsify无法提供文档**
**Docsify无法提供文档服务**
- 全局安装docsify-cli`npm install -g docsify-cli`
- 从资源库根目录运行
- 检查`docs/_sidebar.md`是否存在
- 在仓库根目录运行
- 确认 `docs/_sidebar.md` 存在
### 开发环境提示
### 开发环境建议
- 对于HTML项目使用VS Code的Live Server扩展
- 安装ESLint和Prettier扩展以保持一致的格式
- 使用浏览器开发工具调试JavaScript
- 对于Vue项目安装Vue DevTools浏览器扩展
- 使用VS Code配合Live Server扩展进行HTML项目开发
- 安装ESLint和Prettier扩展保持代码格式统一
- 使用浏览器开发工具调试JavaScript
- Vue项目建议安装Vue DevTools浏览器扩展
### 性能考虑
- 大量翻译文件50多种语言导致完整克隆体积较大
- 如果只处理内容,请使用浅克隆:`git clone --depth 1`
- 在处理英文内容时排除翻译文件的搜索
- 第一次运行构建过程可能较慢npm install, Vite build
- 由于50多种语言的翻译文件较多完整克隆体积较大
- 仅操作内容时建议浅克隆:`git clone --depth 1`
- 工作时排除翻译文件的搜索以提升效率
- 初次运行npm install和Vite构建速度较慢
## 安全注意事项
### 环境变量
- API密钥绝不能提交到资源
- 使用`.env`文件(已在`.gitignore`中
- 在项目README中记录所需的环境变量
- API密钥绝不可提交至代码仓
- 使用 `.env` 文件(已添加至 `.gitignore`
- 相关环境变量在项目README中说明
### Python项目
- 使用虚拟环境:`python -m venv venv`
- 保持依赖更新
- GitHub令牌应具有最低必要权限
- 保持依赖更新
- GitHub令牌需最低权限原则
### GitHub Models访问
- GitHub Models需要个人访问令牌PAT
- 令牌存储为环境变量
- 需要个人访问令牌PAT
- 令牌存储为环境变量
- 切勿提交令牌或凭据
## 附加说明
@ -358,49 +358,51 @@ CO_OP_TRANSLATOR_METADATA:
- 完全的网页开发初学者
- 学生和自学者
- 在课堂使用课程的教师
- 内容设计注重可访问性和逐步技能提升
- 在课堂使用课程的教师
- 内容设计注重无障碍和循序渐进
### 教育理念
- 基于项目的学习方法
- 频繁的知识检查(测验)
- 项目驱动学习
- 经常性知识检测(测验)
- 动手编码练习
- 真实世界应用
- 在框架之前专注于基础知识
- 真实世界应用
- 强调基础知识先于框架
### 资源库维护
### 库维护
- 活跃的学习者贡献者社区
- 定期更新依赖和内容
- 活跃的学习者贡献者社区
- 定期更新依赖和内容
- 维护者监控问题和讨论
- 通过GitHub Actions自动更新翻译
### 相关资源
- [微软学习模块](https://docs.microsoft.com/learn/)
- [Microsoft Learn模块](https://docs.microsoft.com/learn/)
- [学生中心资源](https://docs.microsoft.com/learn/student-hub/)
- 推荐学习者使用[GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- 其他课程:生成式AI、数据科学、机器学习、物联网课程可用
- 还有生成式AI、数据科学、机器学习、物联网课程
### 处理具体项目
### 具体项目操作
有关单个项目的详细说明请参阅以下README文件
详细说明请参阅以下README文件
- `quiz-app/README.md` - Vue 3测验应用
- `7-bank-project/README.md` - 带证的银行应用
- `7-bank-project/README.md` - 带身份验证的银行应用
- `5-browser-extension/README.md` - 浏览器扩展开发
- `6-space-game/README.md` - 基于Canvas的游戏开发
- `9-chat-project/README.md` - AI聊天助手项目
### Monorepo结构
虽然不是传统的Monorepo但此资源库包含多个独立项目:
- 每节课程都是自包含的
- 项目之间不共享依赖项
- 可单独处理项目而不影响其他项目
- 克隆整个资源库以体验完整课程
本仓库不是传统monorepo包含多个独立项目:
- 每个课程独立完整
- 项目依赖不共享
- 可单独开发,不影响其他项目
- 克隆整个仓库可体验完整课程体系
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免责声明**
本文档使用AI翻译服务 [Co-op Translator](https://github.com/Azure/co-op-translator) 进行翻译。尽管我们努力确保翻译的准确性,但请注意,自动翻译可能包含错误或不准确之处。原始语言的文档应被视为权威来源。对于关键信息,建议使用专业人工翻译。我们不对因使用此翻译而产生的任何误解或误读承担责任。
本文件使用 AI 翻译服务 [Co-op Translator](https://github.com/Azure/co-op-translator) 进行翻译。尽管我们努力确保准确性,但请注意自动翻译可能存在错误或不准确之处。原始文件的母语版本应被视为权威来源。对于重要信息,建议使用专业人工翻译。我们不对因使用本翻译而产生的任何误解或误释承担责任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -10,69 +10,70 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Web Development for Beginners - 课程纲
# Web Development for Beginners - 课程
通过微软云倡导者的12周全面课程学习网页开发的基础知识。24堂课通过实践项目深入探讨JavaScript、CSS和HTML项目包括生态瓶、浏览器扩展和太空游戏。参与测验、讨论和实践作业。通过我们高效的基于项目的教学法提升技能并优化知识吸收。今天开始你的编码之旅
通过微软云倡导者提供的为期12周的综合课程学习网页开发基础。24节课详细讲解JavaScript、CSS和HTML涵盖诸如生态瓶、浏览器扩展和太空游戏等动手项目。配合测验、讨论和实践作业。采用行之有效的项目驱动教学法提升技能并优化知识保留。今天就开始您的编码之旅吧
加入 Azure AI Foundry Discord 社区
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
按照以下步骤开始使用这些资源:
1. **Fork 仓库**: 点击 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **克隆仓库**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**加入 Azure AI Foundry Discord结识专家和开发者伙伴**](https://discord.com/invite/ByRwuEEgH4)
1. **派生仓库**点击 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **克隆仓库** `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**加入 Azure AI Foundry Discord结识专家和同行开发者**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 多语言支持
#### 通过 GitHub Action 支持(自动且实时更新)
#### 通过 GitHub Action 支持(自动且始终保持最新)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[阿拉伯语](../ar/README.md) | [孟加拉语](../bn/README.md) | [保加利亚语](../bg/README.md) | [缅甸语](../my/README.md) | [中文(简体)](./README.md) | [中文(繁体,香港)](../zh-HK/README.md) | [中文(繁体,澳门)](../zh-MO/README.md) | [中文(繁体,台湾)](../zh-TW/README.md) | [克罗地亚语](../hr/README.md) | [捷克语](../cs/README.md) | [丹麦语](../da/README.md) | [荷兰语](../nl/README.md) | [爱沙尼亚语](../et/README.md) | [芬兰语](../fi/README.md) | [法语](../fr/README.md) | [德语](../de/README.md) | [希腊语](../el/README.md) | [希伯来语](../he/README.md) | [印地语](../hi/README.md) | [匈牙利语](../hu/README.md) | [印度尼西亚语](../id/README.md) | [意大利语](../it/README.md) | [日语](../ja/README.md) | [卡纳达语](../kn/README.md) | [韩语](../ko/README.md) | [立陶宛语](../lt/README.md) | [马来语](../ms/README.md) | [马拉雅拉姆语](../ml/README.md) | [马拉地语](../mr/README.md) | [尼泊尔语](../ne/README.md) | [尼日利亚皮钦语](../pcm/README.md) | [挪威语](../no/README.md) | [波斯语(法尔西语)](../fa/README.md) | [波兰语](../pl/README.md) | [巴西葡萄牙语](../pt-BR/README.md) | [葡萄牙语(葡萄牙)](../pt-PT/README.md) | [旁遮普语(古鲁穆奇文)](../pa/README.md) | [罗马尼亚语](../ro/README.md) | [俄语](../ru/README.md) | [塞尔维亚语(西里尔文)](../sr/README.md) | [斯洛伐克语](../sk/README.md) | [斯洛文尼亚语](../sl/README.md) | [西班牙语](../es/README.md) | [斯瓦希里语](../sw/README.md) | [瑞典语](../sv/README.md) | [塔加洛语(菲律宾语)](../tl/README.md) | [泰米尔语](../ta/README.md) | [泰卢固语](../te/README.md) | [泰语](../th/README.md) | [土耳其语](../tr/README.md) | [乌克兰语](../uk/README.md) | [乌尔都语](../ur/README.md) | [越南语](../vi/README.md)
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](./README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **想要本地克隆?**
> 此仓库包含50多种语言的翻译显著增加下载体积。若要排除翻译文件克隆,请使用稀疏检出:
> 本仓库包含50多种语言翻译显著增加了下载大小。要不带翻译克隆,请使用稀疏检出:
> ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> 这让你以更快速度下载并获取完成课程所需的全部内容
> 这让你获得完成课程所需的一切,同时大幅提高下载速度
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**如果希望支持更多翻译语言,请查看[此处](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**如果您希望支持更多翻译语言,请参见[这里](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _你是学生吗_
访问 [**学生中心页面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon),这里有初学者资源、学生包,甚至还有获取免费证书凭证的方法。这个页面是你想要收藏并定期查看的,因为我们每月都会更换内容
访问[**学生中心页面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon),这里有初学者资源、学生包以及获得免费证书券的途径。建议收藏此页并定期查看,新内容每月更新
### 📣 公告 - 新增 GitHub Copilot Agent 模式挑战任务
### 📣 公告 - 新增 GitHub Copilot Agent 模式挑战!
新增了挑战任务大部分章节都有“GitHub Copilot Agent Challenge 🚀”标识。这是一个使用 GitHub Copilot 及 Agent 模式完成的新挑战。如果你尚未使用过 Agent 模式,它不仅可以生成文本,还可创建和编辑文件、运行命令等。
新增挑战查找大多数章节中的“GitHub Copilot Agent Challenge 🚀”。这是一个使用 GitHub Copilot 和 Agent 模式完成的新挑战。如果你之前没用过 Agent 模式,它不仅能生成文本,还能创建和编辑文件、运行命令等。
### 📣 公告 - _新增生成式 AI 项目_
### 📣 公告 - _使用生成式 AI 的新项目_
刚刚添加了新的 AI 助手项目,查看这个[项目](./9-chat-project/README.md)
新增 AI 助手项目,查看该[项目](./9-chat-project/README.md)
### 📣 公告 - _全新 JavaScript 生成式 AI 课程上线_
### 📣 公告 - _JavaScript 生成式 AI 课程_ 正式发布
不要错过我们的新生成式 AI 课程!
访问 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 开始学习
访问 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 即可开始!
![Background](../../translated_images/zh-CN/background.148a8d43afde5730.webp)
- 课程覆盖基础到检索增强生成RAG
- 使用生成式AI和我们的配套应用与历史人物互动。
- 趣味且引人入胜的叙事,你将穿越时空
- 课程涵盖基础到 RAG
- 使用 GenAI 和配套应用与历史人物互动。
- 有趣且引人入胜的叙事,你将进行时光旅行
![character](../../translated_images/zh-CN/character.5c0dd8e067ffd693.webp)
每节课都包含一项作业、知识检查和挑战,引导你学习以下主题:
- 提示设计与提示工程
每节课包含作业、知识检测和挑战,涵盖主题如:
- 提示和提示工程
- 文本和图像应用生成
- 搜索应用
@ -82,132 +83,135 @@
## 🌱 入门指南
> **教师们**,我们提供[一些建议](for-teachers.md)关于如何使用这套课程。非常欢迎您在[讨论区](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)反馈!
> **教师们**,我们提供了[一些建议](for-teachers.md)指导如何使用此课程。欢迎您在[讨论区](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)留下反馈!
**[学习者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**,每节课程开始请先做预讲座测验,随后阅读讲义资料,完成各项活动,并用课后测验检验理解情况
**[学习者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**,每节课从预习测验开始,随后学习讲义材料,完成各项活动,并通过课后测验检验理解
了提升学习体验,建议与同伴合作完成项目!鼓励在我们的[讨论区](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)交流,我们的版主团队也会随时回答你的疑问
提升学习体验,建议您与同伴共同完成项目!鼓励在我们的[讨论区](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)发起讨论,我们的版主团队将帮助回答您的问题
想要深入学习,我们强烈推荐探索[Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)获取额外学习资料。
此外,强烈推荐探索[Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon),获取更多学习资料。
### 📋 搭建你的开发环境
### 📋 配置您的环境
本课程含有预配置的开发环境!你可以选择在[Codespace](https://github.com/features/codespaces/)(浏览器运行,无需安装)中运行,或在本地电脑上使用文本编辑器如[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)。
课程自带开发环境!您可以选择在[Codespace](https://github.com/features/codespaces/)基于浏览器,无需安装)中运行课程,或在电脑本地使用如[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)的文本编辑器运行
#### 创建的仓库
了方便保存你的作业,建议你创建该仓库的个人副本。点击页面顶部的 **Use this template** 按钮,这会在你的 GitHub 账户下创建一个全新仓库,包含课程内容副本
#### 创建的仓库
方便保存您的作业,建议您创建仓库副本。点击页面顶部的 **Use this template** 按钮,将课程复制到您的 GitHub 账户中
操作步骤:
1. **Fork 仓库**点击本页右上角的“Fork”按钮。
1. **派生仓库**:点击本页右上角的 “Fork” 按钮。
2. **克隆仓库** `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### 在 Codespace 中运行课程
你创建的仓库副本中,点击 **Code** 按钮并选择 **Open with Codespaces**。这将为你创建一个可编辑的 Codespace 环境
您创建的仓库副本中,点击 **Code** 按钮,选择 **Open with Codespaces**。系统将为您创建新的 Codespace 以便工作
![Codespace](../../translated_images/zh-CN/createcodespace.0238bbf4d7a8d955.webp)
#### 在本地电脑运行课程
若要在本地电脑运行此课程,你需要文本编辑器、浏览器及命令行工具。我们的第一课,[编程语言与工具简介](../../1-getting-started-lessons/1-intro-to-programming-languages),会引导你了解并选择适合的工具。
在本地运行课程,您需要文本编辑器、浏览器和命令行工具。第一课[编程语言和开发工具介绍](../../1-getting-started-lessons/1-intro-to-programming-languages)将引导您选择适合您的工具。
推荐使用[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)作为编辑器,它内置了[终端](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。您可以在此下载 Visual Studio Code [链接](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)。
推荐使用[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)作为编辑器,它内置了[终端](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。你可以在[这里](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)下载。
1. 克隆仓库到本地电脑。点击 **Code** 按钮并复制 URL
1. 将仓库克隆到电脑。点击 **Code** 按钮复制网址
[CodeSpace](./images/createcodespace.png)
然后,在[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)打开[终端](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon),运行以下命令,将`<your-repository-url>`替换为您刚刚复制的URL
然后,在[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)打开[终端](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)并运行以下命令,将 `<your-repository-url>` 替换为你刚才复制的 URL
```bash
git clone <your-repository-url>
```
2. 在Visual Studio Code中打开文件夹。您可以通过点击**文件** > **打开文件夹**,然后选择您刚刚克隆的文件夹来完成此操作
2. 在 Visual Studio Code 中打开文件夹。你可以通过点击 **文件** > **打开文件夹** 并选择刚刚克隆的文件夹来完成
> 推荐的 Visual Studio Code 扩展程序
> 推荐的 Visual Studio Code 扩展:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 在 Visual Studio Code 内部预览 HTML 页面
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 帮助更快地编写代码
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 在 Visual Studio Code 预览 HTML 页面
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 帮助更快地编写代码
## 📂 每课内容包括:
- 可选的手绘笔记
- 可选的速写笔记
- 可选的补充视频
- 课前热身测验
- 书面课程
- 针对项目型课程,逐步指导如何构建项目
- 知识检
- 书面课程内容
- 项目式课程包括构建项目的分步骤指南
- 知识检
- 挑战任务
- 补充阅读
- 补充阅读材料
- 课后测验 [post-lesson quiz](https://ff-quizzes.netlify.app/web/)
> **关于测验的说明**:所有测验都包含在 Quiz-app 文件夹中共48个测验每个测验包含三道题。它们可在[这里](https://ff-quizzes.netlify.app/web/)访问,测验应用可以本地运行或部署到 Azure请参见 `quiz-app` 文件夹中的说明
> **关于测验的说明**:所有测验都包含在 Quiz-app 文件夹中共48个测验每个测验三道题。它们可在 [这里](https://ff-quizzes.netlify.app/web/) 使用,测验应用可以本地运行或部署到 Azure请按照 `quiz-app` 文件夹中的说明操作
## 🗃️ 课程列表
| | 项目名称 | 授概念 | 学习目标 | 关联课程 | 作者 |
| :-: | :-------------------------------------------------: | :--------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------: | :-------------------: |
| 01 | 入门篇 | 编程介绍与工具基础 | 了解大多数编程语言的基本原理以及帮助专业开发者完成工作的软件工具 | [编程语言与工具简介](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | 入门 | GitHub基础团队协作 | 学习如何在项目中使用GitHub以及如何与他人协作管理代码库 | [GitHub简介](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | 入门 | 无障碍访问 | 了解网页无障碍访问的基础知识 | [无障碍基础](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS基础 | JavaScript数据类型 | JavaScript数据类型基础 | [数据类型](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS基础 | 函数与方法 | 了解函数与方法以管理应用程序的逻辑流程 | [函数与方法](./2-js-basics/2-functions-methods/README.md) | Jasmine和Christopher |
| 06 | JS基础 | 使用JS进行决策 | 学习如何使用决策方法在代码中创建条件 | [做出决策](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS基础 | 数组与循环 | 使用JavaScript中的数组和循环处理数据 | [数组与循环](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [生态瓶](./3-terrarium/solution/README.md) | HTML实战 | 构建用于创建线上生态瓶的HTML专注于页面布局 | [HTML简介](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [生态瓶](./3-terrarium/solution/README.md) | CSS实战 | 构建用于为线上生态瓶添加样式的CSS专注于CSS基础及页面响应式 | [CSS简介](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [生态瓶](./3-terrarium/solution/README.md) | JavaScript闭包与DOM操作 | 编写JavaScript使生态瓶具备拖放功能重点讲解闭包与DOM操作 | [JavaScript闭包与DOM操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [打字游戏](./4-typing-game/solution/README.md) | 制作打字游戏 | 学习如何使用键盘事件驱动JavaScript应用逻辑 | [事件驱动编程](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [绿色浏览器扩展](./5-browser-extension/solution/README.md) | 浏览器工作原理 | 了解浏览器工作原理、历史及搭建浏览器扩展的基础结构 | [关于浏览器](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [绿色浏览器扩展](./5-browser-extension/solution/README.md) | 构建表单、调用API和使用本地存储变量 | 构建浏览器扩展中的JavaScript部分实现API调用及使用本地存储的变量 | [API、表单及本地存储](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [绿色浏览器扩展](./5-browser-extension/solution/README.md) | 浏览器后台进程与网页性能优化 | 利用浏览器后台进程管理扩展图标;学习网页性能及优化方法 | [后台任务与性能](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [太空游戏](./6-space-game/solution/README.md) | 使用JavaScript进行高级游戏开发 | 学习使用类与组合继承及发布/订阅模式,为构建游戏做准备 | [高级游戏开发入门](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [太空游戏](./6-space-game/solution/README.md) | 画布绘图 | 了解用于绘制屏幕元素的Canvas API | [画布绘图](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [太空游戏](./6-space-game/solution/README.md) | 在屏幕上移动元素 | 了解如何使用笛卡尔坐标与Canvas API使元素获得运动 | [移动元素](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [太空游戏](./6-space-game/solution/README.md) | 碰撞检测 | 使元素碰撞后产生反应,使用按键触发并提供冷却功能以确保游戏性能 | [碰撞检测](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [太空游戏](./6-space-game/solution/README.md) | 计分 | 根据游戏状态和表现执行数学计算 | [计分](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [太空游戏](./6-space-game/solution/README.md) | 结束与重新开始游戏 | 了解如何结束与重新开始游戏,包括资源清理和变量重置 | [结束条件](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [银行应用](./7-bank-project/solution/README.md) | Web应用中的HTML模板和路由 | 学习如何使用路由和HTML模板创建多页网站的框架 | [HTML模板与路由](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [银行应用](./7-bank-project/solution/README.md) | 构建登录及注册表单 | 学习如何构建表单及处理表单验证 | [表单](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [银行应用](./7-bank-project/solution/README.md) | 数据获取与使用方法 | 了解数据在应用中的流入流出,如何获取、存储与处理数据 | [数据](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [银行应用](./7-bank-project/solution/README.md) | 状态管理概念 | 学习应用如何保持状态及如何编程管理状态 | [状态管理](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [浏览器/VScode代码](../../8-code-editor) | 使用VScode | 学习如何使用代码编辑器| [使用VScode代码编辑器](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI 助手](./9-chat-project/README.md) | 使用人工智能 | 学习如何构建自己的AI助手 | [AI助手项目](./9-chat-project/README.md) | Chris |
| | 项目名称 | 授概念 | 学习目标 | 关联课程 | 作者 |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | 入门 | 编程介绍和工具基础 | 学习大多数编程语言的基本原理及帮助专业开发者工作的软件工具 | [编程语言和工具介绍](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | 入门 | GitHub基础包括团队协作 | 如何在项目中使用 GitHub如何与他人协作代码库 | [GitHub入门](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | 入门 | 无障碍可访问性 | 学习网络无障碍的基础 | [无障碍基础](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS基础 | JavaScript 数据类型 | JavaScript 数据类型基础 | [数据类型](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS基础 | 函数与方法 | 学习函数和方法管理应用程序的逻辑流 | [函数和方法](./2-js-basics/2-functions-methods/README.md) | Jasmine Christopher |
| 06 | JS基础 | 使用 JS 做决策 | 学习如何通过条件语句在代码中实现决策逻辑 | [做出决策](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS基础 | 数组和循环 | 使用 JavaScript 中的数组和循环处理数据 | [数组和循环](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML 实践 | 构建 HTML 创建在线植物缸,重点在布局设计 | [HTML入门](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS 实践 | 构建 CSS 样式化在线植物缸,重点包括基础 CSS 和响应式页面 | [CSS入门](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript 闭包、DOM 操作 | 编写 JavaScript 实现拖放界面,重点闭包和 DOM 操作 | [JavaScript 闭包与 DOM 操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [打字游戏](./4-typing-game/solution/README.md) | 建造打字游戏 | 学习如何使用键盘事件驱动 JavaScript 应用逻辑 | [事件驱动编程](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [绿色浏览器扩展](./5-browser-extension/solution/README.md) | 浏览器工作原理 | 学习浏览器工作原理、历史以及如何搭建浏览器扩展的初步元素 | [关于浏览器](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [绿色浏览器扩展](./5-browser-extension/solution/README.md) | 构建表单、调用 API 及在本地存储变量 | 构建浏览器扩展的 JavaScript 元素以调用 API 并使用本地存储变量 | [API、表单与本地存储](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [绿色浏览器扩展](./5-browser-extension/solution/README.md) | 浏览器中的后台进程,网络性能 | 使用浏览器后台进程管理扩展图标;学习网络性能及优化方法 | [后台任务与性能](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [太空游戏](./6-space-game/solution/README.md) | 更高级的 JavaScript 游戏开发 | 学习类和组合的继承及发布/订阅模式,为构建游戏做准备 | [高级游戏开发介绍](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [太空游戏](./6-space-game/solution/README.md) | 画布绘制 | 了解 Canvas API用于向屏幕绘制元素 | [画布绘制](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [太空游戏](./6-space-game/solution/README.md) | 移动屏幕上的元素 | 探索如何通过笛卡尔坐标和 Canvas API 让元素获得运动 | [移动元素](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [太空游戏](./6-space-game/solution/README.md) | 碰撞检测 | 让元素在按键时碰撞并相互反应,并提供冷却功能确保游戏性能 | [碰撞检测](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [太空游戏](./6-space-game/solution/README.md) | 计分 | 根据游戏状态和表现进行数学计算 | [计分](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [太空游戏](./6-space-game/solution/README.md) | 结束及重新开始游戏 | 学习如何结束游戏和重启游戏,包括资源清理和变量重置 | [结束条件](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [银行应用](./7-bank-project/solution/README.md) | Web 应用中的 HTML 模板与路由 | 学习如何使用路由和 HTML 模板创建多页面网站架构 | [HTML 模板与路由](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [银行应用](./7-bank-project/solution/README.md) | 构建登录和注册表单 | 学习构建表单和处理验证逻辑 | [表单](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [银行应用](./7-bank-project/solution/README.md) | 获取和使用数据的方法 | 了解数据在应用中的流动,如何抓取、存储及处理 | [数据](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [银行应用](./7-bank-project/solution/README.md) | 状态管理概念 | 了解应用如何保留状态及如何通过编程管理状态 | [状态管理](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | 使用 VScode | 学习如何使用代码编辑器| [使用 VScode 代码编辑器](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI 助手](./9-chat-project/README.md) | 使用 AI | 学习如何构建自己的 AI 助手 | [AI 助手项目](./9-chat-project/README.md) | Chris |
## 🏫 教学法
我们的课程设计基于两个关键教学原则:
我们的课程设计基于两个关键教学原则:
* 项目驱动学习
* 频繁测验
本课程教授JavaScript、HTML和CSS的基础知识以及现今网页开发者使用的最新工具和技术。学生将有机会通过构建打字游戏、虚拟生态瓶、环保浏览器扩展、太空入侵者风格游戏和企业银行应用来获得实践经验。课程结束时学生将掌握扎实的网页开发基础
该课程教授 JavaScript、HTML 和 CSS 的基础知识,以及当今网络开发者使用的最新工具和技术。学生将有机会通过构建打字游戏、虚拟植物缸、环保浏览器扩展、太空入侵风格游戏和面向企业的银行应用,获得实际操作经验。课程结束时,学生将拥有扎实的网络开发理解
> 🎓 您可以将本课程的前几节作为Microsoft Learn上的[学习路径](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)
> 🎓 你可以作为 Microsoft Learn 上的 [学习路径](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)来学习课程中的前几节
通过确保内容与项目相结合,过程对学生更有吸引力有助于增强概念的记忆。我们还编写了几个JavaScript基础入门课程结合了 “[JavaScript入门系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)” 视频教程,其中部分作者参与了本课程的编写。
通过确保内容与项目相结合,过程对学生更加有趣,也将增强对概念的记忆。我们还编写了若干 JavaScript 基础入门课程,搭配来自 “[JavaScript 初学者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)” 视频教程集的视频,其中部分作者参与了本课程的编写。
此外课前的低压力测验能设定学生学习该主题的目的课后的第二次测验则帮助进一步巩固记忆。该课程设计灵活且有趣可以整体学习也可以部分学习。项目从简单开始至12周周期结束时逐渐变得更复杂。
另外在课堂前的低风险测验帮助学生设定学习目标课后的第二个测验确保概念的进一步巩固。该课程设计灵活有趣可全部学习或部分学习。项目由浅入深12周周期结束时项目日益复杂。
虽然我们刻意避免介绍JavaScript框架以专注于掌握作为网页开发者在采用框架前所需的基础技能但完成本课程的一个良好后续步骤是通过另一套视频学习Node.js“[Node.js入门系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)”。
我们有意避免引入 JavaScript 框架,专注培养成为 Web 开发者前所必备的基础技能。完成本课程后,一个很好的下一步是学习 Node.js通过另一个视频集“[Node.js 初学者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)”。
> 请参阅我们的[行为准则](CODE_OF_CONDUCT.md)和[贡献指南](CONTRIBUTING.md)。欢迎提供建设性反馈!
> 请查看我们的[行为准则](CODE_OF_CONDUCT.md)和[贡献指南](CONTRIBUTING.md)。我们欢迎您的建设性反馈!
## 🧭 离线访问
您可以使用[Docsify](https://docsify.js.org/#/)离线运行本说明文档。Fork此仓库在本地安装[Docsify](https://docsify.js.org/#/quickstart),然后在此仓库根目录下输入 `docsify serve`。网站将在本地主机的3000端口提供服务:`localhost:3000`。
你可以使用 [Docsify](https://docsify.js.org/#/) 离线运行本文档。Fork 本仓库,[在本地安装 Docsify](https://docsify.js.org/#/quickstart),然后在本仓库根目录下运行 `docsify serve`。网站将通过本地主机端口 3000 提供服务:`localhost:3000`。
## 📘 PDF
所有课程的PDF文件可在[这里](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)找到。
所有课程的 PDF 可在[此处](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) 下载。
## 🎒 其他课程
我们的团队还制作了其他课程!快来看看:
我们的团队制作了其他课程!查看:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
@ -217,7 +221,7 @@
[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### 生成式 AI 系列
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
@ -225,7 +229,7 @@
[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### 核心学习
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
@ -236,7 +240,7 @@
[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Copilot 系列
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
@ -245,21 +249,21 @@
## 获取帮助
如果你遇到困难或有任何关于构建 AI 应用的问题,欢迎加入 MCP 的学习者和有经验开发者们的讨论。这里是一个充满支持的社区,问题受到欢迎,知识自由共享
如果您在构建 AI 应用时遇到困难或有任何问题。加入学习者和经验丰富的开发者一起讨论 MCP 的社区。这是一个支持性的社区,欢迎提问并自由分享知识
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
如果你有产品反馈或在构建过程中遇到错误,请访问:
如果您在构建过程中有产品反馈或遇到错误,请访问:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## 许可证
本仓库采用 MIT 许可证。详情请参 [LICENSE](../../LICENSE) 文件。
本仓库采用 MIT 许可证。详情请参 [LICENSE](../../LICENSE) 文件。
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免责声明**
本文件使用AI翻译服务[Co-op Translator](https://github.com/Azure/co-op-translator)翻译完成。虽然我们力求准确,但请注意自动翻译可能存在错误或不准确之处。原始文件的原文应被视为权威来源。对于重要信息,建议采用专业人工翻译。我们不对因使用翻译而产生的任何误解或误释承担责任。
本文件使用AI翻译服务 [Co-op Translator](https://github.com/Azure/co-op-translator) 进行翻译。虽然我们努力确保准确性,但请注意,自动翻译可能包含错误或不准确之处。原始文档的原语言版本应被视为权威来源。对于重要信息,建议采用专业人工翻译。我们不对因使用翻译而产生的任何误解或误释承担责任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:17:02+00:00",
"translation_date": "2026-02-06T07:44:29+00:00",
"source_file": "AGENTS.md",
"language_code": "zh-MO"
},
@ -516,8 +516,8 @@
"language_code": "zh-MO"
},
"README.md": {
"original_hash": "490c83786552d7fab6390991517bef09",
"translation_date": "2026-01-29T17:46:52+00:00",
"original_hash": "805cd399757df19e886e86f0891a1374",
"translation_date": "2026-02-06T07:41:09+00:00",
"source_file": "README.md",
"language_code": "zh-MO"
},

@ -1,191 +1,191 @@
# AGENTS.md
## 專案概述
## Project Overview
這是一個教育課程資源庫,用於教授初學者網頁開發的基礎知識。課程是一個由 Microsoft Cloud Advocates 開發的完整 12 週課程,包含 24 篇實作課程,涵蓋 JavaScript、CSS 和 HTML
這是一個為初學者教授網頁開發基礎的教育課程庫。該課程是由 Microsoft Cloud Advocates 開發的全面 12 週課程,包含 24 個涵蓋 JavaScript、CSS 及 HTML 的實作課程
### 主要組成部分
### Key Components
- **教育內容**24 篇結構化課程,組織成基於專案的模組
- **實作專案**包括生態瓶、打字遊戲、瀏覽器擴充功能、太空遊戲、銀行應用程式、程式碼編輯器和 AI 聊天助手
- **互動測驗**48 個測驗,每個測驗包含 3 個問題(課前/後評估)
- **多語言支援**:透過 GitHub Actions 自動翻譯 50 多種語言
- **教育內容**24 個有結構的課程,組織成以專案為基礎的模組
- **實作專案**Terrarium、生字打字遊戲、瀏覽器擴充功能、太空遊戲、銀行應用程式、程式碼編輯器及 AI 聊天助理
- **互動測驗**48 個測驗,每個包含 3 題(課程開始前/後評估)
- **多語言支援**:透過 GitHub Actions 自動翻譯 50 多種語言
- **技術**HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python用於 AI 專案)
### 架構
### Architecture
- 以課程為基礎的教育資源
- 每個課程資料夾包含 README、程式碼範例解答
- 獨立專案存放於不同目錄quiz-app、各課程專案)
- 使用 GitHub Actions 的翻譯系統co-op-translator
- 文件透過 Docsify 提供,並可下載 PDF 格式
- 以課程為基礎架構的教育代碼
- 每個課程資料夾包含 README、程式碼範例解答
- 獨立專案位於不同目錄quiz-app各種課程專案)
- 使用 GitHub Actions co-op-translator進行翻譯系統
- 文件以 Docsify 提供服務,並可下載 PDF
## 設置指令
## Setup Commands
資源庫主要用於教育內容的使用。若需操作特定專案:
代碼庫主要用於教育內容學習。若需使用特定專案:
### 主資源庫設置
### Main Repository Setup
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### 測驗應用程式設置Vue 3 + Vite
### 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
npm run dev # 啟動開發伺服器
npm run build # 建立生產版本
npm run lint # 執行 ESLint
```
### 銀行專案 APINode.js + Express
### 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
npm start # 啟動 API 伺服器
npm run lint # 執行 ESLint
npm run format # 使用 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
# 於瀏覽器中開啟 index.html 或使用 Live Server
```
### 聊天專案Python 後端)
### Chat Project (Python Backend)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Set GITHUB_TOKEN environment variable
# 設置 GITHUB_TOKEN 環境變量
python api.py
```
## 開發工作流程
## Development Workflow
### 對於內容貢獻者
### For Content Contributors
1. **Fork 資源庫**到您的 GitHub 帳戶
2. **將 Fork 的資源庫克隆**到本地
3. **建立新分支**以進行修改
1. **Fork 該代碼庫** 至您的 GitHub 帳戶
2. **在本地 Clone 您的 Fork**
3. **為您的修改建立新分支**
4. 修改課程內容或程式碼範例
5. 在相關專案目錄中測試程式碼修改
5. 測試相關專案目錄中的程式碼更動
6. 根據貢獻指南提交 Pull Request
### 對於學習者
### For Learners
1. Fork 或克隆資源
2. 按順序進入課程目錄
3. 閱讀每個課程的 README 文件
4. 完成課前測驗https://ff-quizzes.netlify.app/web/
5. 在課程資料夾中操作程式碼範例
6. 完成作業挑戰
7. 完成課後測驗
1. Fork 或 Clone 該代碼
2. 按順序瀏覽課程目錄
3. 讀取每課課程的 README 檔
4. 完成 https://ff-quizzes.netlify.app/web/ 上的課前測驗
5. 實作課程資料夾中的程式碼範例
6. 完成作業挑戰
7. 進行課後測驗
### 即時開發
### Live Development
- **文件**:在根目錄執行 `docsify serve`(埠 3000
- **測驗應用程式**:在 quiz-app 目錄執行 `npm run dev`
- **專案**:使用 VS Code Live Server 擴充功能開啟 HTML 專案
- **API 專案**:在相 API 目錄執行 `npm start`
- **文件**:在根目錄執行 `docsify serve`預設埠 3000
- **Quiz App**:在 quiz-app 目錄執行 `npm run dev`
- **專案**對 HTML 專案使用 VS Code Live Server 擴充功能
- **API 專案**:在相應的 API 目錄執行 `npm start`
## 測試指引
## Testing Instructions
### 測驗應用程式測試
### Quiz App Testing
```bash
cd quiz-app
npm run lint # Check for code style issues
npm run build # Verify build succeeds
npm run lint # 檢查代碼風格問題
npm run build # 確認建構成功
```
### 銀行 API 測試
### 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
npm run lint # 檢查代碼風格問題
node server.js # 驗證伺服器啟動是否無錯誤
```
### 一般測試方法
### General Testing Approach
- 此資源庫為教育用途,未包含全面的自動化測試
- 此為教育用代碼庫,無全面自動化測試
- 手動測試重點:
- 確保程式碼範例無錯誤執行
- 文件中的連結正常運作
- 專案成功完成建置
- 範例遵循最佳實踐
- 程式碼範例執行無錯誤
- 文件中的連結正確可用
- 專案成功建置
- 範例遵守最佳實務
### 提交前檢查
### Pre-submission Checks
- 在含 package.json 的目錄執行 `npm run lint`
- 驗證 Markdown 連結是否有效
- 在含 package.json 的目錄執行 `npm run lint`
- 驗證 markdown 連結有效
- 在瀏覽器或 Node.js 中測試程式碼範例
- 確保翻譯保持正確結構
- 確保翻譯結構保持正確
## 程式碼風格指南
## Code Style Guidelines
### JavaScript
- 使用現代 ES6+ 語法
- 遵循專案提供的標準 ESLint 配置
- 使用具教育意義的變數和函數名稱
- 添加註解以解釋概念,方便學習者理解
- 在配置的地方使用 Prettier 格式化
- 遵循專案指定的標準 ESLint 配置
- 變量與函數命名具教育意義
- 加入註解說明概念方便學習
- 使用 Prettier 格式化(有設定的情況下)
### HTML/CSS
- 使用語義化的 HTML5 元素
- 遵循響應式設計原則
- 清晰的類命名規範
- 添加註解以解釋 CSS 技術,方便學習者理解
- 使用語意化 HTML5 元素
- 響應式設計原則
- 清晰的類命名規範
- CSS 技巧附註解說以利學習
### Python
- 遵循 PEP 8 風格指南
- 提供清晰的教育性程式碼範例
- 在需要時添加類型提示以幫助學習
- 遵守 PEP 8 風格指引
- 清楚、具教育意義的程式碼範例
- 需要時使用型別提示幫助理解
### Markdown 文件
### Markdown Documentation
- 清晰的標題層次結構
- 使用語言指定的程式碼區塊
- 提供額外資源的連結
- `images/` 目錄中存放截圖和圖片
- 為圖片添加替代文字以提高可訪問
- 清晰的標題
- 指定語言的程式碼區塊
- 指向額外資源的連結
- `images/` 目錄內的截圖及圖片
- 圖片皆具備替代文字 (alt text) 以利存取
### 文件組織
### File Organization
- 課程按順序編號1-getting-started-lessons、2-js-basics 等)
- 每個專案包含 `solution/`,通常還`start/``your-work/` 目錄
- 圖片存放於課程專屬`images/` 資料夾
- 翻譯存放於 `translations/{language-code}/` 結構
- 課程依序編號1-getting-started-lessons, 2-js-basics 等)
- 每個專案擁有 `solution/`,且常見`start/``your-work/` 目錄
- 圖片儲存在課程專用`images/` 資料夾
- 翻譯存放於 `translations/{language-code}/` 結構
## 建置與部署
## Build and Deployment
### 測驗應用程式部署Azure Static Web Apps
### Quiz App Deployment (Azure Static Web Apps)
測驗應用程式已配置為 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
npm run build # 建立 dist/ 資料夾
# 在推送到 main 時,透過 GitHub Actions 工作流程部署
```
Azure Static Web Apps 配置:
@ -193,90 +193,90 @@ Azure Static Web Apps 配置:
- **輸出位置**`dist`
- **工作流程**`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### 文件 PDF 生成
### Documentation PDF Generation
```bash
npm install # Install docsify-to-pdf
npm run convert # Generate PDF from docs
npm install # 安裝 docsify-to-pdf
npm run convert # 從 docs 生成 PDF
```
### Docsify 文件
### Docsify Documentation
```bash
npm install -g docsify-cli # Install Docsify globally
docsify serve # Serve on localhost:3000
npm install -g docsify-cli # 全局安裝 Docsify
docsify serve # 在 localhost:3000 提供服務
```
### 專案特定建置
### Project-specific Builds
每個專案目錄可能有自己的建置流程:
- Vue 專案:`npm run build` 生成生產環境
- 靜態專案:無需建置步驟,直接提供檔案
各專案目錄可能有獨立建置過程:
- Vue 專案:`npm run build` 建立生產版本
- 靜態專案:無需建置,直接提供檔案服務
## Pull Request 指南
## Pull Request Guidelines
### 標題格式
### Title Format
使用清晰、描述性的標題,指明修改範圍
- `[Quiz-app] 為課程 X 添加新測驗`
- `[Lesson-3] 修正生態瓶專案中的拼寫錯誤`
- `[Translation] 添加課程 5 的西班牙語翻譯`
- `[Docs] 更新設置指令`
使用清楚描述改動範圍的標題
- `[Quiz-app] 新增第 X 課測驗`
- `[Lesson-3] 修改 terrarium 專案的拼寫錯誤`
- `[Translation] 新增第 5 課西班牙語翻譯`
- `[Docs] 更新設定指南`
### 必要檢查
### Required Checks
提交 PR 前:
1. **程式碼品質**
- 在受影響的專案目錄執行 `npm run lint`
- 修正所有 lint 錯誤和警告
- 在相關專案目錄執行 `npm run lint`
- 修正所有錯誤與警告
2. **建置驗證**
- 如果適用,執行 `npm run build`
- 確保無建置錯誤
3. **連結驗證**
- 測試所有 Markdown 連結
- 確保圖片引用正常運作
- 測試所有 markdown 連結
- 確認圖片參考正常
4. **內容審查**
- 校對拼寫和語
- 確保程式碼範例正確且具教育性
- 確保翻譯保持原意
4. **內容檢閱**
- 校對拼字與文
- 確保程式碼範例正確及具教育意味
- 核對翻譯保持原意
### 貢獻要求
### Contribution Requirements
- 同意 Microsoft CLA首次 PR 時自動檢查)
- 遵循 [Microsoft 開源行為準則](https://opensource.microsoft.com/codeofconduct/)
- 詳細指南請參閱 [CONTRIBUTING.md](./CONTRIBUTING.md)
- 如果適用,請在 PR 描述中引用問題編號
- 同意 Microsoft CLA第一次 PR 自動檢查)
- 遵守 [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- 詳情請見 [CONTRIBUTING.md](./CONTRIBUTING.md)
- 若適用,於 PR 描述中參考相關 issue 編號
### 審查流程
### Review Process
- PR 由維護者和社群審查
- 優先考慮教育清晰度
- 程式碼範例應遵循最新最佳實踐
- 翻譯需審查準確性和文化適切
- 由維護者與社群審閱 PR
- 優先教育內容的清晰性
- 程式碼範例應符合當前最佳實務
- 翻譯審核準確度及文化適應
## 翻譯系統
## Translation System
### 自動翻譯
### Automated Translation
- 使用 GitHub Actions co-op-translator 工作流程
- 自動翻譯成 50 多種語言
- 主目錄中的原始檔案
- 使用 GitHub Actions co-op-translator 工作流程
- 自動將內容翻譯為 50 多種語言
- 原始檔案保存在主目錄
- 翻譯檔案存放於 `translations/{language-code}/` 目錄
### 添加手動翻譯改進
### Adding Manual Translation Improvements
1. `translations/{language-code}/` 中找到檔案
2. 在保持結構的情況下進行改進
3. 確保程式碼範例仍然可用
4. 測試任何本地化測驗內容
1. 找到 `translations/{language-code}/` 內相關檔案
2. 在保留結構前提下進行優化
3. 確保程式碼範例仍可正常運作
4. 測試本地化測驗內容
### 翻譯元資料
### Translation Metadata
翻譯檔案含元資料標頭
翻譯檔案含頭部元資料:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,118 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## 偵錯與故障排除
## Debugging and Troubleshooting
### 常見問題
### Common Issues
**測驗應用程式無法啟動**
**Quiz app 啟動失敗**
- 檢查 Node.js 版本(建議 v14+
- 刪除 `node_modules``package-lock.json`,重新執行 `npm install`
- 檢查埠衝突預設Vite 使用埠 5173
- 檢查埠口衝突(預設 Vite 使用 5173 埠
**API 伺服器無法啟動**
- 確認 Node.js 版本符合最低要求node >=10
- 檢查埠是否已被佔
- 確保所有依賴已使用 `npm install` 安裝
- 確認 Node.js 版本達最小要求node >=10
- 檢查埠口是否被占
- 確保執行了 `npm install` 安裝所有相依套件
**瀏覽器擴充功能無法載入**
- 確認 manifest.json 格式正確
- 檢查瀏覽器主控台中的錯誤
- 遵循瀏覽器特定的擴充功能安裝指引
- 檢查瀏覽器主控台錯誤訊息
- 遵循瀏覽器專屬擴充功能安裝說明
**Python 聊天專案問題**
- 確已安裝 OpenAI 套件:`pip install openai`
- 確認已設置 GITHUB_TOKEN 環境變數
- 檢查 GitHub Models 存取權限
- 確已安裝 OpenAI 套件:`pip install openai`
- 確認 GITHUB_TOKEN 環境變數已設定
- 檢查 GitHub Models 存取權限
**Docsify 無法提供文件**
- 全安裝 docsify-cli`npm install -g docsify-cli`
- 從資源庫根目錄執行
**Docsify 文件無法啟動**
- 全安裝 docsify-cli`npm install -g docsify-cli`
- 從代碼庫根目錄執行
- 確認 `docs/_sidebar.md` 存在
### 開發環境提示
### Development Environment Tips
- 使用 VS Code 和 Live Server 擴充功能開啟 HTML 專案
- 安裝 ESLint 和 Prettier 擴充功能以保持一致的格式
- 使用瀏覽器開發工具偵錯 JavaScript
- 對於 Vue 專案安裝 Vue DevTools 瀏覽器擴充功能
- HTML 專案使用 VS Code 及 Live Server 擴充功能
- 安裝 ESLint 與 Prettier 擴充,保持格式一致
- 使用瀏覽器開發工具調試 JavaScript
- Vue 專案安裝 Vue DevTools 瀏覽器擴充功能
### 性能考量
### Performance Considerations
- 大量翻譯檔案50+ 種語言)導致完整克隆檔案較
- 若僅需操作內容,使用淺層克隆`git clone --depth 1`
- 在處理英文內容時排除翻譯檔案的搜尋
- 首次執行建置流程可能較慢npm install、Vite build
- 多語言翻譯檔案眾多50+ 種語言),完整 Clone 會很
- 如只需處理內容,使用淺層 Clone`git clone --depth 1`
- 在處理英文內容時排除翻譯結果以加快搜尋
- 建置流程初次執行時npm install、Vite build較慢
## 安全考量
## Security Considerations
### 環境變數
### Environment Variables
- API 金鑰絕不可提交到資源
- 使用 `.env` 檔案(已`.gitignore`
- 在專案 README 中記錄所需的環境變數
- API 金鑰絕不可提交到代碼
- 使用 `.env` 檔案(已加入 `.gitignore`
- README 文件說明所需環境變數
### Python 專案
### Python Projects
- 使用虛擬環境:`python -m venv venv`
- 保持依賴更新
- GitHub Token 應具有最低必要權限
- 維持依賴套件更新
- GitHub Token 限制在最小必要權限
### GitHub Models 存取
### GitHub Models Access
- 需要個人存取 TokenPAT以使用 GitHub Models
- Token 應存放為環境變數
- 絕不可提交 Token 或憑證
- 使用個人訪問 TokenPAT存取 GitHub Models
- Token 透過環境變數儲存
- 避免提交 Token 或憑證
## 附加說明
## Additional Notes
### 目標受眾
### Target Audience
- 完全初學者的網頁開發學習者
- 學生和自學者
- 在課堂中使用課程的教師
- 內容設計以提高可訪問性並逐步建立技能
- 完全初學者的網頁開發學
- 自學者
- 使用課程於教室的教師
- 內容設計兼顧無障礙及循序漸進能力建構
### 教育理念
### Educational Philosophy
- 基於專案的學習方法
- 頻繁的知識檢查(測驗)
- 專案導向學習方法
- 經常性知識檢核(問答測驗)
- 實作程式碼練習
- 真實世界應用範例
- 在框架之前專注於基礎知識
- 先重基礎再談框架
### 資源庫維護
### Repository Maintenance
- 活躍的學習者貢獻者社群
- 定期更新依賴和內容
- 維護者監控問題和討論
- 翻譯更新透過 GitHub Actions 自動化
- 活躍的學習者貢獻者社群
- 依賴套件及內容定期更新
- 維護者監控 issue 與討論
- 翻譯系統自動化透過 GitHub Actions
### 相關資源
### Related Resources
- [Microsoft Learn 模組](https://docs.microsoft.com/learn/)
- [學生中心資源](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) 建議學習者使用
- 其他課程:生成式 AI、資料科學、機器學習、物聯網課程可用
- 建議學習者使用 [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- 其他課程:生成式 AI、資料科學、機器學習、物聯網課程可用
### 操作特定專案
### Working with Specific Projects
有關個別專案的詳細指引,請參閱以下目錄中的 README 文件
- `quiz-app/README.md` - Vue 3 測驗應用程式
- `7-bank-project/README.md` - 帶有身份驗證的銀行應用程式
詳細個別專案說明,請參閱
- `quiz-app/README.md` - Vue 3 測驗應用
- `7-bank-project/README.md` - 具驗證功能銀行應用
- `5-browser-extension/README.md` - 瀏覽器擴充功能開發
- `6-space-game/README.md` - 基於 Canvas 遊戲開發
- `9-chat-project/README.md` - AI 聊天助專案
- `6-space-game/README.md` - Canvas 遊戲開發
- `9-chat-project/README.md` - AI 聊天助專案
### Monorepo 結構
### Monorepo Structure
然不是傳統的 Monorepo此資源庫包含多個獨立專案:
- 每個課程都是自包含的
- 專案之間不共享依賴
- 可獨立操作個別專案而不影響其他專案
- 克隆整個資源庫以獲得完整課程體驗
非傳統 monorepo此代碼庫含多個獨立專案:
- 每個課程自成一體
- 專案之間無相依共享套件
- 可單獨工作於各專案不影響其他
- 若需完整課程體驗Clone 整個儲存庫即可
---
**免責聲明**
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯,請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊,建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**
本文件乃使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 所翻譯。雖然我們致力於確保翻譯的準確性,但請注意,自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊,建議採用專業人工翻譯。我們不對因使用此翻譯而引起之任何誤解或誤釋負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -10,203 +10,209 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# 初學者網頁開發課程
# Web Development for Beginners - 課程綱要
由 Microsoft Cloud Advocates 提供的 12 週全面課程教授網頁開發基礎。24 節課中每節均透過實作專案如生態缸、瀏覽器擴充功能及太空遊戲深入學習 JavaScript、CSS 及 HTML。參與小測驗、討論及實際作業。藉由我們有效的專案導向教學法提升您的技能並優化知識吸收。立即開始您的程式編碼旅程!
透過 Microsoft Cloud Advocates 的 12 週全面課程學習網頁開發基礎。24 個課程單元深入探索 JavaScript、CSS 和 HTML透過實作專案如玻璃生態瓶、瀏覽器擴充功能及太空遊戲。參與小測驗、討論及實務作業利用有效的專案導向教學法提升技能並優化知識吸收。立即開始您的程式設計旅程!
加入 Azure AI Foundry Discord 社群
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
開始使用這些資源,請遵循以下步驟
1. **Fork 倉庫**:點擊 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone 倉庫**`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**加入 Azure AI Foundry Discord 並認識專家及其他開發者**](https://discord.com/invite/ByRwuEEgH4)
按照以下步驟開始使用這些資源:
1. **複製此儲存庫**:點擊 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **克隆儲存庫** `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**加入 Azure AI Foundry Discord,與專家及其他開發者互動**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 多語言支援
#### 透過 GitHub Action 支援(自動且持續更新)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[阿拉伯語](../ar/README.md) | [孟加拉語](../bn/README.md) | [保加利亞語](../bg/README.md) | [緬甸語](../my/README.md) | [中文(簡體)](../zh-CN/README.md) | [中文(繁體,香港)](../zh-HK/README.md) | [中文(繁體,澳門)](./README.md) | [中文(繁體,臺灣)](../zh-TW/README.md) | [克羅地亞語](../hr/README.md) | [捷克語](../cs/README.md) | [丹麥語](../da/README.md) | [荷蘭語](../nl/README.md) | [愛沙尼亞語](../et/README.md) | [芬蘭語](../fi/README.md) | [法語](../fr/README.md) | [德語](../de/README.md) | [希臘語](../el/README.md) | [希伯來語](../he/README.md) | [印地語](../hi/README.md) | [匈牙利語](../hu/README.md) | [印尼語](../id/README.md) | [義大利語](../it/README.md) | [日語](../ja/README.md) | [坎納達語](../kn/README.md) | [韓語](../ko/README.md) | [立陶宛語](../lt/README.md) | [馬來語](../ms/README.md) | [馬拉雅拉姆語](../ml/README.md) | [馬拉地語](../mr/README.md) | [尼泊爾語](../ne/README.md) | [奈及利亞皮欽語](../pcm/README.md) | [挪威語](../no/README.md) | [波斯語(法爾西)](../fa/README.md) | [波蘭語](../pl/README.md) | [葡萄牙語(巴西)](../pt-BR/README.md) | [葡萄牙語(葡萄牙)](../pt-PT/README.md) | [旁遮普語(古魯穆奇)](../pa/README.md) | [羅馬尼亞語](../ro/README.md) | [俄語](../ru/README.md) | [塞爾維亞語(西里爾字母)](../sr/README.md) | [斯洛伐克語](../sk/README.md) | [斯洛維尼亞語](../sl/README.md) | [西班牙語](../es/README.md) | [斯瓦希里語](../sw/README.md) | [瑞典語](../sv/README.md) | [他加祿語(菲律賓語)](../tl/README.md) | [泰米爾語](../ta/README.md) | [泰盧固語](../te/README.md) | [泰語](../th/README.md) | [土耳其語](../tr/README.md) | [烏克蘭語](../uk/README.md) | [烏爾都語](../ur/README.md) | [越南語](../vi/README.md)
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](./README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **想本機 Clone**
> **偏好本地克隆**
> 此資源庫包含超過 50 種語言翻譯,會顯著增加下載大小。若想不下載翻譯內容,可使用 sparse checkout
> 本儲存庫包含 50+ 種語言翻譯,下載大小較大。欲不含翻譯檔的克隆,請使用稀疏檢出
> ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> 這樣可讓您更快下載且仍包含完成課程所需的一切
> 這樣您就能以更快的速度載下所有完成課程所需的內容
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**若您希望支持更多翻譯語言,請查看[此處](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**如果您希望支援其他翻譯語言,請參考 [此處](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _是學生嗎_
#### 🧑‍🎓 _是學生嗎_
請造訪 [**學生中心頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon),這裡提供入門資源、學生包及獲取免費證書憑證券的方法。建議您將此頁書籤,並不時回來查看我們每月更換的內容。
請造訪 [**學生中心頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon),這裡備有初學者資源、學生套件甚至免費證書憑證取得方式。這頁是您要加入書籤並不時查看的頁面,因為我們每月會更換內容。
### 📣 公告 - 新增 GitHub Copilot Agent 模式挑戰
### 📣 公告 - 新增 GitHub Copilot Agent 模式挑戰!
挑戰已上線於大多數章節中尋找「GitHub Copilot Agent 挑戰 🚀」。這是個可用 GitHub Copilot 及 Agent 模式完成的新任務。若您尚未使用 Agent 模式,它不只生成文字,還能建立及編輯檔案、執行指令等。
增挑戰,請在大多數章節尋找 "GitHub Copilot Agent Challenge 🚀"。這是使用 GitHub Copilot 與 Agent 模式的新挑戰。如果您尚未使用過 Agent 模式,它不僅能產生文字,還能建立與編輯檔案、執行指令等等。
### 📣 公告 - _新增運用生成式 AI 的專案_
### 📣 公告 - _利用生成式 AI 新增專案_
AI 助手專案剛推出,請瀏覽此 [專案](./9-chat-project/README.md)
增 AI 助手專案,請參考 [專案](./9-chat-project/README.md)
### 📣 公告 - _全新 JavaScript 生成式 AI 課程上線_
### 📣 公告 - _剛發布的 JavaScript 生成式 AI 新課程_
別錯過我們的新生成式 AI 課程!
不要錯過我們全新的生成式 AI 課程!
造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習!
![Background](../../translated_images/zh-MO/background.148a8d43afde5730.webp)
- 課程涵蓋基礎到 RAG
- 使用生成式 AI 及我們的輔助應用與歷史人物互動
- 趣味與引人入勝的敘事,帶你穿越時空!
- 課程涵蓋基礎到 RAG
- 與歷史人物互動,利用 GenAI 及我們的伴隨應用程式。
- 有趣且引人入勝的敘事,帶您穿越時空!
![character](../../translated_images/zh-MO/character.5c0dd8e067ffd693.webp)
每堂課包含任務、知識檢核及挑戰,引導你學習:
- 提示與提示工程
- 文字與圖像應用生成
- 搜尋應用程式
每個課程包含作業、小測驗與挑戰,引導您學習主題如:
- 提示設計與提示工程
- 文字與圖片應用產生
- 搜尋應用
造訪 [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) 開始學習!
## 🌱 開始使用
> **教師們**,我們已在此提供[使用課程建議](for-teachers.md)。期待您在[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)給我們回饋
> **教師們**,我們提供了 [一些建議](for-teachers.md) 關於如何使用本課程。我們也期待您在[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)分享您的意見
**[學習者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**,每節課從課前小測驗開始,接著研讀講義,完成各種活動,最後用課後小測驗檢驗理解
**[學習者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**,每課開始先做課前小測驗,接著閱讀講義內容並完成各項活動,再用課後小測驗檢視學習成效
增進學習效果,建議您與同儕合作專案!我們歡迎您在[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)交流,版主團隊會協助回答問題
提升學習體驗,請與同儕合作專案,歡迎在我們的[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)開放討論,社群管理員也將隨時協助答疑解惑
欲深入學習,強烈建議探索 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) 取得更多學習資源
要深入學習,我們強烈建議您探索 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) 取得更多學習材料
### 📋 設定環境
### 📋 環境設置
本課程已有預設開發環境!您可選擇在 [Codespace](https://github.com/features/codespaces/)(瀏覽器內、無需安裝)執行課程,或於本機利用文字編輯器如 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 開發
本課程已備妥開發環境!開始學習時,您可以選擇於 [Codespace](https://github.com/features/codespaces/)(瀏覽器執行、免安裝環境)或本機端使用文字編輯器,例如 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 來操作課程
#### 建立您的
方便儲存作業,建議建立並使用您自己的課程副本。可於頁首點擊 **Use this template** 按鈕,系統會在您的 GitHub 帳號下建立一個新的課程副本。
#### 建立您的儲存
了方便儲存您的作品,建議建立本儲存庫的個人副本。可點擊頁面頂部的 **Use this template** 按鈕。系統會自動在您的 GitHub 帳戶建立一份課程複本。
步驟如下
1. **Fork 倉庫**點擊本頁右上角的「Fork」按鈕。
2. **Clone 倉庫**`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
操作步驟:
1. **複製儲存庫**:點擊此頁右上角的 "Fork" 按鈕。
2. **克隆儲存庫** `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### 在 Codespace 執行課程
於您建立的倉庫副本中,點擊 **Code** 按鈕並選擇 **Open with Codespaces**。系統將為您建立一個新的 Codespace 以便開發
在您建立的這份儲存庫副本中,點擊 **Code** 按鈕並選擇 **Open with Codespaces**。系統會為您建立一個新的 Codespace 工作區
![Codespace](../../translated_images/zh-MO/createcodespace.0238bbf4d7a8d955.webp)
#### 在本機執行課程
#### 在本機電腦執行課程
欲於本機運行此課程,您需具備文字編輯器、瀏覽器及命令行工具。我們的第一堂課 [程式語言與工具基礎介紹](../../1-getting-started-lessons/1-intro-to-programming-languages) 中會介紹各種可用工具選項,讓您挑選最合適的
若要在本機執行,您需要文字編輯器、瀏覽器和命令列工具。我們的第一堂課 [程式語言及開發工具入門](../../1-getting-started-lessons/1-intro-to-programming-languages) 會引導您了解多種適合的工具選擇,您可依需求挑選
建議使用 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 作為編輯器,它內建有功能強大的 [終端機](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。您可於此下載 Visual Studio Code[連結](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)。
建議使用 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 作為編輯器,它內建了[終端機](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。您可以從 [這裡下載 Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)。
1. 將您的倉庫 clone 至電腦。點擊 **Code** 按鈕並複製網址
1. 將您的儲存庫克隆到本機電腦。方法是點擊 **Code** 按鈕並複製 URL
[CodeSpace](./images/createcodespace.png)
然後,打開 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 內的 [終端機](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) 並執行以下命令,將 `<your-repository-url>` 替換為剛剛複製的網址
然後, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 中打開 [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) 並運行以下命令,將 `<your-repository-url>` 替換為你剛剛複製的 URL
```bash
git clone <your-repository-url>
```
2. 在 Visual Studio Code 中打開資料夾。您可以點擊 **檔案** > **開啟資料夾**,然後選擇剛剛克隆的資料夾。
2. 在 Visual Studio Code 中打開該資料夾。你可以點擊 **File** > **Open Folder** 並選擇你剛剛 clone 的資料夾。
> 推薦的 Visual Studio Code 擴充功能:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code 中預覽 HTML 頁面
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 幫助更快編寫程式碼
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code 中預覽 HTML 頁面
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 幫助更快編寫程式碼
## 📂 每個課程包含:
- 選的手繪筆記
- 可選的補充影片
- 課前熱身測驗
- 書面課程
- 對於專案導向課程,逐步指導如何建立該專案
- 選擇性的手繪筆記
- 選擇性補充影片
- 課前熱身測驗
- 書面課程內容
- 專案導向課程中,包含逐步指南教你如何構建專案
- 知識檢核
- 一個挑戰
- 挑戰
- 補充閱讀
- 任務
- 作業
- [課後測驗](https://ff-quizzes.netlify.app/web/)
> **關於測驗的說明**:所有測驗都包含在 Quiz-app 資料夾中共有48個測驗每個測驗包含三個問題。它們可在[此處](https://ff-quizzes.netlify.app/web/)取得,測驗程式可在本機執行或部署到 Azure請依照 `quiz-app` 資料夾中的說明操作。
> **關於小測驗的說明**:所有小測驗均包含於 Quiz-app 資料夾內,共有 48 個小測驗,每個包含三題問題。它們可於[這裡](https://ff-quizzes.netlify.app/web/)取得,測驗應用程式可在本地運行或部署至 Azure請按照 `quiz-app` 資料夾內的說明操作。
## 🗃️ 課程列表
| | 專案名稱 | 教授概念 | 學習目標 | 相關課程 | 作者 |
| | 專案名稱 | 教授概念 | 學習目標 | 連結課程 | 作者 |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | 入門起步 | 程式設計概論與專業工具 | 學習大多數程式語言背後的基本原理,以及協助專業開發者工作的軟體工具 | [程式語言與專業工具介紹](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | 入門起步 | GitHub 基礎與團隊協作 | 如何在專案中使用 GitHub以及如何和他人協同操作程式碼庫 | [GitHub 入門](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | 入門起步 | 網頁無障礙 | 學習網頁無障礙的基礎知識 | [無障礙基礎](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 01 | 入門開始 | 編程導論與開發工具介紹 | 了解大多數程式語言的基本原理及協助專業開發人員完成任務的軟件工具 | [編程語言與工具導論](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | 入門開始 | GitHub 基礎與團隊協作 | 如何在專案中使用 GitHub以及如何與他人在碼庫中協作 | [GitHub 入門](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | 入門開始 | 可及性 | 學習網頁可及性的基礎知識 | [可及性基礎](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS 基礎 | JavaScript 資料型態 | JavaScript 資料型態的基礎 | [資料型態](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS 基礎 | 函式與方法 | 了解函式和方法,管理應用程式的邏輯流 | [函式與方法](./2-js-basics/2-functions-methods/README.md) | Jasmine 和 Christopher |
| 06 | JS 基礎 | 使用 JS 作決策 | 了解如何使用決策結構建立程式條件 | [決策](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS 基礎 | 陣列與迴圈 | 使用陣列與迴圈操作 JavaScript 內的資料 | [陣列與迴圈](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [溫室生態箱](./3-terrarium/solution/README.md) | HTML 實務 | 建立 HTML 來製作線上溫室生態箱,重點是建構版面 | [HTML 入門](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [溫室生態箱](./3-terrarium/solution/README.md) | CSS 實務 | 建立 CSS 以設定線上溫室生態箱樣式,著重於 CSS 基礎和網站響應式設計 | [CSS 入門](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [溫室生態箱](./3-terrarium/solution/README.md) | JavaScript 閉包、DOM 操作 | 撰寫 JavaScript 讓溫室生態箱成為拖放介面,重點在閉包與 DOM 操作 | [JavaScript 閉包與 DOM 操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [打字遊戲](./4-typing-game/solution/README.md) | 製作打字遊戲 | 學習如何使用鍵盤事件驅動 JavaScript 應用程式邏輯 | [事件驅動式設計](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [綠色瀏覽器擴充功能](./5-browser-extension/solution/README.md) | 瀏覽器運作原理 | 了解瀏覽器如何運作、歷史,以及如何搭建瀏覽器擴充功能的初步元件 | [瀏覽器介紹](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [綠色瀏覽器擴充功能](./5-browser-extension/solution/README.md) | 建立表單、呼叫 API 及本地儲存變數 | 建立瀏覽器擴充功能的 JavaScript利用本地儲存變數呼叫 API | [API、表單與本地存](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [綠色瀏覽器擴充功能](./5-browser-extension/solution/README.md) | 瀏覽器背景程序與網頁效能 | 使用瀏覽器背景程序管理擴充功能圖示;學習網頁效能及優化技巧 | [背景任務與效能](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [太空遊戲](./6-space-game/solution/README.md) | 使用 JavaScript 進階遊戲開發 | 了解使用類別與組合的繼承以及發布/訂閱模式,為開發遊戲做準備 | [進階遊戲開發介紹](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [太空遊戲](./6-space-game/solution/README.md) | Canvas 繪圖 | 了解 Canvas API 用於在畫面上繪製元素 | [Canvas 繪圖](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [太空遊戲](./6-space-game/solution/README.md) | 元素在畫面移動 | 探索如何使用笛卡爾座標與 Canvas API 讓元素動起來 | [元素移動](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [太空遊戲](./6-space-game/solution/README.md) | 碰撞偵測 | 讓元素碰撞並互動,使用按鍵觸發反應並提供冷卻功能以維持遊戲效能 | [碰撞偵測](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [太空遊戲](./6-space-game/solution/README.md) | 計分系統 | 根據遊戲狀態與表現執行數學運算 | [計分系統](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [太空遊戲](./6-space-game/solution/README.md) | 遊戲結束與重新開始 | 了解遊戲結束與重新開始流程,包括資源清理與變數重置 | [結束條件](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [銀行應用程式](./7-bank-project/solution/README.md) | 網頁應用的 HTML 範本與路由 | 學習用路由與 HTML 範本建立多頁網站架構 | [HTML 範本與路由](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [銀行應用程式](./7-bank-project/solution/README.md) | 建立登入與註冊表單 | 了解表單製作與驗證流程 | [表單](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [銀行應用程式](./7-bank-project/solution/README.md) | 獲取與使用資料的方法 | 理解資料如何流入與流出應用程式,如何取得、儲存與處理 | [資料](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [銀行應用程式](./7-bank-project/solution/README.md) | 狀態管理概念 | 學習應用程式如何保存狀態與如何程式化管理 | [狀態管理](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [瀏覽器/VScode 程式碼](../../8-code-editor) | 使用 VScode | 學習如何使用程式碼編輯器| [使用 VScode 程式碼編輯器](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI 助理](./9-chat-project/README.md) | 與 AI 合作 | 學習如何建立自己的 AI 助理 | [AI 助理專案](./9-chat-project/README.md) | Chris |
| 05 | JS 基礎 | 函式與方法 | 學習函式與方法以管理應用程式的邏輯流程 | [函式與方法](./2-js-basics/2-functions-methods/README.md) | Jasmine 和 Christopher |
| 06 | JS 基礎 | 使用 JS 做決策 | 學習如何在程式碼中建立條件判斷 | [決策製作](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS 基礎 | 陣列與迴圈 | 使用陣列與迴圈處理資料 | [陣列與迴圈](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML 實作 | 建立 HTML 以構建線上生態箱,重點放在佈局建構 | [HTML 入門](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS 實作 | 建立 CSS 以美化線上生態箱,重點為 CSS 基礎及響應式設計 | [CSS 入門](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript 閉包、DOM 操作 | 編寫 JavaScript 令生態箱具有拖放功能,重點為閉包與 DOM 操作 | [JavaScript 閉包及 DOM 操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [打字遊戲](./4-typing-game/solution/README.md) | 建立打字遊戲 | 學習如何使用鍵盤事件控制 JavaScript 應用程式邏輯 | [事件驅動程](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [綠色瀏覽器擴充套件](./5-browser-extension/solution/README.md) | 瀏覽器運作 | 瞭解瀏覽器的運作原理、歷史及如何構建瀏覽器擴充元件初版 | [關於瀏覽器](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [綠色瀏覽器擴充套件](./5-browser-extension/solution/README.md) | 建立表單、呼叫 API 並在本地存儲變數 | 編寫瀏覽器擴充元件的 JavaScript 以利用儲存在本地的變數呼叫 API | [API、表單與本地](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [綠色瀏覽器擴充套件](./5-browser-extension/solution/README.md) | 瀏覽器背景處理、網頁效能 | 使用瀏覽器背景程序管理擴充圖示;瞭解網站效能及一些優化技術 | [背景任務與效能](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [太空遊戲](./6-space-game/solution/README.md) | 更進階的 JavaScript 遊戲開發 | 學習繼承(包含類別與組合繼承)及發佈/訂閱Pub/Sub模式為製作遊戲做準備 | [進階遊戲開發導論](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [太空遊戲](./6-space-game/solution/README.md) | Canvas 繪圖 | 學習 Canvas API用於在螢幕上繪製元素 | [Canvas 繪圖](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [太空遊戲](./6-space-game/solution/README.md) | 螢幕上移動元素 | 發現如何使用笛卡兒座標與 Canvas API 令元素產生動作 | [移動元素](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [太空遊戲](./6-space-game/solution/README.md) | 碰撞偵測 | 使元素碰撞並因應對方作出反應,並設置冷卻功能以確保遊戲效能 | [碰撞偵測](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [太空遊戲](./6-space-game/solution/README.md) | 計分 | 根據遊戲狀態與表現進行數學計算 | [計分](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [太空遊戲](./6-space-game/solution/README.md) | 結束與重啟遊戲 | 學習結束與重啟遊戲,包括清理資源與重設變數 | [結束條件](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [銀行應用程式](./7-bank-project/solution/README.md) | 網頁應用的 HTML 模板與路由 | 學習如何使用路由與 HTML 模板建立多頁網站架構 | [HTML 模板與路由](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [銀行應用程式](./7-bank-project/solution/README.md) | 建立登入與註冊表單 | 學習如何建立表單與處理驗證流程 | [表單](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [銀行應用程式](./7-bank-project/solution/README.md) | 取得與使用資料的方法 | 資料如何流入流出應用程式,如何取得、儲存及處理 | [資料](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [銀行應用程式](./7-bank-project/solution/README.md) | 狀態管理概念 | 學習應用程式如何維持狀態以及如何以程式方式管理 | [狀態管理](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [瀏覽器/VScode 程式碼](../../8-code-editor) | 使用 VScode | 學習如何使用程式碼編輯器| [使用 VScode 編輯器](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI 助手](./9-chat-project/README.md) | 使用 AI | 學習如何建立你的 AI 助手 | [AI 助手專案](./9-chat-project/README.md) | Chris |
## 🏫 教學法
我們的課程設計基於兩個主要教學原則
我們的課程設計以兩大教學原則為核心
* 專案導向學習
* 頻繁的測驗
* 頻繁的測驗
本課程教授 JavaScript、HTML 和 CSS 的基礎知識,以及當代網頁開發者使用的最新工具與技術。學生將有機會透過製作打字遊戲、虛擬溫室生態箱、環保瀏覽器擴充功能、太空入侵者風格遊戲以及企業銀行應用程式等專案,獲得實務經驗。系列課程結束時,學員將具備紮實的網頁開發能力
本課程教授 JavaScript、HTML 和 CSS 的基礎,以及現代網站開發者所使用的最新工具與技術。學生將透過製作打字遊戲、虛擬生態箱、環保瀏覽器擴充元件、太空侵略者風格遊戲與企業銀行應用程式,獲得實作經驗。整套課程結束後,學生將具備堅實的網頁開發基礎
> 🎓 您可以將本課程的前幾堂課視為 Microsoft Learn 上的[學習路徑](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)
> 🎓 你可以在 Microsoft Learn 上將本課程的前幾個課程視為一個 [學習路徑](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)
透過確保內容與專案相契合,學習過程對學生更加吸引且能增強概念的記憶。我們同時撰寫了多堂 JavaScript 基礎入門課程,搭配「[JavaScript 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)」影片教學,其中部分作者也參與了本課程的撰寫
透過確保內容與專案相結合,讓學生學習過程更具互動性並提高概念記憶。我們也編寫了數個 JavaScript 基礎入門課程,搭配來自「[JavaScript 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)」影片教程的教學影片,其中部分作者也參與了本課程設計
此外,課前低壓力測驗有助設定學生的學習目標課後測驗則促進進一步記憶。本課程設計靈活且有趣可完整修讀或分部分選修。專案由簡入繁隨著12週課程循環逐漸加深難度
此外,課前的低壓力小測驗能幫助學生設定學習目標,課後的第二個測驗則促進概念鞏固。本課程設計靈活且有趣,既可全程修讀,也可挑選部分內容。專案由淺入深,隨著 12 週課程進展逐步複雜
儘管我們有意避免引入 JavaScript 框架,專注培養成為網頁開發者前需具備的基礎能力,完成本課程的下一步,建議學習 Node.js參考另一套影片教學「[Node.js 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)」。
雖然我們刻意沒有介紹 JavaScript 框架,以便先專注於成為網頁開發者所需的基本技能,在完成此課程後,合理的下一步是透過另一系列影片學習 Node.js「[Node.js 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)」。
> 請參閱我們的 [行為守則](CODE_OF_CONDUCT.md) 與 [貢獻指南](CONTRIBUTING.md)。歡迎您提供建設性的反饋!
> 請參閱我們的[行為準則](CODE_OF_CONDUCT.md)與[貢獻指南](CONTRIBUTING.md)。我們歡迎您的建設性回饋!
## 🧭 離線存取
您可以使用 [Docsify](https://docsify.js.org/#/) 離線瀏覽本文件。先將此專案分叉,並在本機安裝 [Docsify](https://docsify.js.org/#/quickstart),然後在專案根目錄輸入 `docsify serve`。網站將在本機端口 3000 伺服:`localhost:3000`。
## 🧭 離線瀏覽
你可以透過使用 [Docsify](https://docsify.js.org/#/) 離線閱讀本文件。Fork 此倉庫,在本地機器上[安裝 Docsify](https://docsify.js.org/#/quickstart),然後在此倉庫根目錄輸入 `docsify serve`。網站會在本地端口 3000 提供服務:`localhost:3000`。
## 📘 PDF
所有課程的 PDF 檔案可於 [此處](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) 下載。
所有課程的 PDF 版本可於[此處](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)下載。
## 🎒 其他課程
我們團隊還製作其他課程!查看:
我們團隊還製作其他課程!查看:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
@ -242,23 +248,23 @@
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## 尋求協
## 獲取幫
如果您遇到困難或對建立 AI 應用有任何疑問,歡迎加入學習者和經驗豐富開發人員的討論,共同參與 MCP 的交流。這是一個支持性的社群,歡迎提出問題並自由分享知識。
如果你在建立 AI 應用時遇到困難或有任何問題,歡迎加入學習者及有經驗的開發者討論 MCP。這是一個支持性的社群,歡迎提出問題並自由分享知識。
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
您在建置過程中有產品回饋或遇到錯誤,請訪問
你有產品反饋或在開發過程中遇到錯誤,請造訪
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## 授權條款
## 授權
此儲存庫採用 MIT 授權條款。詳情請參閱 [LICENSE](../../LICENSE) 檔案。
本程式庫採用 MIT 授權。詳情請見 [LICENSE](../../LICENSE) 檔案。
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**
本文件由人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提高準確性,但請注意,自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為具權威性的資料來源。對於重要資訊,建議採用專業人工翻譯。我們對因使用此翻譯所引致的任何誤解或錯誤詮釋概不負責
**免責聲明**
本文件乃使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們力求準確,但請注意,自動翻譯可能包含錯誤或不準確之處。原始文件所用之母語版本應視為權威來源。對於重要資訊,建議採用專業人工翻譯。我們不對因使用本翻譯所產生之任何誤解或誤釋承擔責任
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
Loading…
Cancel
Save