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

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

Browse Source
update-translations
localizeflow[bot] 2 days ago
parent 017d4b0814
commit 7b710086c9
12 changed files with 1115 additions and 929 deletions
Show Stats Download Patch File Download Diff File

12
translations/ur/.co-op-translator.json
Unescape View File

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:15:55+00:00",
"translation_date": "2026-02-06T16:11:17+00:00",
"source_file": "AGENTS.md",
"language_code": "ur"
},
@ -516,11 +516,17 @@
"language_code": "ur"
},
"README.md": {
"original_hash": "490c83786552d7fab6390991517bef09",
"translation_date": "2026-01-29T17:43:12+00:00",
"original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-02-06T16:05:00+00:00",
"source_file": "README.md",
"language_code": "ur"
},
"Roadmap.md": {
"original_hash": "28bf6185fd7f27b62ddc210514366192",
"translation_date": "2026-02-06T16:09:30+00:00",
"source_file": "Roadmap.md",
"language_code": "ur"
},
"SECURITY.md": {
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
"translation_date": "2025-08-25T21:00:13+00:00",

370
translations/ur/AGENTS.md
Unescape View File

@ -2,27 +2,27 @@
## پروجیکٹ کا جائزہ
یہ ویب ڈویلپمنٹ کے بنیادی اصولوں کو سکھانے کے لیے ایک تعلیمی نصاب کا ذخیرہ ہے، جو ابتدائی افراد کے لیے بنایا گیا ہے۔ یہ نصاب مائیکروسافٹ کلاؤڈ ایڈووکیٹس کے ذریعے تیار کردہ 12 ہفتوں کا جامع کورس ہے، جس میں جاوا اسکرپٹ، CSS، اور HTML پر مشتمل 24 عملی اسباق شامل ہیں۔
یہ ویب ڈویلپمنٹ کے بنیادی اصولوں کو ابتدائی افراد کو سکھانے کے لیے ایک تعلیمی نصاب کا ذخیرہ ہے۔ نصاب ایک جامع 12 ہفتوں کا کورس ہے جو Microsoft Cloud Advocates نے تیار کیا ہے، جس میں JavaScript, CSS, اور HTML پر مشتمل 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 پروجیکٹس کے لیے)
- **عملی پروجیکٹس**: ٹیریریم، ٹائپنگ گیم، براؤزر توسیع، اسپیس گیم، بینکنگ ایپ، کوڈ ایڈیٹر، اور AI چیٹ اسسٹنٹ
- **انٹرایکٹو کوئزز**: 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 Actions (co-op-translator) کے ذریعے ترجمہ کا نظام
- Docsify کے ذریعہ دستاویزات فراہم کی جاتی ہیں اور PDF کے طور پر دستیاب ہیں
## سیٹ اپ کمانڈز
یہ ذخیرہ بنیادی طور پر تعلیمی مواد کے استعمال کے لیے ہے۔ مخصوص پروجیکٹس کے ساتھ کام کرنے کے لیے:
یہ ذخیرہ بنیادی طور پر تعلیمی مواد کے استعمال کے لیے ہے۔ مخصوص پروجیکٹس پر کام کرنے کے لیے:
### مرکزی ذخیرہ سیٹ اپ
@ -31,216 +31,216 @@ git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Quiz App سیٹ اپ (Vue 3 + Vite)
### کوئز ایپ سیٹ اپ (Vue 3 + Vite)
```bash
cd quiz-app
npm install
npm run dev # 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 (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 # اے پی آئی سرور شروع کریں
npm run lint # ای ایس لنٹ چلائیں
npm run format # پریٹیئر کے ساتھ فارمیٹ کریں
```
### 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)
### چیٹ پروجیکٹ (Python بیک اینڈ)
```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. **اپنی تبدیلیوں کے لیے ایک نئی برانچ بنائیں**
1. **ریپوزٹری کو فورک کریں** اپنے GitHub اکاؤنٹ میں
2. **اپنے فورک کو کلون کریں** لوکل مشین پر
3. **تبدیلیوں کے لیے نئی شاخ بنائیں**
4. سبق کے مواد یا کوڈ کی مثالوں میں تبدیلی کریں
5. متعلقہ پروجیکٹ ڈائریکٹریز میں کوڈ کی تبدیلیوں کی جانچ کریں
6. شراکت کے رہنما اصولوں کے مطابق پل ریکویسٹ جمع کروائیں
5. متعلقہ پروجیکٹس کے فولڈرز میں کوڈ کی تبدیلیوں کا ٹیسٹ کریں
6. شراکت کی ہدایات کے مطابق پل ریکویسٹ جمع کروائیں
### سیکھنے والوں کے لیے
1. ذخیرہ کو فورک کریں یا کلون کریں
2. سبق کی ڈائریکٹریز میں ترتیب وار جائیں
3. ہر سبق کے README فائلز پڑھیں
4. سبق سے پہلے کے کوئزز مکمل کریں https://ff-quizzes.netlify.app/web/ پر
5. سبق کے فولڈرز میں کوڈ کی مثالوں پر کام کریں
1. ریپوزٹری کو فورک یا کلون کریں
2. سبق کے فولڈرز میں ترتیب کے مطابق جائیں
3. ہر سبق کے README فائل پڑھیں
4.سبق سے پہلے کے کوئزز مکمل کریں https://ff-quizzes.netlify.app/web/
5. سبق کے فولڈرز میں کوڈ کی مثالیں آزمائیں
6. اسائنمنٹس اور چیلنجز مکمل کریں
7. سبق کے بعد کے کوئزز لیں
7.سبق کے بعد کے کوئزز دیں
### لائیو ترقی
- **دستاویزات**: روٹ میں `docsify serve` چلائیں (پورٹ 3000)
- **Quiz App**: quiz-app ڈائریکٹری میں `npm run dev` چلائیں
- **دستاویزات**: جڑ میں `docsify serve` چلائیں (پورٹ 3000)
- **کوئز ایپ**: `quiz-app` ڈائرکٹری میں `npm run dev` چلائیں
- **پروجیکٹس**: HTML پروجیکٹس کے لیے VS Code Live Server ایکسٹینشن استعمال کریں
- **API پروجیکٹس**: متعلقہ API ڈائریکٹریز میں `npm start` چلائیں
- **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 ہے
- ان ڈائریکٹریز میں جہاں package.json ہے `npm run lint` چلائیں
- مارک ڈاؤن لنکس کی تصدیق کریں
- کوڈ کی مثالوں کو براؤزر یا Node.js میں جانچیں
- ترجمے کی ساخت کو درست رکھیں
- براؤزر یا Node.js میں کوڈ کی مثالیں ٹیسٹ کریں
- ترجمے صحیح ساخت کے مطابق ہوں
## کوڈ اسٹائل کے رہنما اصول
## کوڈ اسٹائل کے اصول
### جاوا اسکرپٹ
### JavaScript
- جدید ES6+ نحو استعمال کریں
- پروجیکٹس میں فراہم کردہ معیاری ESLint کنفیگریشنز کی پیروی کریں
- جدید ES6+ اصول استعمال کریں
- پروجیکٹس میں دیئے گئے معیاری ESLint کنفیگریشنز فالو کریں
- تعلیمی وضاحت کے لیے بامعنی متغیر اور فنکشن نام استعمال کریں
- سیکھنے والوں کے لیے تصورات کی وضاحت کرنے والے تبصرے شامل کریں
- جہاں Prettier کنفیگر ہو، فارمیٹ کریں
- سیکھنے والوں کے لیے تصورات کی وضاحت کے لیے تبصرے شامل کریں
- جہاں پریٹیئر کنفیگرڈ ہو فرمیٹنگ کریں
### 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`
- **ایپ کی جگہ**: `/quiz-app`
- **آؤٹ پٹ کی جگہ**: `dist`
- **ورک فلو**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### دستاویزات PDF جنریشن
```bash
npm install # Install docsify-to-pdf
npm run convert # Generate PDF from docs
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` پروڈکشن بنڈلز بناتا ہے
- جامد پروجیکٹس: کوئی تعمیراتی مرحلہ نہیں، فائلز کو براہ راست فراہم کریں
ہر پروجیکٹ فولڈر کا اپنا بلڈ پروسیس ہوسکتا ہے:
- Vue پروجیکٹس: `npm run build` سے پروڈکشن بنڈلز بنتے ہیں
- سٹیٹک پروجیکٹس: کوئی بلڈ قدم نہیں، فائلیں براہ راست سروس کی جاتی ہیں
## پل ریکویسٹ کے رہنما اصول
## پل ریکویسٹ ہدایات
### عنوان کی شکل
### عنوان کا فارمٹ
تبدیلی کے علاقے کی وضاحت کرنے والے واضح، وضاحتی عنوانات استعمال کریں:
- `[Quiz-app] Add new quiz for lesson X`
- `[Lesson-3] Fix typo in terrarium project`
- `[Translation] Add Spanish translation for lesson 5`
- `[Docs] Update setup instructions`
واضح، وضاحتی عنوانات استعمال کریں جو تبدیلی کے شعبے کی نشاندہی کریں:
- `[Quiz-app] سبق X کے لیے نیا کوئز شامل کریں`
- `[Lesson-3] ٹیریریم پروجیکٹ میں ٹائپ کی اصلاح`
- `[Translation] سبق 5 کے لیے ہسپانوی ترجمہ شامل کریں`
- `[Docs] سیٹ اپ ہدایات کو اپ ڈیٹ کریں`
### مطلوبہ چیک
### ضروری چیکس
PR جمع کروانے سے پہلے:
1. **کوڈ کا معیار**:
- متاثرہ پروجیکٹ ڈائریکٹریز میں `npm run lint` چلائیں
- تمام linting غلطیوں اور انتباہات کو درست کریں
- متاثرہ پروجیکٹ فولڈرز میں `npm run lint` چلائیں
- تمام لِنٹ کی خرابیوں اور وارننگز کو درست کریں
2. **تعمیر کی تصدیق**:
2. **بلڈ کی تصدیق**:
- اگر قابل اطلاق ہو تو `npm run build` چلائیں
- کوئی تعمیراتی غلطی نہ ہو
- یقینی بنائیں کہ کوئی بلڈ کی خرابی نہیں
3. **لنک کی توثیق**:
- تمام مارک ڈاؤن لنکس کی جانچ کریں
- تصویر کے حوالہ جات درست کام کریں
3. **لنک کی تصدیق**:
- تمام مارک ڈاؤن لنکس کا ٹیسٹ کریں
- تصویری حوالہ جات کی جانچ کریں
4. **مواد کا جائزہ**:
- ہجے اور گرامر کے لیے پروف ریڈ کریں
- املا اور گرائمر کے لیے پروف ریڈنگ کریں
- کوڈ کی مثالیں درست اور تعلیمی ہوں
- ترجمے اصل معنی کو برقرار رکھیں
@ -248,35 +248,35 @@ PR جمع کروانے سے پہلے:
- Microsoft CLA سے اتفاق کریں (پہلے PR پر خودکار چیک)
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) کی پیروی کریں
- تفصیلی رہنما اصول کے لیے [CONTRIBUTING.md](./CONTRIBUTING.md) دیکھیں
- تفصیلی ہدایات کے لیے [CONTRIBUTING.md](./CONTRIBUTING.md) دیکھیں
- اگر قابل اطلاق ہو تو PR کی تفصیل میں مسئلے کے نمبر کا حوالہ دیں
### جائزہ لینے کا عمل
### جائزہ کا عمل
- PRs کو منتظمین اور کمیونٹی کے ذریعے جائزہ لیا جاتا ہے
- PRs کو مینٹینرز اور کمیونٹی کے ذریعے جائزہ لیا جاتا ہے
- تعلیمی وضاحت کو ترجیح دی جاتی ہے
- کوڈ کی مثالیں موجودہ بہترین طریقوں کی پیروی کریں
- ترجمے درستگی اور ثقافتی موزونیت کے لیے جائزہ لیے جاتے ہیں
- کوڈ کی مثالیں جدید بہترین طریقہ کار کی پیروی کریں
- ترجمے درستگی اور ثقافتی مطابقت کے لیے جائزہ لیں
## ترجمہ کا نظام
### خودکار ترجمہ
- GitHub Actions کے ساتھ co-op-translator ورک فلو استعمال کرتا ہے
- خودکار طور پر 50+ زبانوں میں ترجمہ کرتا ہے
- مرکزی ڈائریکٹریز میں سورس فائلز
- ترجمہ شدہ فائلز `translations/{language-code}/` ڈائریکٹریز میں
- 50 سے زائد زبانوں میں خود بخود ترجمہ کرتا ہے
- ماخذ فائلیں مرکزی ڈائریکٹریز میں
- ترجمہ شدہ فائلیں `translations/{language-code}/` فولڈرز میں
### دستی ترجمہ کی بہتری شامل کرنا
1. فائل کو `translations/{language-code}/` میں تلاش کریں
1. `translations/{language-code}/` فولڈر میں فائل تلاش کریں
2. ساخت کو برقرار رکھتے ہوئے بہتری کریں
3. کوڈ کی مثالیں فعال رہیں
4. کسی بھی مقامی کوئز مواد کی جانچ کریں
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 استعمال کرتا ہے)
**کوئز ایپ شروع نہیں ہوتی**:
- Node.js کا ورژن چیک کریں (v14+ سفارش کی جاتی ہے)
- `node_modules` اور `package-lock.json` کو حذف کریں، پھر `npm install` دوہرا کر چلائیں
- پورٹ تنازعات کے لیے چیک کریں (ڈیفالٹ: Vite پورٹ 5173 استعمال کرتا ہے)
**API سرور شروع نہیں ہو رہا**:
- Node.js ورژن کم از کم ضروریات کو پورا کرتا ہے (node >=10)
- چیک کریں کہ پورٹ پہلے سے استعمال میں ہے
- تمام انحصارات `npm install` کے ساتھ انسٹال کریں
**API سرور شروع نہیں ہوتا**:
- Node.js کا ورژن کم از کم 10 ہونا چاہیے
- چیک کریں کہ پورٹ پہلے سے استعمال میں نہیں ہے
- یقینی بنائیں کہ تمام انحصار `npm install` سے انسٹال ہوئے ہیں
**براؤزر ایکسٹینشن لوڈ نہیں ہو رہا**:
- تصدیق کریں کہ manifest.json صحیح طور پر فارمیٹ کیا گیا ہے
- براؤزر کنسول میں غلطیوں کو چیک کریں
**براؤزر ایکسٹینشن لوڈ نہیں ہوتی**:
- manifest.json صحیح شکل میں ہے یہ تصدیق کریں
- براؤزر کے کنسول میں ایررز چیک کریں
- براؤزر مخصوص ایکسٹینشن انسٹالیشن ہدایات پر عمل کریں
**Python chat پروجیکٹ کے مسائل**:
- تصدیق کریں کہ OpenAI پیکیج انسٹال ہے: `pip install openai`
- GITHUB_TOKEN ماحول متغیر سیٹ کریں
- GitHub Models تک رسائی کی اجازت چیک کریں
**Python چیٹ پروجیکٹ کے مسائل**:
- OpenAI پیکیج انسٹال کریں: `pip install openai`
- GITHUB_TOKEN ماحول متغیر سیٹ ہے یہ چیک کریں
- GitHub ماڈلز کی رسائی کی اجازتوں کا جائزہ لیں
**Docsify دستاویزات فراہم نہیں کر رہا**:
- docsify-cli کو گلوبلی انسٹال کریں: `npm install -g docsify-cli`
- ذخیرہ کی روٹ ڈائریکٹری سے چلائیں
- تصدیق کریں کہ `docs/_sidebar.md` موجود ہے
- docsify-cli عالمی طور پر انسٹال کریں: `npm install -g docsify-cli`
- ریپوزٹری کی جڑ سے چلائیں
- چیک کریں کہ `docs/_sidebar.md` موجود ہے
### ترقیاتی ماحول کے نکات
### ترقیاتی ماحول کے مشورے
- HTML پروجیکٹس کے لیے VS Code کے ساتھ Live Server ایکسٹینشن استعمال کریں
- مستقل فارمیٹنگ کے لیے ESLint اور Prettier ایکسٹینشنز انسٹال کریں
- جاوا اسکرپٹ کی ڈیبگنگ کے لیے براؤزر DevTools استعمال کریں
- HTML پروجیکٹس کے لیے VS Code لائیو سرور ایکسٹینشن استعمال کریں
- مستقل فارمیٹنگ کے لیے ESLint اور Prettier ایکسٹینشن انسٹال کریں
- JavaScript کی ڈی بگنگ کے لیے براؤزر DevTools استعمال کریں
- Vue پروجیکٹس کے لیے Vue DevTools براؤزر ایکسٹینشن انسٹال کریں
### کارکردگی کے تحفظات
### کارکردگی کے معاملات
- ترجمہ شدہ فائلز کی بڑی تعداد (50+ زبانیں) کا مطلب ہے کہ مکمل کلونز بڑے ہیں
- اگر صرف مواد پر کام کر رہے ہیں تو شالو کلون استعمال کریں: `git clone --depth 1`
- انگریزی مواد پر کام کرتے وقت ترجمے کو تلاش سے خارج کریں
- پہلی بار چلانے پر تعمیراتی عمل سست ہو سکتا ہے (npm install، Vite build)
- ترجمہ شدہ فائلوں کی بڑی مقدار (50+ زبانیں) کی وجہ سے مکمل کلونز بڑے ہوتے ہیں
- صرف مواد پر کام کرتے ہوئے shallow clone استعمال کریں: `git clone --depth 1`
- انگریزی مواد پر کام کرتے ہوئے ترجموں کو تلاش سے خارج کریں
- بلڈ کے عمل پہلے رن میں سست ہو سکتے ہیں (npm install, Vite build)
## سیکیورٹی تحفظات
## سیکیورٹی کے پہلو
### ماحول متغیرات
### ماحول کے متغیرات
- API کیز کو کبھی بھی ذخیرہ میں شامل نہ کریں
- `.env` فائلز استعمال کریں (پہلے سے `.gitignore` میں شامل ہیں)
- پروجیکٹ READMEs میں مطلوبہ ماحول متغیرات کی دستاویز کریں
- API کیز کبھی بھی ریپوزٹری میں کمیٹ نہ کریں
- `.env` فائلیں استعمال کریں (جو پہلے سے `.gitignore` میں ہیں)
- پروجیکٹ کی READMEs میں مطلوبہ ماحول کے متغیرات دستاویز کریں
### Python پروجیکٹس
- ورچوئل ماحول استعمال کریں: `python -m venv venv`
- انحصارات کو اپ ڈیٹ رکھیں
- GitHub ٹوکنز کو کم سے کم مطلوبہ اجازت دیں
- انحصار کو تازہ ترین رکھیں
- GitHub ٹوکنز کے لیے کم از کم ضروری اجازتیں رکھیں
### GitHub Models تک رسائی
### GitHub ماڈلز کی رسائی
- GitHub Models کے لیے Personal Access Tokens (PAT) ضروری ہیں
- ٹوکنز کو ماحول متغیرات کے طور پر محفوظ کریں
- ٹوکنز یا اسناد کو کبھی بھی ذخیرہ میں شامل نہ کریں
- GitHub ماڈلز کے لیے پرسنل ایکسس ٹوکن (PAT) ضروری ہے
- ٹوکنز ماحول کے متغیرات کے طور پر محفوظ کریں
- ٹوکنز یا اسناد کو کبھی کمیٹ نہ کریں
## اضافی نوٹس
### ہدف سامعین
### ہدف ناظرین
- ویب ڈویلپمنٹ کے مکمل ابتدائی افراد
- ویب ڈویلپمنٹ کے مکمل نو آموز
- طلباء اور خود سیکھنے والے
- اس نصاب کو کلاس رومز میں استعمال کرنے والے اساتذہ
- مواد رسائی اور مہارت کی تدریجی تعمیر کے لیے ڈیزائن کیا گیا ہے
- نصاب کو کلاس روم میں استعمال کرنے والے اساتذہ
- مواد قابل رسائی اور تدریجی مہارت کی تعمیر کے لیے ڈیزائن کیا گیا ہے
### تعلیمی فلسفہ
- پروجیکٹ پر مبنی سیکھنے کا طریقہ
- پروجیکٹ کی بنیاد پر سیکھنے کا طریقہ
- بار بار علم کی جانچ (کوئزز)
- عملی کوڈنگ مشقیں
- حقیقی دنیا کے اطلاق کی مثالیں
- فریم ورک سے پہلے بنیادی اصولوں پر توجہ
- عملی کوڈنگ کی مشقیں
- حقیقی دنیا کی ایپلیکیشن کی مثالیں
- فریم ورکس سے پہلے بنیادی اصولوں پر توجہ
### ذخیرہ کی دیکھ بھال
- سیکھنے والوں اور شراکت داروں کی فعال کمیونٹی
- انحصارات اور مواد کی باقاعدہ اپ ڈیٹس
- منتظمین کے ذریعے مسائل اور مباحثوں کی نگرانی
- GitHub Actions کے ذریعے ترجمہ کی اپ ڈیٹس خودکار
- سرگرم کمیونٹی شامل سیکھنے والوں اور تعاون کرنے والوں کی
- انحصار اور مواد کی باقاعدہ اپ ڈیٹس
- مسائل اور مباحثے مینٹینرز کی زیر نگرانی
- ترجمہ کی اپ ڈیٹس GitHub Actions کے ذریعے خودکار
### متعلقہ وسائل
- [Microsoft Learn modules](https://docs.microsoft.com/learn/)
- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) سیکھنے والوں کے لیے تجویز کردہ
- اضافی کورسز: Generative AI، Data Science، ML، IoT نصاب دستیاب ہیں
- اضافی کورسز: جنریٹیو AI, ڈیٹا سائنس, ML, IoT نصاب دستیاب
### مخصوص پروجیکٹس کے ساتھ کام کرنا
انفرادی پروجیکٹس پر تفصیلی ہدایات کے لیے، 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 پر مبنی گیم ڈویلپمنٹ
- `6-space-game/README.md` - کینوس پر مبنی گیم ڈویلپمنٹ
- `9-chat-project/README.md` - AI چیٹ اسسٹنٹ پروجیکٹ
### 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 -->

294
translations/ur/README.md
Unescape View File

@ -2,7 +2,7 @@
[![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)
[![PRs Welcome](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/)
@ -10,258 +10,256 @@
[![Microsoft Foundry Discord](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 کمیونٹی میں شامل ہوں
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
ان وسائل کو استعمال کرنے کے لیے یہ اقدامات کریں:
1. **ریپوزیٹری کو فورک کریں**: کلک کریں [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **ریپوزیٹری کلون کریں**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Azure AI Foundry Discord میں شامل ہوں اور ماہرین و ساتھی ڈویلپرز سے ملاقات کریں**](https://discord.com/invite/ByRwuEEgH4)
ان وسائل کو استعمال شروع کرنے کے لیے یہ اقدامات کریں:
1. **ریپوزٹری کو فورک کریں**: کلک کریں [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **ریپوزٹری کلون کریں**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Azure AI Foundry Discord میں شامل ہوں اور ماہرین اور دیگر ڈویلپرز سے ملاقات کریں**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 کثیراللسانی معاونت
### 🌐 کثیر لسانی معاونت
#### GitHub Action کے ذریعے سپورٹ کی گئی (خودکار اور ہمیشہ جدید)
#### GitHub Action کے ذریعے سپورٹ کیا گیا (خودکار اور ہمیشہ تازہ ترین)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../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)
> **مقامی طور پر کلون کرنا پسند کریں؟**
> **کیا آپ کو مقامی طور پر کلون کرنا پسند ہے؟**
> یہ ریپوزیٹری 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)**
**اگر آپ چاہتے ہیں کہ اضافی ترجمہ کی زبانوں کی حمایت کی جائے تو یہاں دیکھیں [here](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)
#### 🧑‍🎓 _کیا آپ طالب علم ہیں؟_
وزٹ کریں [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) جہاں آپ کو ابتدائی وسائل، طالب علم پیک، اور مفت سرٹیفیکیٹ واؤچر حاصل کرنے کے طریقے ملیں گے۔ یہ وہ صفحہ ہے جسے آپ کو بک مارک کرنا چاہیے اور وقتاً فوقتاً چیک کرنا چاہیے کیونکہ ہم ہر مہینے مواد تبدیل کرتے ہیں۔
جائیں [**Student Hub صفحہ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) جہاں آپ کو مبتدئین کے وسائل، طالب علم پیکز اور یہاں تک کہ مفت سرٹیفکیٹ ووچر حاصل کرنے کے طریقے ملیں گے۔ یہ وہ صفحہ ہے جسے آپ بُک مارک کرنا چاہیں گے اور وقتاً فوقتاً چیک کرنا چاہیں گے کیونکہ ہم ہر مہینے مواد تبدیل کرتے ہیں۔
### 📣 اعلان - نئے GitHub Copilot ایجنٹ موڈ چیلنجز مکمل کرنے کے لیے!
### 📣 اعلان - نئے 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 اسسٹنٹ پروجیکٹ ابھی شامل کیا گیا ہے، اسے دیکھیں [project](./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)
- بنیادی سے لے کر RAG تک ہر چیز کے لیے اسباق۔
- GenAI اور ہمارے کمپینین ایپ کے استعمال سے تاریخی کرداروں کے ساتھ بات چیت کریں۔
- مزے دار اور دلچسپ بیانیہ، آپ وقت کا سفر کریں گے!
- اسباق بنیادی سے لے کر RAG تک سب کچھ کور کرتے ہیں۔
- جن AI اور ہمارے معاون ایپ کے ذریعے تاریخی کرداروں کے ساتھ بات چیت کریں۔
- خوشگوار اور دلچسپ بیانیہ، آپ وقت میں سفر کریں گے!
![character](../../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** بٹن کو کلک کر کے کر سکتے ہیں۔ یہ آپ کے GitHub اکاؤنٹ میں نصاب کی ایک کاپی کے ساتھ نئی ریپوزٹری بنائے گا۔
مندرجہ ذیل اقدامات کی پیروی کریں:
1. **ریپوزیٹری کو فورک کریں**: اس صفحہ کے اوپر دائیں کونے میں موجود "Fork" بٹن پر کلک کریں۔
2. **ریپوزیٹری کلون کریں**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
یہ اقدامات کریں:
1. **ریپوزٹری کو فورک کریں:** اس صفحے کے اوپر دائیں کونے میں موجود "Fork" بٹن پر کلک کریں۔
2. **ریپوزٹری کو کلون کریں:** `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Codespace میں نصاب چلانا
#### نصاب کو 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) کو بطور ایڈیٹر استعمال کریں، جس میں بلٹ ان [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)۔
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 سے بدل کر جو آپ نے ابھی کاپی کیا ہے:
پھر، [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 میں فولڈر کھولیں۔ آپ یہ **File** > **Open Folder** پر کلک کرکے اور وہ فولڈر منتخب کرکے کرسکتے ہیں جسے آپ نے ابھی کلون کیا ہے۔
2. Visual Studio Code میں فولڈر کھولیں۔ آپ یہ **File** > **Open Folder** پر کلک کرکے اور اس فولڈر کو منتخب کرکے کر سکتے ہیں جسے آپ نے ابھی کلون کیا ہے۔
> سفارش کردہ Visual Studio Code ایکسٹینشنز:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code کے اندر HTML صفحات کا پیش منظر دیکھنے کے لیے
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - کوڈ تیزی سے لکھنے میں مدد کے لیے
> 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) - آپ کی کوڈ لکھنے کی رفتار کو تیز کرنے میں مدد کے لیے
## 📂 ہر سبق میں شامل ہیں:
## 📂 ہر سبق میں شامل ہے:
- اختیاری اسکیچنوٹ
- اختیاری اضافی ویڈیو
- سبق سے پہلے وارم اپ کوئز
- تحریری سبق
- پروجیکٹ پر مبنی اسباق کے لیے، پروجیکٹ بنانے کے طریقہ کار پر مرحلہ وار رہنمائی
- علم کی جانچ
- ایک چیلنج
- اضافی مطالعہ
- اسباق کے بعد کا کوئز [post-lesson quiz](https://ff-quizzes.netlify.app/web/)
- اختیاری سکچ نوٹ
- اختیاری معاون ویڈیو
- سبق سے پہلے گرم اپ کوئز
- تحریری سبق
- پراجیکٹ پر مبنی اسباق کے لیے، پروجیکٹ بنانے کے مرحلہ وار رہنما
- معلومات کی جانچ
- ایک چیلنج
- معاون مطالعہ
- اسائنمنٹ
- [سبق کے بعد کا کوئز](https://ff-quizzes.netlify.app/web/)
> **کوئزز کے بارے میں ایک نوٹ**: تمام کوئزز Quiz-app فولڈر میں موجود ہیں، کل 48 کوئزز ہر ایک میں تین سوالات شامل ہیں۔ یہ [یہاں](https://ff-quizzes.netlify.app/web/) دستیاب ہیں۔ کوئز ایپ کو لوکل طور پر چلایا جا سکتا ہے یا Azure پر ڈپلائے کیا جا سکتا ہے؛ ہدایات کے لیے `quiz-app` فولڈر میں دی گئی ہدایات پر عمل کریں۔
> **کوئزز کے بارے میں ایک نوٹ**: تمام کوئزز Quiz-app فولڈر میں شامل ہیں، کل 48 کوئزز ہر ایک میں تین سوالات کے ساتھ۔ یہ [یہاں](https://ff-quizzes.netlify.app/web/) دستیاب ہیں، کوئز ایپ کو مقامی طور پر چلایا جا سکتا ہے یا Azure پر تعینات کیا جا سکتا ہے؛ `quiz-app` فولڈر میں دی گئی ہدایات پر عمل کریں۔
## 🗃️ اسباق
| | پراجیکٹ کا نام | سکھائے گئے تصورات | تعلیمی مقاصد | منسلک سبق | مصنف |
| | پروجیکٹ کا نام | پڑھائے گئے تصورات | تعلیمی مقاصد | متعلقہ سبق | مصنف |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | شروع کرنا | پروگرامنگ اور ٹولز کا تعارف | اکثر پروگرامنگ زبانوں کی بنیادی بنیادیں سیکھیں اور وہ سافٹ ویئر جو ماہر ڈویلپرز کو ان کے کام میں مدد دیتا ہے | [پروگرامنگ زبانوں اور ٹولز کا تعارف](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | شروع کرنا | GitHub کے بنیادی اصول، ٹیم کے ساتھ کام کرنا | اپنے پراجیکٹ میں GitHub کا استعمال کیسے کریں، دوسروں کے ساتھ کوڈ بیس پر تعاون کیسے کریں | [GitHub کا تعارف](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | شروع کرنا | قابل رسائی ہونا | ویب کی قابل رسائی کی بنیادی باتیں سیکھیں | [قابل رسائی اصول](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS بنیادیات | JavaScript ڈیٹا کی اقسام | JavaScript ڈیٹا کی اقسام کی بنیادی باتیں | [ڈیٹا کی اقسام](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS بنیادیات | فنکشنز اور میتھڈز | اپلیکیشن کی منطق کے بہاؤ کو منظم کرنے کے لیے فنکشنز اور میتھڈز کے بارے میں سیکھیں | [فنکشنز اور میتھڈز](./2-js-basics/2-functions-methods/README.md) | Jasmine 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 |
## 🏫 تعلیم و تدریس
ہمارا نصاب دو اہم تعلیمی اصولوں کو ذہن میں رکھتے ہوئے تیار کیا گیا ہے:
* پراجیکٹ پر مبنی سیکھنا
* کثرت سے کوئزز
یہ پروگرام جاوا اسکرپٹ، HTML، اور CSS کی بنیادیں سکھاتا ہے، نیز آج کے ویب ڈویلپرز کے استعمال کردہ جدید ٹولز اور تکنیکس بھی۔ طلباء کو موقع ملے گا کہ وہ ہاتھوں ہاتھ تجربہ حاصل کریں جیسے کہ ٹائپنگ گیم، ورچوئل ٹیریریم، ماحول دوست براؤزر ایکسٹینشن، اسپیس-انوائیڈر طرز کا گیم، اور کاروباروں کے لیے بینکنگ ایپ بنانا۔ سیریز کے اختتام پر طلباء کو ویب ڈیویلپمنٹ کی مضبوط سمجھ حاصل ہو جائے گی۔
> 🎓 آپ اس نصاب کے کچھ ابتدائی اسباق کو Microsoft Learn پر ایک [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)" ویڈیو ٹیوٹوریلز کی کلیکشن سے ایک ویڈیو کے ساتھ جوڑے گئے ہیں، جن میں سے کچھ مصنفین نے اس نصاب میں حصہ لیا ہے۔
اس کے علاوہ، کلاس سے پہلے ایک کم داؤ کا کوئز طلباء کی نیت کو کسی موضوع سیکھنے کی طرف مرکوز کرتا ہے، جبکہ کلاس کے بعد دوسرا کوئز مزید یادداشت کو یقینی بناتا ہے۔ یہ نصاب لچکدار اور مزیدار ہونے کے لیے ڈیزائن کیا گیا ہے اور اسے مکمل یا جزوی طور پر لیا جا سکتا ہے۔ پراجیکٹس چھوٹے سے شروع ہوکر 12 ہفتوں کے دورانیے کے اختتام تک بتدریج پیچیدہ ہوتے جاتے ہیں۔
اگرچہ ہم نے جان بوجھ کر جاوا اسکرپٹ فریم ورکس متعارف نہیں کروائے تاکہ ایک ویب ڈویلپر کے طور پر ابتدائی سکلز پر توجہ دی جا سکے، اس نصاب کو مکمل کرنے کے لیے اگلا اچھا قدم 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) رہنما خطوط ملاحظہ کریں۔ ہم آپ کی تعمیری فیڈ بیک کا خیرمقدم کرتے ہیں!
## 🧭 آفلائن رسائی
آپ [Docsify](https://docsify.js.org/#/) کا استعمال کرکے اس دستاویز کو آف لائن چلا سکتے ہیں۔ اس ریپو کو فورک کریں، اپنے مقامی کمپیوٹر پر [Docsify انسٹال کریں](https://docsify.js.org/#/quickstart)، اور پھر اس ریپو کے روٹ فولڈر میں `docsify serve` ٹائپ کریں۔ ویب سائٹ آپ کی لوکل ہوسٹ پر پورٹ 3000 پر دستیاب ہو جائے گی: `localhost:3000`۔
| 01 | شروعات | پروگرامنگ اور ٹولز کا تعارف | زیادہ تر پروگرامنگ زبانوں کی بنیادی بنیادوں کا سیکھنا اور ایسے سافٹ ویئر کے بارے میں جاننا جو پیشہ ورانہ ڈویلپرز کو ان کا کام کرنے میں مدد دیتا ہے | [پروگرامنگ زبانوں اور ٹولز کا تعارف](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | شروعات | GitHub کی بنیادی باتیں، ٹیم کے ساتھ کام شامل ہے | اپنے پروجیکٹ میں GitHub استعمال کرنا اور دوسروں کے ساتھ کوڈ بیس پر تعاون کرنا | [GitHub کا تعارف](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | شروعات | قابل رسائی | ویب کی رسائی کے بنیادی اصول سیکھیں | [رسائی کے بنیادی اصول](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS بنیادیات | جاوا اسکرپٹ ڈیٹا کی اقسام | جاوا اسکرپٹ ڈیٹا کی اقسام کے بنیادی اصول | [ڈیٹا کی اقسام](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS بنیادیات | فنکشنز اور میتھڈز | ایپلیکیشن کے منطق کے بہاؤ کو کنٹرول کرنے کے لیے فنکشنز اور میتھڈز کے بارے میں سیکھیں | [فنکشنز اور میتھڈز](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS بنیادیات | JS میں فیصلے کرنا | اپنی کوڈ میں حالات بنانے کے لیے فیصلہ سازی کے طریقے سیکھیں | [فیصلے کرنا](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS بنیادیات | Arrays اور Loops | جاوا اسکرپٹ میں ڈیٹا کے ساتھ کام کرنے کے لیے Arrays اور Loops استعمال کریں | [Arrays اور Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML پرعملی اطلاق | آن لائن Terrarium بنانے کے لیے HTML تیار کریں، خاص طور پر لے آؤٹ بنانے پر توجہ دیں | [HTML کا تعارف](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS پرعملی اطلاق | آن لائن Terrarium کے لیے CSS تیار کریں، CSS کے بنیادی اصول اور صفحہ کو Responsive بنانے پر توجہ دیں | [CSS کا تعارف](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | جاوا اسکرپٹ کلوزرز، DOM تبدیلی | جاوا اسکرپٹ تیار کریں تاکہ Terrarium کو drag/drop انٹرفیس کے طور پر کام کرے، کلوزرز اور DOM تبدیلی پر توجہ دیں | [جاوا اسکرپٹ کلوزرز، DOM تبدیلی](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | ٹائپنگ گیم بنانا | کی بورڈ ایونٹس کے ذریعے اپنی جاوا اسکرپٹ ایپ کے منطق کو چلانا سیکھیں | [ایونٹ ڈرائیو پروگرامنگ](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | براؤزرز کے ساتھ کام | براؤزرز کیسے کام کرتے ہیں، ان کی تاریخ، اور براؤزر ایکسٹینشن کے لیے پہلے عناصر کیسے اسکافولڈ کیے جاتے ہیں سیکھیں | [براؤزرز کے بارے میں](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | فارم بنانا، API کال کرنا اور لوکل اسٹوریج میں متغیرات محفوظ کرنا | اپنے براؤزر ایکسٹینشن کے جاوا اسکرپٹ عناصر تیار کریں تاکہ API کال کریں اور لوکل اسٹوریج میں محفوظ متغیرات استعمال کریں | [APIs، فارم اور لوکل اسٹوریج](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | براؤزر کے پس منظر کے عمل، ویب کی کارکردگی | ایکسٹینشن کے آئیکن کا انتظام کرنے کے لیے براؤزر کے پس منظر کے عمل استعمال کریں؛ ویب کی کارکردگی اور اسے بہتر بنانے کے طریقے سیکھیں | [پس منظر کے کام اور کارکردگی](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | جاوا اسکرپٹ کے ساتھ آگے بڑھتا ہوا گیم ڈیولپمنٹ | 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) | اسکرین پر عناصر کو حرکت دینا | کارٹیسیئن کوآرڈینیٹس اور کینوس 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 |
## 🏫 تدریسی طریقہ کار
ہمارا نصاب دو اہم تعلیمی اصولوں کے ساتھ ڈیزائن کیا گیا ہے:
* پروجیکٹ پر مبنی تعلیم
* بار بار کوئزز
یہ پروگرام جاوا اسکرپٹ، HTML، اور CSS کی بنیادی باتیں سکھاتا ہے، نیز آج کے ویب ڈویلپرز کے لیے استعمال ہونے والے جدید ترین ٹولز اور تکنیکس بھی۔ طلباء کو ٹائپنگ گیم، ورچوئل ٹیریریم، ماحول دوست براؤزر ایکسٹینشن، اسپیس انویدر طرز کا گیم، اور کاروباری بنکنگ ایپ بنانے کا عملی تجربہ حاصل ہوگا۔ سیریز کے اختتام تک، طلباء کو ویب ڈیولپمنٹ کی مضبوط سمجھ حاصل ہوگی۔
> 🎓 آپ اس نصاب کے پہلے چند اسباق کو Microsoft Learn پر ایک [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)" ویڈیو ٹیوٹوریلز کا ایک ویڈیو بھی شامل ہے، جن میں سے بعض مصنفین نے اس نصاب میں حصہ ڈالا ہے۔
اس کے علاوہ، کلاس سے پہلے ایک کم دباؤ والا کوئز طالب علم کے سیکھنے کے ارادے کو ترتیب دیتا ہے، جبکہ کلاس کے بعد دوسرا کوئز اضافی یادداشت کو یقینی بناتا ہے۔ یہ نصاب لچکدار اور خوشگوار بنانے کے لیے ڈیزائن کیا گیا ہے اور اسے پورے یا جزوی طور پر لیا جا سکتا ہے۔ پروجیکٹس چھوٹے شروع ہوتے ہیں اور 12 ہفتوں کے چکر کے اختتام تک زیادہ پیچیدہ ہو جاتے ہیں۔
جبکہ ہم نے جاوا اسکرپٹ فریم ورک متعارف کرانے سے جان بوجھ کر گریز کیا ہے تاکہ فریم ورک اپنانے سے پہلے ویب ڈویلپر کے طور پر بنیادی مہارتوں پر توجہ دی جا سکے، اس نصاب کو مکمل کرنے کے بعد اگلا اچھا قدم Node.js کے بارے میں سیکھنا ہو گا جس کے لیے ویڈیوز کا ایک اور مجموعہ ہے: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"۔
> ہمارے [Conduct Code](CODE_OF_CONDUCT.md) اور [Contributing](CONTRIBUTING.md) رہنما خطوط دیکھیں۔ ہم آپ کی تعمیری رائے کا خیرمقدم کرتے ہیں!
## 🧭 آف لائن رسائی
آپ اس دستاویز کو آف لائن [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) کے ذریعے کیا گیا ہے۔ اگرچہ ہم درستگی کے لیے کوشاں ہیں، براہ کرم نوٹ کریں کہ خودکار ترجمے میں غلطیاں یا بے دقتیاں ہو سکتی ہیں۔ اصلی دستاویز اپنی مادری زبان میں معتبر ماخذ سمجھی جانی چاہیے۔ اہم معلومات کے لیے پیشہ ور انسانی ترجمہ تجویز کیا جاتا ہے۔ اس ترجمہ کے استعمال سے ہونے والی کسی بھی غلط فہمی یا غلط تشریح کی ذمہ داری ہم پر نہیں ہوگی۔
**بیانِ اخطار**:
اس دستاویز کا ترجمہ مصنوعی ذہانت کی ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کے ذریعے کیا گیا ہے۔ اگرچہ ہم درستگی کے لئے کوشاں ہیں، براہ کرم نوٹ کریں کہ خودکار تراجم میں غلطیاں یا عدم درستیاں ہوسکتی ہیں۔ اصل دستاویز کو اس کی مادری زبان میں ہی مستند ذریعہ سمجھا جانا چاہئے۔ اہم معلومات کے لئے پیشہ ورانہ انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمہ کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کی صورت میں ہم ذمہ دار نہیں ہوں گے۔
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

53
translations/ur/Roadmap.md
Unescape View File

@ -0,0 +1,53 @@
# مائیکروسافٹ کے Web-Dev-For-Beginners ریپوزٹری کے لیے روڈ میپ
**یہ ریپوزٹری ویب ڈیولپمنٹ کی بنیادی باتیں سیکھنے کے لیے ایک روڈ میپ فراہم کرتی ہے جس میں خاص توجہ جاوا اسکرپٹ، ایچ ٹی ایم ایل، اور سی ایس ایس پر ہے۔ نصاب لچکدار ہے اور اسے پورے یا جزوی طور پر لیا جا سکتا ہے، 24 اسباق پر مشتمل ہے جو 12 ہفتوں میں تقسیم کیے گئے ہیں۔**
## اہم سنگ میل
* **ہفتے 1-3:**
* پروگرامنگ زبانوں اور ضروریٹولز کا تعارف
* گٹ ہب کی بنیادی باتیں
* رسائی پذیری
* جاوا اسکرپٹ کی بنیادی باتیں: ڈیٹا ٹائپس، فنکشنز اور طریقے
* جاوا اسکرپٹ کے ساتھ فیصلے کرنا
* **ہفتے 4-6:**
* ایرریز اور لوپس
* ٹیریریم: ایچ ٹی ایم ایل عملی طور پر
* سی ایس ایس عملی طور پر
* جاوا اسکرپٹ کلوجرز
* DOM کی تبدیلی
* **ہفتے 7-9:**
* ٹائپنگ گیم: واقعہ پر مبنی پروگرامنگ
* گرین براؤزر ایکسٹینشن: براؤزرز کے ساتھ کام کرنا
* ایک فارم بنانا، API کال کرنا اور لوکل اسٹوریج میں ویریبلز ذخیرہ کرنا
* براؤزر میں پس منظر کے عمل
* ویب کارکردگی
* **ہفتے 10-12:**
* اسپیس گیم: جاوا اسکرپٹ کے ساتھ زیادہ ترقی یافتہ گیم ڈیولپمنٹ
* کینوس پر ڈرائنگ کرنا
* اسکرین پر عناصر کو حرکت دینا
* ٹکراؤ کا پتہ لگانا
* اسکور رکھنا، گیم ختم کرنا اور دوبارہ شروع کرنا
* بینکنگ ایپ: ویب ایپ میں ایچ ٹی ایم ایل ٹیمپلیٹس اور روٹس
* لاگ ان اور رجسٹریشن فارم بنانا
* ڈیٹا کو حاصل کرنے اور استعمال کرنے کے طریقے
* اسٹیٹ مینجمنٹ کے تصورات
## سیکھنے کے نتائج
**اس روڈ میپ کو مکمل کرنے کے بعد، طلباء ٹائپنگ گیم، مجازی ٹیریریم، ماحول دوست براؤزر ایکسٹینشن، اسپیس انویڈر طرز کا گیم، اور کاروباروں کے لیے بینکنگ ایپ بنانے کا عملی تجربہ حاصل کریں گے۔ وہ ویب ڈیولپمنٹ کی بنیادی باتوں کی مضبوط سمجھ بھی تیار کریں گے۔**
## اضافی وسائل
* یہ ریپوزٹری مزید سیکھنے کے لیے متعدد وسائل فراہم کرتی ہے، جن میں ٹیوٹوریلز، کوڈ کی مثالیں، اور چیلنجز شامل ہیں۔
* مائیکروسافٹ لرن پلیٹ فارم مختلف ویب ڈیولپمنٹ کورسز اور سیکھنے کے راستے پیش کرتا ہے۔
* آن لائن کمیونٹیز جیسے اسٹیک اوور فلو اور MDN ویب ڈاکس ویب ڈیولپرز کے لیے قیمتی مدد اور وسائل مہیا کرتے ہیں۔
**امید ہے یہ روڈ میپ آپ کے ویب ڈیولپمنٹ کے سفر میں مددگار ثابت ہوگا!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**دستخطی بیان**:
اس دستاویز کا ترجمہ AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کے ذریعے کیا گیا ہے۔ اگرچہ ہم درستگی کے لیے کوشاں ہیں، تاہم براہ کرم نوٹ کریں کہ خودکار ترجمے میں غلطیاں یا عدم صحت ہو سکتی ہے۔ اصل دستاویز جو اس کی مادری زبان میں ہے، اسے مستند ماخذ سمجھا جانا چاہیے۔ اہم معلومات کے لیے پیشہ ور انسانی ترجمہ تجویز کیا جاتا ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کی ذمہ داری ہم پر نہیں ہوگی۔
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

12
translations/zh-CN/.co-op-translator.json
Unescape View File

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:16:34+00:00",
"translation_date": "2026-02-06T16:12:19+00:00",
"source_file": "AGENTS.md",
"language_code": "zh-CN"
},
@ -516,11 +516,17 @@
"language_code": "zh-CN"
},
"README.md": {
"original_hash": "490c83786552d7fab6390991517bef09",
"translation_date": "2026-01-29T17:44:53+00:00",
"original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-02-06T16:06:51+00:00",
"source_file": "README.md",
"language_code": "zh-CN"
},
"Roadmap.md": {
"original_hash": "28bf6185fd7f27b62ddc210514366192",
"translation_date": "2026-02-06T16:09:41+00:00",
"source_file": "Roadmap.md",
"language_code": "zh-CN"
},
"SECURITY.md": {
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
"translation_date": "2025-08-23T22:21:13+00:00",

400
translations/zh-CN/AGENTS.md
Unescape View File

@ -2,53 +2,53 @@
## 项目概述
这是一个用于教授初学者网页开发基础知识的教育课程库。该课程是由微软云倡导者开发的全面12周课程，包含24节动手实践课程，涵盖JavaScript、CSS和HTML。
这是一个面向初学者教授 Web 开发基础的教育课程仓库。该课程是由微软云倡导者开发的一个综合性 12 周课程，包含 24 个涵盖 JavaScript、CSS 和 HTML 的实践课题。
### 主要组成部分
### 关键组成部分
- **教育内容**：24节结构化课程，按项目模块组织
- **实践项目**：生态瓶、打字游戏、浏览器扩展、太空游戏、银行应用、代码编辑器和AI聊天助手
- **互动测验**：48个测验，每个测验包含3个问题（课前/课后评估）
- **多语言支持**：通过GitHub Actions实现50多种语言的自动翻译
- **技术栈**：HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（用于AI项目）
- **教育内容**：24 节结构化课程，按项目模块组织
- **实践项目**：生态缸、打字游戏、浏览器扩展、太空游戏、银行应用、代码编辑器和 AI 聊天助手
- **互动测验**：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
- 以课程为基础结构的教育仓库
- 每节课文件夹包含 README、代码示例和解决方案
- 独立项目分别存放在单独目录（quiz-app，各种课程项目）
- 使用 GitHub Actions（co-op-translator）进行翻译系统
- 文档通过 Docsify 提供，并可生成 PDF
## 设置命令
## 安装命令
此资源库主要用于教育内容的学习。对于具体项目的操作：
此仓库主要用于教育内容的学习。若需操作特定项目：
### 主资源库设置
### 主仓库安装
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### 测验应用设置（Vue 3 + Vite）
### 测验应用安装（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
```
### 银行项目API（Node.js + Express）
### 银行项目 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格式化
```
### 浏览器扩展项目
@ -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,45 +64,45 @@ npm install
```bash
cd 6-space-game/solution
npm install
# Open index.html in browser or use Live Server
# 在浏览器中打开 index.html 或使用实时服务器
```
### 聊天项目（Python后端）
### 聊天项目（Python 后端）
```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. 按贡献指南提交拉取请求
### 对于学习者
### 学习者指引
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`
- **项目**：HTML 项目使用 VS Code Live Server 插件
- **API 项目**：在对应 API 目录运行 `npm start`
## 测试说明
@ -110,173 +110,173 @@ 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测试
### 银行 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链接是否有效
- 在浏览器或Node.js中测试代码示例
- 确保翻译保持正确结构
- 在含 package.json 的目录运行 `npm run lint`
- 验证 markdown 链接有效
- 在浏览器或 Node.js 中测试代码示例
- 确认翻译保持结构完整
## 代码风格指南
## 代码规范指南
### JavaScript
- 使用现代ES6+语法
- 遵循项目中提供的标准ESLint配置
- 使用有意义的变量和函数名称以便于学习
- 添加注释解释概念以帮助学习者
- 在配置了Prettier的地方进行格式化
- 使用现代 ES6+ 语法
- 遵循项目中提供的标准 ESLint 配置
- 使用有意义的变量和函数名，便于教学
- 添加注释解释概念，帮助学习者理解
- 配置 Prettier 的地方使用其格式化
### HTML/CSS
- 使用语义化HTML5元素
- 响应式设计原则
- 使用语义化 HTML5 元素
- 遵循响应式设计原则
- 清晰的类命名规范
- 添加注释解释CSS技术以帮助学习者
- 添加注释解释 CSS 技巧，方便学习
### Python
- 遵循PEP 8风格指南
- 提供清晰的教育代码示例
- 在有帮助的地方添加类型提示
- 遵循 PEP 8 风格指南
- 代码简明易懂，适合教学
- 适当使用类型提示，方便学习
### Markdown文档
### Markdown 文档
- 清晰的标题层次结构
- 带语言说明的代码块
- 链接到额外资源
- 在`images/`目录中提供截图和图片
- 为图片添加辅助文本以提高可访问性
- 清晰的标题层级
- 代码块注明语言
- 提供相关资源链接
- 在 `images/` 目录中放置截图和图片
- 图片包含 alt 文本以便无障碍访问
### 文件组织
- 课程按顺序编号（1-getting-started-lessons, 2-js-basics等）
- 每个项目有`solution/`目录，通常还有`start/`或`your-work/`目录
- 图片存储在课程特定的`images/`文件夹中
- 翻译存储在`translations/{language-code}/`结构中
- 课程按序号命名（1-getting-started-lessons，2-js-basics 等）
- 每个项目包含 `solution/`，通常还有 `start/` 或 `your-work/` 等目录
- 课程特定图片放在该课程的 `images/` 文件夹
- 翻译文件存放于 `translations/{language-code}/` 结构中
## 构建和部署
## 构建与部署
### 测验应用部署（Azure Static Web Apps）
### 测验应用部署（Azure 静态 Web 应用）
测验应用已配置为Azure Static Web Apps部署：
quiz-app 配置用于 Azure 静态 Web 应用部署：
```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 静态 Web 应用配置：
- **应用位置**：`/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 # 安装 docsify-to-pdf
npm run convert # 从 docs 生成 PDF
```
### Docsify文档
### 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`生成生产包
- 静态项目：无需构建步骤，直接提供文件
各项目目录可能有自己的构建流程：
- Vue 项目：`npm run build` 创建生产版本
- 静态项目：无构建步骤，直接提供文件
## 拉取请求指南
## 拉取请求规范
### 标题格式
使用清晰、描述性的标题指明更改的区域：
- `[Quiz-app] 为课程X添加新测验`
- `[Lesson-3] 修复生态瓶项目中的拼写错误`
- `[Translation] 为课程5添加西班牙语翻译`
- `[Docs] 更新设置说明`
使用清晰描述改动范围的标题：
- `[Quiz-app] 添加第 X 课新测验`
- `[Lesson-3] 修正生态缸项目错别字`
- `[Translation] 添加第 5 课西班牙语翻译`
- `[Docs] 更新安装说明`
### 必需检查
### 必要检查
提交PR之前：
提交 PR 前：
1. **代码质量**：
- 在受影响的项目目录运行`npm run lint`
- 修复所有lint错误和警告
- 在受影响项目目录运行 `npm run lint`
- 修复所有 lint 错误和警告
2. **构建验证**：
- 如果适用，运行`npm run build`
- 确保没有构建错误
- 如有需要，运行 `npm run build`
- 确保无构建错误
3. **链接验证**：
- 测试所有Markdown链接
- 验证图片引用是否正常工作
- 测试所有 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 描述中引用
### 审核流程
- PR由维护者和社区审核
- 优先考虑教育清晰度
- 代码示例应遵循当前最佳实践
- 翻译需审核准确性和文化适应性
- PR 由维护者和社区审查
- 以教育清晰度为优先
- 代码示例需遵循当前最佳实践
- 翻译需审校确保准确及文化适宜
## 翻译系统
### 自动翻译
- 使用GitHub Actions和co-op-translator工作流
- 自动翻译为50多种语言
- 使用 GitHub Actions 的 co-op-translator 工作流
- 自动翻译成 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,118 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## 调试和故障排除
## 调试与故障排除
### 常见问题
**测验应用无法启动**：
- 检查Node.js版本（推荐v14+）
- 删除`node_modules`和`package-lock.json`，重新运行`npm install`
- 检查端口冲突（默认：Vite使用端口5173）
**测验应用启动失败**：
- 检查 Node.js 版本（建议 v14+）
- 删除 `node_modules` 和 `package-lock.json`，重新运行 `npm install`
- 检查端口冲突（默认：Vite 使用端口 5173）
**API服务器无法启动**：
- 验证Node.js版本是否满足最低要求（node >=10）
- 检查端口是否已被占用
- 确保所有依赖项已通过`npm install`安装
**API 服务器无法启动**：
- 确认 Node.js 版本满足最低要求（node >=10）
- 检查端口是否被占用
- 确认依赖已通过 `npm install` 安装完整
**浏览器扩展无法加载**：
- 验证manifest.json格式是否正确
- 检查浏览器控制台中的错误
- 按照浏览器特定的扩展安装说明操作
- 确认 manifest.json 格式正确
- 检查浏览器控制台是否有错误
- 遵循浏览器插件安装说明
**Python聊天项目问题**：
- 确保已安装OpenAI包：`pip install openai`
- 验证是否设置了GITHUB_TOKEN环境变量
- 检查GitHub Models访问权限
**Python 聊天项目问题**：
- 确保已安装 OpenAI 包：`pip install openai`
- 确认 GITHUB_TOKEN 环境变量已设置
- 检查 GitHub Models 访问权限
**Docsify无法提供文档**：
- 全局安装docsify-cli：`npm install -g docsify-cli`
- 从资源库根目录运行
- 检查`docs/_sidebar.md`是否存在
**Docsify 无法提供文档**：
- 全局安装 docsify-cli：`npm install -g docsify-cli`
- 在仓库根目录运行
- 确认存在 `docs/_sidebar.md`
### 开发环境提示
### 开发环境建议
- 对于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 项目
- 使用虚拟环境：`python -m venv venv`
- 保持依赖项更新
- GitHub令牌应具有最低必要权限
- 推荐使用虚拟环境：`python -m venv venv`
- 保持依赖更新
- GitHub 令牌应具备最低必要权限
### GitHub Models访问
### GitHub Models 访问
- GitHub Models需要个人访问令牌（PAT）
- 需使用个人访问令牌 (PAT)
- 令牌应存储为环境变量
- 切勿提交令牌或凭据
## 附加说明
## 其他说明
### 目标受众
- 完全的网页开发初学者
- 完全零基础的 Web 开发初学者
- 学生和自学者
- 在课堂上使用课程的教师
- 内容设计注重可访问性和逐步技能提升
- 在课堂使用此课程的教师
- 内容设计注重无障碍及逐步技能提升
### 教育理念
- 基于项目的学习方法
- 频繁的知识检查（测验）
- 动手编码练习
- 真实世界应用示例
- 在框架之前专注于基础知识
- 项目驱动学习方法
- 频繁知识检测（测验）
- 亲身编码实践
- 真实应用示例
- 注重基础知识，先学基础再学框架
### 资源库维护
### 仓库维护
- 活跃的学习者和贡献者社区
- 定期更新依赖项和内容
- 维护者监控问题和讨论
- 通过GitHub Actions自动更新翻译
- 定期更新依赖和内容
- 维护人员监控问题和讨论
- 通过 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、数据科学、机器学习、物联网课程可用
- 推荐学习者使用 [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- 还提供生成式 AI、数据科学、机器学习、物联网课程
### 处理具体项目
### 特定项目操作
有关单个项目的详细说明，请参阅以下README文件：
- `quiz-app/README.md` - Vue 3测验应用
- `7-bank-project/README.md` - 带认证的银行应用
关于各项目详细说明，请参考对应 README 文件：
- `quiz-app/README.md` - Vue 3 测验应用
- `7-bank-project/README.md` - 具有身份验证的银行应用
- `5-browser-extension/README.md` - 浏览器扩展开发
- `6-space-game/README.md` - 基于Canvas的游戏开发
- `9-chat-project/README.md` - AI聊天助手项目
- `6-space-game/README.md` - 基于 Canvas 的游戏开发
- `9-chat-project/README.md` - AI 聊天助手项目
### Monorepo结构
### Monorepo 结构
虽然不是传统的Monorepo，但此资源库包含多个独立项目：
- 每节课程都是自包含的
- 项目之间不共享依赖项
- 可单独处理项目而不影响其他项目
- 克隆整个资源库以体验完整课程
虽然不是传统的 Monorepo，本仓库包含多个独立项目：
- 每节课程独立完整
- 项目之间不共享依赖
- 可单独开发项目，互不影响
- 克隆整个仓库即可获得完整课程体验
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免责声明**：
本文档使用AI翻译服务 [Co-op Translator](https://github.com/Azure/co-op-translator) 进行翻译。尽管我们努力确保翻译的准确性，但请注意，自动翻译可能包含错误或不准确之处。原始语言的文档应被视为权威来源。对于关键信息，建议使用专业人工翻译。我们不对因使用此翻译而产生的任何误解或误读承担责任。
本文件由人工智能翻译服务 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻译。尽管我们力求准确，但请注意自动翻译可能存在错误或不准确之处。原始文件的母语版本应被视为权威来源。对于重要信息，建议采用专业人工翻译。我们不对因使用本翻译而产生的任何误解或误释承担责任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

196
translations/zh-CN/README.md
Unescape View File

@ -2,7 +2,7 @@
[![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)
[![PRs Welcome](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/)
@ -10,169 +10,170 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# 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. **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)
### 🌐 多语言支持
#### 通过 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 课程！
不要错过我们的生成式 AI 新课程！
访问 [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)
每节课都包含一项作业、知识检查和挑战，引导你学习以下主题：
- 提示设计与提示工程
- 文本和图像应用生成
- 搜索应用
访问 [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** 按钮，即可在你的 GitHub 账户创建一份该课程副本。
操作步骤：
1. **Fork 仓库**：点击本页右上角的“Fork”按钮。
2. **克隆仓库**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
步骤如下：
1. **Fork 仓库**：点击页面右上角的“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)。你可以在[这里](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** 按钮，复制 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>`替换为您刚刚复制的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/)
- 作业
- [课后测验](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 实践 | 构建用于创建在线生态瓶（Terrarium）的 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) | 进阶游戏开发 – 继承与模式 | 学习继承（包括类和组合）以及发布/订阅模式，为制作游戏做准备 | [进阶游戏开发介绍](./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 | [人工智能助手](./9-chat-project/README.md) | 使用 AI | 学习如何构建自己的 AI 助手 | [AI 助手项目](./9-chat-project/README.md) | Chris |
## 🏫 教学法
@ -180,34 +181,35 @@
* 项目驱动学习
* 频繁测验
本课程教授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/#/)离线运行本说明文档。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
@ -245,21 +247,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)翻译完成。虽然我们力求准确，但请注意自动翻译可能存在错误或不准确之处。原始文件的原文应被视为权威来源。对于重要信息，建议采用专业人工翻译。我们不对因使用此翻译而产生的任何误解或误释承担责任。
**免责声明**：
本文件使用人工智能翻译服务 [Co-op Translator](https://github.com/Azure/co-op-translator) 进行翻译。虽然我们力求准确，但请注意自动翻译可能存在错误或不准确之处。请将原始语言版本视为权威来源。对于关键信息，建议采用专业人工翻译。我们不对因使用本翻译而产生的任何误解或错误解释承担责任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

53
translations/zh-CN/Roadmap.md
Unescape View File

@ -0,0 +1,53 @@
# Microsoft Web-Dev-For-Beginners 仓库的路线图
**该仓库提供了一个以 JavaScript、HTML 和 CSS 为重点的 Web 开发基础学习路线图。课程设置灵活，可整体学习或部分学习，共包含 24 课，分布在 12 周内。**
## 关键里程碑
* **第 1-3 周：**
* 编程语言及开发工具介绍
* GitHub 基础
* 可访问性
* JS 基础：数据类型、函数与方法
* 用 JS 做决策
* **第 4-6 周：**
* 数组与循环
* 温室项目：HTML 实践
* CSS 实践
* JavaScript 闭包
* DOM 操作
* **第 7-9 周：**
* 打字游戏：事件驱动编程
* 绿色浏览器扩展：浏览器工作原理
* 构建表单、调用 API 及在本地存储变量
* 浏览器中的后台进程
* Web 性能优化
* **第 10-12 周：**
* 太空游戏：更高级的 JavaScript 游戏开发
* 画布绘制
* 屏幕元素移动
* 碰撞检测
* 计分、游戏结束及重启
* 银行业务应用：Web 应用中的 HTML 模板与路由
* 构建登录与注册表单
* 获取与使用数据的方法
* 状态管理概念
## 学习成果
**完成该路线图后，学员将获得构建打字游戏、虚拟温室、环保浏览器扩展、太空入侵者风格游戏及银行业务应用的实战经验。并且对 Web 开发基础知识有扎实理解。**
## 额外资源
* 本仓库提供丰富的学习资源，包括教程、代码示例和挑战。
* Microsoft Learn 平台提供多种 Web 开发课程和学习路径。
* 像 Stack Overflow 和 MDN Web Docs 这样的在线社区为 Web 开发者提供有价值的支持和资源。
**希望这份路线图能助你在 Web 开发之路上顺利前行！**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免责声明**：
本文件由人工智能翻译服务[Co-op Translator](https://github.com/Azure/co-op-translator)翻译。尽管我们力求准确，但请注意自动翻译可能包含错误或不准确的地方。原始文件的原文应被视为权威版本。对于重要信息，建议使用专业人工翻译。因使用本翻译而产生的任何误解或错误理解，我们不承担任何责任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

12
translations/zh-MO/.co-op-translator.json
Unescape View File

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:17:02+00:00",
"translation_date": "2026-02-06T16:13:30+00:00",
"source_file": "AGENTS.md",
"language_code": "zh-MO"
},
@ -516,11 +516,17 @@
"language_code": "zh-MO"
},
"README.md": {
"original_hash": "490c83786552d7fab6390991517bef09",
"translation_date": "2026-01-29T17:46:52+00:00",
"original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-02-06T16:09:09+00:00",
"source_file": "README.md",
"language_code": "zh-MO"
},
"Roadmap.md": {
"original_hash": "28bf6185fd7f27b62ddc210514366192",
"translation_date": "2026-02-06T16:09:56+00:00",
"source_file": "Roadmap.md",
"language_code": "zh-MO"
},
"SECURITY.md": {
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
"translation_date": "2025-08-25T21:00:29+00:00",

380
translations/zh-MO/AGENTS.md
Unescape View File

@ -1,28 +1,28 @@
# AGENTS.md
## 專案概述
## 項目概覽
這是一個教育課程資源庫，用於教授初學者網頁開發的基礎知識。課程是一個由 Microsoft Cloud Advocates 開發的完整 12 週課程，包含 24 篇實作課程，涵蓋 JavaScript、CSS 和 HTML。
這是一個用於教導初學者網頁開發基礎的教育課程資源庫。課程為一個由 Microsoft Cloud Advocates 開發的完整 12 週課程，包含 24 節實作課程，涵蓋 JavaScript、CSS 和 HTML。
### 主要組成部分
- **教育內容**：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 專案）
### 架構
- 以課程為基礎的教育資源庫
- 每個課程資料夾包含 README、程式碼範例和解答
- 獨立專案存放於不同目錄（quiz-app、各課程專案）
- 使用 GitHub Actions 的翻譯系統（co-op-translator）
- 文件透過 Docsify 提供，並可下載 PDF 格式
- 以課程為基礎的教育資源庫架構
- 每個課程資料夾包含 README、程式碼示例和解答
- 獨立專案分置於不同目錄中（quiz-app、各課程專案）
- 使用 GitHub Actions（co-op-translator）進行翻譯系統
- 文件使用 Docsify 呈現，並提供 PDF 版本
## 設置指令
## 設置命令
此資源庫主要用於教育內容的使用。若需操作特定專案：
該資源庫主要用於教育內容消費。若要操作特定專案：
### 主資源庫設置
@ -31,32 +31,32 @@ 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
```
### 銀行專案 API（Node.js + Express）
### 銀行專案 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 格式化
```
### 瀏覽器擴充功能專案
### 瀏覽器擴充專案
```bash
cd 5-browser-extension/solution
npm install
# Follow browser-specific extension loading instructions
# 遵循瀏覽器特定的擴充功能載入指示
```
### 太空遊戲專案
@ -64,219 +64,219 @@ npm install
```bash
cd 6-space-game/solution
npm install
# Open index.html in browser or use Live Server
# 在瀏覽器中開啟 index.html 或使用即時伺服器
```
### 聊天專案（Python 後端）
### 聊天專案 (Python 後端)
```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. 根據貢獻指南提交 Pull Request
5. 在相關專案目錄中測試任何程式碼更動
6. 根據貢獻規範提交 Pull Request
### 對於學習者
### 對學習者
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`
- **專案**：HTML 專案使用 VS Code Live Server 擴充套件
- **API 專案**：分別在 API 目錄執行 `npm start`
## 測試指引
## 測試說明
### 測驗應用程式測試
### 測驗應用測試
```bash
cd quiz-app
npm run lint # Check for code style issues
npm run build # Verify build succeeds
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 連結是否有效
- 在瀏覽器或 Node.js 中測試程式碼範例
- 確保翻譯保持正確結構
- 在有 package.json 的目錄下執行 `npm run lint`
- 驗證 Markdown 連結有效性
- 在瀏覽器或 Node.js 測試程式碼範例
- 確認翻譯保持適當架構
## 程式碼風格指南
## 代碼風格指導
### JavaScript
- 使用現代 ES6+ 語法
- 遵循專案提供的標準 ESLint 配置
- 使用具教育意義的變數和函數名稱
- 添加註解以解釋概念，方便學習者理解
- 在配置的地方使用 Prettier 格式化
- 遵循專案中 ESLint 標準配置
- 使用具教育意義的變數和函數命名
- 添加解釋概念的註解以利學習者理解
- 在配置了 Prettier 的地方進行格式化
### HTML/CSS
- 使用語義化的 HTML5 元素
- 遵循響應式設計原則
- 清晰的類名命名規範
- 添加註解以解釋 CSS 技術，方便學習者理解
- 語意化的 HTML5 元素
- 響應式設計原則
- 清晰的類名命名規則
- CSS 技術附加註解以供學習參考
### Python
- 遵循 PEP 8 風格指南
- 提供清晰的教育性程式碼範例
- 在需要時添加類型提示以幫助學習
- 清晰且具教育意義的程式碼範例
- 需時可加上型別提示以助學習
### Markdown 文件
- 清晰的標題層次結構
- 使用語言指定的程式碼區塊
- 提供額外資源的連結
- 在 `images/` 目錄中存放截圖和圖片
- 為圖片添加替代文字以提高可訪問性
- 清晰的標題層級
- 附帶語言標示的程式碼區塊
- 指向額外資源的連結
- `images/` 資料夾中的截圖和圖片
- 具可及性的圖片替代文字
### 文件組織
### 檔案組織
- 課程按順序編號（1-getting-started-lessons、2-js-basics 等）
- 每個專案包含 `solution/`，通常還有 `start/` 或 `your-work/` 目錄
- 圖片存放於課程專屬的 `images/` 資料夾
- 翻譯存放於 `translations/{language-code}/` 結構中
- 課程依序編號 （1-getting-started-lessons、2-js-basics 等）
- 每個專案有 `solution/` 且通常有 `start/` 或 `your-work/` 目錄
- 圖片存放於課程專屬的 `images/` 文件夾
- 翻譯文件在 `translations/{language-code}/` 結構中
## 建置與部署
## 建置和部署
### 測驗應用程式部署（Azure Static Web Apps）
### 測驗應用部署 (Azure Static Web Apps)
測驗應用程式已配置為 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/ 資料夾
# 在 push 到 main 時透過 GitHub Actions 工作流程部署
```
Azure Static Web Apps 配置：
- **應用程式位置**：`/quiz-app`
- **應用位置**：`/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 # 安裝 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` 生成生產環境包
- 靜態專案：無需建置步驟，直接提供檔案
每個專案目錄可能擁有自己的建置流程：
- Vue 專案：使用 `npm run build` 產生生產環境包
- 靜態專案：無建置步驟，直接提供檔案服務
## Pull Request 指南
## Pull Request 指引
### 標題格式
使用清晰、描述性的標題，指明修改範圍：
- `[Quiz-app] 為課程 X 添加新測驗`
- `[Lesson-3] 修正生態瓶專案中的拼寫錯誤`
- `[Translation] 添加課程 5 的西班牙語翻譯`
- `[Docs] 更新設置指令`
使用清晰且描述變更範圍的標題：
- `[Quiz-app] Add new quiz for lesson X`
- `[Lesson-3] Fix typo in terrarium project`
- `[Translation] Add Spanish translation for lesson 5`
- `[Docs] Update setup instructions`
### 必要檢查
### 必須檢查事項
提交 PR 前：
1. **程式碼品質**：
- 在受影響的專案目錄執行 `npm run lint`
- 修正所有 lint 錯誤和警告
1. **代碼品質**：
- 在受影響專案目錄執行 `npm run lint`
- 修正所有 lint 錯誤及警告
2. **建置驗證**：
- 如果適用，執行 `npm run build`
- 如適用執行 `npm run build`
- 確保無建置錯誤
3. **連結驗證**：
- 測試所有 Markdown 連結
- 確保圖片引用正常運作
- 驗證圖片引用是否有效
4. **內容審查**：
- 校對拼寫和語法
- 確保程式碼範例正確且具教育性
- 確保翻譯保持原意
4. **內容審核**：
- 校對拼寫與文法
- 確認程式碼範例正確且具教育意義
- 驗證翻譯內容保持原意
### 貢獻要求
- 同意 Microsoft CLA（首次 PR 時自動檢查）
- 遵循 [Microsoft 開源行為準則](https://opensource.microsoft.com/codeofconduct/)
- 詳細指南請參閱 [CONTRIBUTING.md](./CONTRIBUTING.md)
- 如果適用，請在 PR 描述中引用問題編號
- 同意 Microsoft CLA（首個 PR 自動檢查）
- 遵守 [Microsoft 開源行為守則](https://opensource.microsoft.com/codeofconduct/)
- 詳細規範見 [CONTRIBUTING.md](./CONTRIBUTING.md)
- 如適用，PR 描述中引用議題號碼
### 審查流程
### 審核流程
- PR 由維護者和社群審查
- 優先考慮教育清晰度
- 程式碼範例應遵循最新最佳實踐
- 翻譯需審查準確性和文化適切性
- PR 由維護者及社群審核
- 優先考量教學清晰度
- 程式碼範例應遵循現行最佳實踐
- 翻譯審核確保準確且符合文化
## 翻譯系統
### 自動翻譯
- 使用 GitHub Actions 和 co-op-translator 工作流程
- 自動翻譯成 50 多種語言
- 主目錄中的原始檔案
- 翻譯檔案存放於 `translations/{language-code}/` 目錄
- 使用 GitHub Actions 搭配 co-op-translator 工作流程
- 自動翻譯至 50 多種語言
- 原始檔置於主目錄
- 翻譯檔案於 `translations/{language-code}/` 目錄
### 添加手動翻譯改進
### 手動翻譯改善
1. 在 `translations/{language-code}/` 中找到檔案
2. 在保持結構的情況下進行改進
3. 確保程式碼範例仍然可用
1. 定位至 `translations/{language-code}/` 中檔案
2. 在保留架構前提下進行改進
3. 確保程式碼範例持續可用
4. 測試任何本地化的測驗內容
### 翻譯元資料
翻譯檔案包含元資料標頭：
翻譯檔包含元資料標頭：
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,118 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## 偵錯與故障排除
## 除錯與故障排除
### 常見問題
**測驗應用程式無法啟動**：
- 檢查 Node.js 版本（建議 v14+）
**測驗應用啟動失敗**：
- 檢查 Node.js 版本（建議 v14 以上）
- 刪除 `node_modules` 和 `package-lock.json`，重新執行 `npm install`
- 檢查埠衝突（預設：Vite 使用埠 5173）
- 檢查埠口衝突（預設：Vite 使用端口 5173）
**API 伺服器無法啟動**：
- 確認 Node.js 版本符合最低要求（node >=10）
- 檢查埠是否已被佔用
- 確保所有依賴已使用 `npm install` 安裝
**API 服務器無法啟動**：
- 確認 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 未提供文件服務**：
- 全域安裝 docsify-cli：`npm install -g docsify-cli`
- 從資源庫根目錄執行
- 確認 `docs/_sidebar.md` 存在
### 開發環境提示
### 開發環境小提示
- 使用 VS Code 和 Live Server 擴充功能開啟 HTML 專案
- 安裝 ESLint 和 Prettier 擴充功能以保持一致的格式
- 使用瀏覽器開發工具偵錯 JavaScript
- 對於 Vue 專案，安裝 Vue DevTools 瀏覽器擴充功能
- 使用 VS Code 搭配 Live Server 擴充套件開發 HTML 專案
- 安裝 ESLint 與 Prettier 擴充以維持格式一致
- 使用瀏覽器開發工具除錯 JavaScript
- Vue 專案安裝 Vue DevTools 瀏覽器擴充
### 性能考量
### 效能考量
- 大量翻譯檔案（50+ 種語言）導致完整克隆檔案較大
- 若僅需操作內容，使用淺層克隆：`git clone --depth 1`
- 在處理英文內容時排除翻譯檔案的搜尋
- 首次執行建置流程可能較慢（npm install、Vite build）
- 翻譯檔案多（50 多種語言）使整體複製體積大
- 對僅操作內容者可用淺層複製：`git clone --depth 1`
- 編輯英文內容時，盡量排除翻譯目錄搜尋
- 建置過程首次執行可能較慢（npm install、Vite 建置）
## 安全考量
### 環境變數
- API 金鑰絕不可提交到資源庫
- 使用 `.env` 檔案（已在 `.gitignore` 中）
- 在專案 README 中記錄所需的環境變數
- API 金鑰絕不可提交至資源庫
- 使用 `.env` 檔案（已加入 `.gitignore`）
- 在專案 README 中記錄所需環境變數
### Python 專案
- 使用虛擬環境：`python -m venv venv`
- 使用虛擬環境管理依賴：`python -m venv venv`
- 保持依賴更新
- GitHub Token 應具有最低必要權限
- GitHub 令牌需設定最小權限
### GitHub Models 存取
- 需要個人存取 Token（PAT）以使用 GitHub Models
- Token 應存放為環境變數
- 絕不可提交 Token 或憑證
- 需使用個人存取令牌（PAT）
- 將令牌存為環境變數
- 絕不可將令牌或認證資料提交到資源庫
## 附加說明
## 補充說明
### 目標受眾
- 完全初學者的網頁開發學習者
- 學生和自學者
- 在課堂中使用課程的教師
- 內容設計以提高可訪問性並逐步建立技能
- 完全初學網頁開發者
- 學生及自學者
- 教師課堂使用者
- 內容設計注重無障礙及循序漸進技術提升
### 教育理念
- 基於專案的學習方法
- 頻繁的知識檢查（測驗）
- 實作程式碼練習
- 真實世界應用範例
- 在框架之前專注於基礎知識
- 以專案為核心的學習方式
- 頻繁知識檢測（測驗）
- 實作練習為主
- 實務範例導入
- 先學基礎概念再進階框架
### 資源庫維護
- 活躍的學習者和貢獻者社群
- 積極活躍的學習者和貢獻者社群
- 定期更新依賴和內容
- 維護者監控問題和討論
- 翻譯更新透過 GitHub Actions 自動化
- 維護者監控議題和討論
- 翻譯更新自動執行於 GitHub Actions
### 相關資源
- [Microsoft Learn 模組](https://docs.microsoft.com/learn/)
- [學生中心資源](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) 建議學習者使用
- 其他課程：生成式 AI、資料科學、機器學習、物聯網課程均可用
- 推薦學習者使用 [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- 其他課程：生成式 AI、數據科學、機器學習、物聯網課程可用
### 操作特定專案
### 使用特定專案說明
有關個別專案的詳細指引，請參閱以下目錄中的 README 文件：
- `quiz-app/README.md` - Vue 3 測驗應用程式
- `7-bank-project/README.md` - 帶有身份驗證的銀行應用程式
個別專案詳細說明見相應 README：
- `quiz-app/README.md` - Vue 3 測驗應用
- `7-bank-project/README.md` - 帶認證的銀行應用
- `5-browser-extension/README.md` - 瀏覽器擴充功能開發
- `6-space-game/README.md` - 基於 Canvas 的遊戲開發
- `9-chat-project/README.md` - AI 聊天助手專案
- `6-space-game/README.md` - Canvas 遊戲開發
- `9-chat-project/README.md` - AI 聊天助理專案
### Monorepo 結構
### 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 -->

209
translations/zh-MO/README.md
Unescape View File

@ -2,7 +2,7 @@
[![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)
[![PRs Welcome](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/)
@ -10,203 +10,206 @@
[![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 支援（自動且持續更新）
#### 透過 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)
[阿拉伯語](../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)
> **想本機 Clone？**
> **想要本地複製？**
> 此資源庫包含超過 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 -->
**若您希望支持更多翻譯語言，請查看[此處](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 技術。
- 使用生成式 AI 及我們的夥伴應用與歷史人物互動。
- 有趣且引人入勝的故事，帶你穿越時空！
![character](../../translated_images/zh-MO/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)給我們回饋！
## 🌱 開始吧
**[學習者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**，每節課從課前小測驗開始，接著研讀講義，完成各種活動，最後用課後小測驗檢驗理解。
> **老師們**，我們在 [for-teachers.md](for-teachers.md) 中提供了一些使用本課程綱要的建議。歡迎於我們的[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)分享回饋！
為增進學習效果，建議您與同儕合作專案！我們歡迎您在[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)交流，版主團隊會協助回答問題。
**[學生](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**，每堂課請先完成課前小測驗，接著閱讀教材，完成各種活動，最後以課後小測驗來檢驗理解。
欲深入學習，強烈建議探索 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) 取得更多學習資源。
為提升學習體驗，建議你與同學一同合作專案！鼓勵在我們的[討論區](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) 的補充學習資源。
本課程已有預設開發環境！您可選擇在 [Codespace](https://github.com/features/codespaces/)（瀏覽器內、無需安裝）執行課程，或於本機利用文字編輯器如 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 開發。
### 📋 設定你的開發環境
#### 建立您的倉庫
為方便儲存作業，建議建立並使用您自己的課程副本。可於頁首點擊 **Use this template** 按鈕，系統會在您的 GitHub 帳號下建立一個新的課程副本。
本課程綱要已準備好開發環境！你可選擇在 [Codespace](https://github.com/features/codespaces/)（瀏覽器執行，免安裝）或使用電腦上的文字編輯器（如 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)）執行課程。
#### 建立你的倉庫
為方便儲存作業，建議你複製本倉庫。可點擊頁面頂端的 **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 執行課程
#### 在 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) 。你可以從[此處](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) 裡開啟 [終端機](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) - 幫助您更快撰寫程式碼
## 📂 每個課程包含：
- 可選的手繪筆記
- 可選的補充影片
- 課前熱身測驗
- 書面課程
- 對於專案導向課程，逐步指導如何建立該專案
- 課前暖身小測驗
- 書面課程內容
- 專案導向課程中逐步指導如何建立專案
- 知識檢核
- 一個挑戰
- 挑戰任務
- 補充閱讀
- 任務
- 作業
- [課後測驗](https://ff-quizzes.netlify.app/web/)
> **關於測驗的說明**：所有測驗都包含在 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 繪圖 | 了解 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 |
> **關於測驗的小提示**：所有測驗皆收錄於 Quiz-app 資料夾，共有 48 個，每個測驗有三個問題。它們也可在此處 [https://ff-quizzes.netlify.app/web/](https://ff-quizzes.netlify.app/web/) 使用，測驗應用程式可以在本地執行或部署至 Azure；請依 quiz-app 資料夾中的說明操作。
## 🗃️ 課程
| | 專案名稱 | 授課概念 | 學習目標 | 連結課程 | 作者 |
| :-: | :--------------------------------------------------: | :--------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------: | :-------------------: |
| 01 | 起步篇 | 程式設計簡介及工具介紹 | 了解多數程式語言的基本原理及協助專業開發者工作的軟體工具 | [程式語言與開發工具簡介](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | 起步篇 | GitHub 基礎與團隊協作 | 如何於專案中使用 GitHub，與他人協作程式碼 | [GitHub 簡介](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | 起步篇 | 無障礙設計 | 瞭解網頁無障礙設計基礎 | [無障礙設計基礎](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS 基礎 | JavaScript 資料類型 | JavaScript 資料類型基礎 | [資料類型](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS 基礎 | 函式與方法 | 學習函式與方法以管理應用程式的邏輯流程 | [函式與方法](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS 基礎 | 用 JS 作決策 | 學習如何在程式中創建條件判斷 | [決策](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS 基礎 | 陣列與迴圈 | 使用陣列和迴圈處理資料 | [陣列與迴圈](./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 以及本地儲存變數 | 在瀏覽器擴充元件中加入呼叫 API 的 JavaScript 元素，並用本地儲存存取變數 | [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) | 進階遊戲開發：繼承與發布訂閱模式 | 介紹繼承 (繼承類別與組合) 及 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/#/) 離線瀏覽本文件。請分叉此版本庫，於本機安裝 [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 +245,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) 進行翻譯。雖然我們致力於提高準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為具權威性的資料來源。對於重要資訊，建議採用專業人工翻譯。我們對因使用此翻譯所引致的任何誤解或錯誤詮釋概不負責。
本文件係經由人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯而成。雖然我哋致力追求準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件之母語版本應視為權威來源。對於重要資訊，建議採用專業人工翻譯。本公司不對因使用本翻譯而引致之任何誤解或誤釋負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

53
translations/zh-MO/Roadmap.md
Unescape View File

@ -0,0 +1,53 @@
# Microsoft 網頁開發初學者資源庫的路線圖
**此資源庫提供一份以 JavaScript、HTML 和 CSS 為重點的網頁開發基礎學習路線圖。課程彈性十足，可全程或部分參與，包含跨越 12 週的 24 堂課。**
## 重要里程碑
* **第1-3週：**
* 介紹程式語言與相關工具
* GitHub 基礎
* 無障礙設計
* JS 基礎：資料類型、函數與方法
* 用 JS 進行決策
* **第4-6週：**
* 陣列與迴圈
* Terrarium：HTML 實務
* CSS 實務
* JavaScript 閉包
* DOM 操控
* **第7-9週：**
* 打字遊戲：事件驅動程式設計
* 綠色瀏覽器擴充功能：瀏覽器操作
* 建立表單、呼叫 API 以及在本地儲存變數
* 瀏覽器背景程序
* 網頁效能
* **第10-12週：**
* 太空遊戲：使用 JavaScript 的進階遊戲開發
* 在畫布上繪圖
* 控制畫面上的元素移動
* 碰撞偵測
* 計分、結束與重新開始遊戲
* 銀行應用程式：網頁應用程式中的 HTML 範本與路由
* 建立登入及註冊表單
* 取得與使用資料的方法
* 狀態管理概念
## 學習成果
**完成此路線圖後，學生將獲得製作打字遊戲、虛擬生態缸、環保瀏覽器擴充、太空侵略者風格遊戲及企業用銀行應用程式的實戰經驗，並建立網頁開發基礎的扎實了解。**
## 附加資源
* 此資源庫提供豐富的資源以利進一步學習，包括教學、程式範例及挑戰。
* Microsoft Learn 平台提供多樣化的網頁開發課程與學習路徑。
* 線上社群如 Stack Overflow 與 MDN Web Docs 提供對網頁開發者的重要支援與資源。
**希望這份路線圖能助您一臂之力，邁向網頁開發之路！**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件是使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 所翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應視為權威來源。對於重要資訊，建議採用專業人工翻譯。本公司對因使用本翻譯而引起的任何誤解或誤釋不承擔任何責任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
Write Preview
Loading…
Cancel
Save