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

update-translations
localizeflow[bot] 5 days ago
parent ddf0a8cb04
commit 42d51a3d2c

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-27T22:13:41+00:00",
"translation_date": "2026-04-06T18:58:08+00:00",
"source_file": "AGENTS.md",
"language_code": "fa"
},
@ -516,8 +516,8 @@
"language_code": "fa"
},
"README.md": {
"original_hash": "a2c9eed480687319517c08a6319e5536",
"translation_date": "2026-03-06T16:09:59+00:00",
"original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-04-06T18:53:56+00:00",
"source_file": "README.md",
"language_code": "fa"
},

@ -1,37 +1,37 @@
# AGENTS.md
## نمای کلی پروژه
## مروری بر پروژه
این یک مخزن برنامه درسی آموزشی برای آموزش مبانی توسعه وب به مبتدیان است. این برنامه درسی یک دوره جامع ۱۲ هفته‌ای توسعه یافته توسط مدافعان ابر مایکروسافت است که شامل ۲۴ درس عملی در زمینه‌های JavaScript، CSS و HTML می‌باشد.
این مخزن یک برنامه درسی آموزشی برای آموزش اصول توسعه وب به مبتدیان است. این برنامه درسی یک دوره جامع ۱۲ هفته‌ای است که توسط مدافعان مایکروسافت کلود توسعه یافته و شامل ۲۴ درس عملی است که مباحث JavaScript، CSS و HTML را پوشش می‌دهد.
### اجزای کلیدی
- **محتوای آموزشی**: ۲۴ درس سازمان‌یافته در قالب ماژول‌های پروژه‌محور
- **پروژه‌های عملی**: Terrarium، بازی تایپ، افزونه مرورگر، بازی فضایی، برنامه بانکداری، ویرایشگر کد، و دستیار چت هوش مصنوعی
- **آزمون‌های تعاملی**: ۴۸ آزمون با ۳ سوال هر کدام (ارزیابی قبل و بعد درس)
- **پشتیبانی چندزبانه**: ترجمه‌های خودکار به بیش از ۵۰ زبان از طریق GitHub Actions
- **فناوری‌ها**: HTML، CSS، JavaScript، Vue.js 3، Vite، Node.js، Express، Python (برای پروژه‌های هوش مصنوعی)
- **محتوای آموزشی**: ۲۴ درس ساختاریافته سازمان‌یافته در قالب ماژول‌های مبتنی بر پروژه
- **پروژه‌های عملی**: تراریوم، بازی تایپ، افزونه مرورگر، بازی فضایی، اپلیکیشن بانکی، ویرایشگر کد و دستیار چت هوش مصنوعی
- **آزمون‌های تعاملی**: ۴۸ آزمون با ۳ سوال هر کدام (ارزیابی پیش و پس از درس)
- **پشتیبانی چندزبانه**: ترجمه‌های خودکار برای بیش از ۵۰ زبان با استفاده از GitHub Actions
- **فناوری‌ها**: HTML، CSS، JavaScript، Vue.js 3، Vite، Node.js، Express، Python (برای پروژه‌های AI)
### معماری
- مخزن آموزشی با ساختار مبتنی بر درس
- هر پوشه درس شامل README، نمونه کدها و راه‌حل‌ها
- پروژه‌های مستقل در دایرکتوری‌های جداگانه (quiz-app و پروژه‌های مختلف درس)
- هر پوشه درس شامل README، نمونه‌های کد و راه‌حل‌ها
- پروژه‌های مستقل در دایرکتوری‌های جداگانه (quiz-app، پروژه‌های مختلف دروس)
- سیستم ترجمه با استفاده از GitHub Actions (co-op-translator)
- مستندسازی ارائه شده توسط Docsify و قابل دسترس به صورت PDF
- مستندات ارائه شده از طریق Docsify و در دسترس به صورت PDF
## دستورات راه‌اندازی
این مخزن عمدتاً برای مصرف محتوای آموزشی است. برای کار با پروژه‌های خاص:
این مخزن عمدتاً برای مرور محتوای آموزشی است. برای کار با پروژه‌های خاص:
### راه‌اندازی مخزن اصلی
### تنظیم مخزن اصلی
```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
@ -41,14 +41,14 @@ 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 # شروع سرور API
npm run lint # اجرای ESLint
npm run format # قالب‌بندی با Prettier
npm run format # فرمت با Prettier
```
### پروژه‌های افزونه مرورگر
@ -56,7 +56,7 @@ npm run format # قالب‌بندی با Prettier
```bash
cd 5-browser-extension/solution
npm install
# دستورالعمل‌های بارگذاری افزونه خاص مرورگر را دنبال کنید
# دستورالعمل‌های بارگذاری افزونه مخصوص مرورگر را دنبال کنید
```
### پروژه‌های بازی فضایی
@ -64,10 +64,10 @@ npm install
```bash
cd 6-space-game/solution
npm install
# فایل index.html را در مرورگر باز کنید یا از سرور زنده استفاده کنید
# فایل index.html را در مرورگر باز کنید یا از Live Server استفاده کنید
```
### پروژه چت (بک‌اند پایتون)
### پروژه چت (بک‌اند Python)
```bash
cd 9-chat-project/solution/backend/python
@ -80,38 +80,38 @@ python api.py
### برای مشارکت‌کنندگان محتوا
1. **فورک کردن مخزن** در حساب GitHub خود
2. **کلون کردن فورک** به صورت محلی
3. **ایجاد شاخه جدید** برای تغییرات
4. اعمال تغییرات در محتوای درس یا نمونه کدها
5. تست تغییرات کد در دایرکتوری‌های پروژه مرتبط
6. ارسال درخواست‌های pull طبق دستورالعمل‌های مشارکت
1. **فورک مخزن** به حساب گیت‌هاب خود
2. **کلون فورک** به صورت محلی
3. **ایجاد شاخه جدید** برای تغییرات خود
4. ایجاد تغییرات در محتوای درس یا نمونه‌های کد
5. تست هر تغییر کد در دایرکتوری‌های مربوط به پروژه
6. ارسال درخواست کشش (Pull Request) طبق دستورالعمل‌های مشارکت
### برای یادگیرندگان
1. فورک یا کلون کردن مخزن
2. رفتن به دایرکتوری‌های درس به ترتیب
3. مطالعه فایل‌های README هر درس
4. انجام آزمون‌های قبل از درس در https://ff-quizzes.netlify.app/web/
5. کار با نمونه کدهای داخل پوشه‌های درس
6. تکمیل تمرین‌ها و چالش‌ها
7. شرکت در آزمون‌های پس از درس
1. فورک یا کلون مخزن
2. به ترتیب به دایرکتوری‌های درس بروید
3. فایل‌های README هر درس را مطالعه کنید
4. آزمون‌های پیش از درس را در https://ff-quizzes.netlify.app/web/ تکمیل کنید
5. نمونه‌های کد در پوشه‌های درس را انجام دهید
6. وظایف و چالش‌ها را کامل کنید
7. آزمون‌های بعد از درس را انجام دهید
### توسعه زنده
- **مستندسازی**: اجرای `docsify serve` در ریشه (پورت 3000)
- **اپلیکیشن آزمون**: اجرای `npm run dev` در دایرکتوری quiz-app
- **مستندات**: اجرای `docsify serve` در شاخه ریشه (پورت ۳۰۰۰)
- **برنامه آزمون**: اجرای `npm run dev` در دایرکتوری quiz-app
- **پروژه‌ها**: استفاده از افزونه Live Server در VS Code برای پروژه‌های HTML
- **پروژه‌های API**: اجرای `npm start` در دایرکتوری‌های مربوطه
## دستورالعمل‌های تست
### تست اپلیکیشن آزمون
### تست برنامه آزمون
```bash
cd quiz-app
npm run lint # بررسی مشکلات سبک کد
npm run build # اطمینان از موفقیت ساخت
npm run build # تایید موفقیت ساخت
```
### تست API بانک
@ -119,164 +119,164 @@ npm run build # اطمینان از موفقیت ساخت
```bash
cd 7-bank-project/api
npm run lint # بررسی مشکلات سبک کد
node server.js # اطمینان از شروع سرور بدون خطاها
node server.js # تأیید راه‌اندازی سرور بدون خطاها
```
### رویکرد کلی تست
- این مخزن آموزشی فاقد تست‌های خودکار جامع است
- تست دستی بر موارد زیر تمرکز دارد:
- اجرای بدون خطای نمونه کدها
- عملکرد صحیح لینک‌های مستندات
- کامپایل موفق پروژهها
- پیروی نمونه‌ها از بهترین شیوهها
- این یک مخزن آموزشی است که فاقد تست‌های خودکار جامع است
- تست دستی متمرکز بر:
- اجرای بدون خطا نمونه‌های کد
- درستی لینک‌ها در مستندات
- تکمیل موفقیت‌آمیز فرآیند ساخت پروژه
- رعایت بهترین شیوه‌ها در نمونهها
### بررسی‌های پیش از ارسال
- اجرای `npm run lint` در دایرکتوری‌های دارای package.json
- اطمینان از اعتبار لینک‌های markdown
- تست نمونه کدها در مرورگر یا Node.js
- بررسی ساختار درست ترجمه‌ها
- اعتبارسنجی لینک‌های مارک‌داون
- اجرای نمونه‌های کد در مرورگر یا Node.js
- بررسی حفظ ساختار صحیح ترجمه‌ها
## راهنمایی‌های سبک کدنویسی
## دستورالعمل‌های سبک کدنویسی
### جاوااسکریپت
### JavaScript
- استفاده از نحو ES6+ مدرن
- پیروی از تنظیمات ESLint استاندارد پروژه‌ها
- استفاده از نام‌های معنادار متغیرها و توابع برای وضوح آموزشی
- افزودن کامنت‌های توضیحی برای مفاهیم
- فرمت کد با Prettier در صورت تنظیم
- استفاده از سینتکس مدرن ES6+
- پیروی از تنظیمات ESLint استاندارد در پروژه‌ها
- استفاده از نام‌های متغیر و توابع معنادار برای وضوح آموزشی
- افزودن توضیحات برای مفاهیم یادگیرندگان
- فرمت کردن با Prettier در صورت وجود تنظیمات
### HTML/CSS
- استفاده از عناصر معنایی HTML5
- اصول طراحی واکنش‌گرا
- نام‌گذاری کلاس‌ها به صورت واضح
- کامنت‌هایی برای توضیح تکنیک‌های CSS برای یادگیرندگان
- رعایت اصول طراحی واکنش‌گرا
- نام‌گذاری واضح کلاس‌ها
- افزودن توضیحات برای تکنیک‌های CSS جهت یادگیرندگان
### پایتون
### Python
- پیروی از قوانین سبک PEP 8
- نمونه کدهای واضح و آموزشی
- استفاده از تایپ هینت‌ها در صورت امکان و مفید بودن برای یادگیری
- پیروی از دستورالعمل‌های سبک PEP 8
- نمونه‌های کد روشن و آموزشی
- استفاده از نوع‌دهی (type hints) در صورت مناسب بودن برای یادگیری
### مستندسازی مارک‌داون
### مستندسازی Markdown
- سلسله مراتب هدینگ واضح
- بلوک‌های کد با تعیین زبان
- سلسله مراتب واضح سرفصل‌ها
- بلوک‌های کد با مشخص کردن زبان
- لینک به منابع اضافی
- اسکرین‌شات‌ها و تصاویر داخل پوشه‌های `images/`
- متن جایگزین برای تصاویر جهت دسترسی‌پذیری
- اسکرین‌شات‌ها و تصاویر در پوشه‌های `images/`
- متن جایگزین برای تصاویر جهت دسترسی
### سازماندهی فایل‌ها
- شماره‌گذاری درس‌ها به ترتیب (1-getting-started-lessons، 2-js-basics و غیره)
- هر پروژه دارای دایرکتوری‌های `solution/` و معمولاً `start/` یا `your-work/`
- تصاویر در پوشه‌های خاص آن درس در `images/` ذخیره می‌شوند
- ترجمه‌ها در ساختار `translations/{language-code}/` قرار دارند
- شماره‌گذاری دروس به ترتیب (1-getting-started-lessons, 2-js-basics و غیره)
- هر پروژه دارای دایرکتوری‌های `solution/` و اغلب `start/` یا `your-work/`
- ذخیره تصاویر در پوشه‌های `images/` مربوط به هر درس
- ترجمه‌ها در ساختار `translations/{language-code}/`
## ساخت و استقرار
### استقرار اپلیکیشن آزمون (Azure Static Web Apps)
### استقرار برنامه آزمون (Azure Static Web Apps)
اپلیکیشن quiz-app برای استقرار در Azure Static Web Apps تنظیم شده است:
برنامه آزمون برای استقرار در Azure Static Web Apps پیکربندی شده است:
```bash
cd quiz-app
npm run build # ایجاد پوشه dist/
# استقرار از طریق گردش کار GitHub Actions هنگام فشار به شاخه main
npm run build # پوشه dist/ را ایجاد می‌کند
# از طریق جریان کاری GitHub Actions در هر بار پوش به شاخه main مستقر می‌کند
```
پیکربندی Azure Static Web Apps:
- **مکان برنامه**: `/quiz-app`
- **مکان خروجی**: `dist`
- **فرآیند کاری**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
- **روند کاری**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### تولید PDF مستندات
```bash
npm install # نصب docsify-to-pdf
npm run convert # تولید PDF از docs
npm run convert # تولید فایل PDF از داکس
```
### مستندسازی با Docsify
### مستندات Docsify
```bash
npm install -g docsify-cli # نصب Docsify به صورت سراسری
docsify serve # سرویس‌دهی در localhost:3000
docsify serve # خدمت رسانی در localhost:3000
```
### ساخت‌های مخصوص پروژه
### ساخت‌های خاص پروژه
هر دایرکتوری پروژه ممکن است روند ساخت خاص خود را داشته باشد:
- پروژه‌های Vue: اجرای `npm run build` بسته‌های پروداکشن ایجاد می‌کند
- پروژه‌های استاتیک: بدون مرحله ساخت، فایل‌ها مستقیماً سرو می‌شوند
هر پوشه پروژه ممکن است فرآیند ساخت مختص به خود را داشته باشد:
- پروژه‌های Vue: اجرای `npm run build` برای ایجاد بسته‌های تولید
- پروژه‌های استاتیک: مرحله ساخت ندارد، سرویس‌دهی مستقیم فایل‌ها
## دستورالعمل‌های ارسال Pull Request
### قالب عنوان
از عناوین واضح و توصیفی با اشاره به حوزه تغییر استفاده کنید:
از عناوین واضح و توصیفی استفاده کنید که حوزه تغییرات را نشان دهد:
- `[Quiz-app] افزودن آزمون جدید برای درس X`
- `[درس-3] اصلاح غلط املایی در پروژه terrarium`
- `[ترجمه] افزودن ترجمه اسپانیایی برای درس 5`
- `[مستندات] به‌روزرسانی دستورالعمل‌های راه‌اندازی`
- `[Lesson-3] اصلاح اشتباه تایپی در پروژه تراریوم`
- `[Translation] افزودن ترجمه اسپانیایی برای درس ۵`
- `[Docs] به‌روزرسانی دستورالعمل‌های راه‌اندازی`
### بررسی‌های اجباری
### بررسی‌های مورد نیاز
قبل از ارسال PR:
1. **کیفیت کد**:
- اجرای `npm run lint` در دایرکتوری‌های پروژه مربوطه
- اصلاح تمام خطاها و هشدارهای lint
- اجرای `npm run lint` در دایرکتوری‌های پروژه مربوط
- رفع همه خطاها و هشدارهای lint
2. **تأیید ساخت**:
2. **تایید ساخت**:
- اجرای `npm run build` در صورت لزوم
- اطمینان از عدم وجود خطا در ساخت
- اطمینان از عدم وجود خطای ساخت
3. **اعتبارسنجی لینک‌ها**:
- تست تمام لینک‌های markdown
- اطمینان از عملکرد لینک تصاویر
- تست همه لینک‌های مارک‌داون
- بررسی صحت ارجاعات تصویر
4. **بازبینی محتوا**:
- بازخوانی برای غلط‌های املایی و گرامری
- اطمینان از درستی و آموزشی بودن نمونه کدها
- تأیید حفظ معنی اصلی ترجمه‌ها
- ویرایش املایی و گرامری
- اطمینان از صحت و آموزشی بودن نمونه‌های کد
- بررسی حفظ معنای اصلی ترجمه‌ها
### نیازمندی‌های مشارکت
### الزامات مشارکت
- توافق با CLA مایکروسافت (بررسی خودکار در اولین PR)
- پیروی از [کد رفتار منبع باز مایکروسافت](https://opensource.microsoft.com/codeofconduct/)
- موافقت با CLA مایکروسافت (بررسی خودکار در اولین PR)
- پیروی از [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- مشاهده [CONTRIBUTING.md](./CONTRIBUTING.md) برای دستورالعمل‌های دقیق
- ارجاع شماره مسائل در توضیحات PR در صورت لزوم
- ارجاع شماره مسائل در توضیح PR در صورت لزوم
### فرایند بازبینی
- بازبینی PRها توسط نگهداران و جامعه
- اولویت به وضوح آموزشی
- نمونه کدها باید بهترین شیوه‌های جاری را رعایت کنند
- بررسی ترجمه‌ها برای دقت و مناسب بودن فرهنگی
- PRها توسط نگهدارندگان و جامعه مرور می‌شوند
- وضوح آموزشی در اولویت است
- نمونه‌های کد باید از بهترین شیوه‌های فعلی پیروی کنند
- ترجمه‌ها از نظر دقت و سازگاری فرهنگی بررسی می‌شوند
## سیستم ترجمه
### ترجمه خودکار
- استفاده از GitHub Actions با workflow co-op-translator
- استفاده از GitHub Actions با گردش کار co-op-translator
- ترجمه خودکار به بیش از ۵۰ زبان
- فایل‌های منبع در دایرکتوری‌های اصلی
- فایل‌های ترجمه شده در ساختار `translations/{language-code}/`
### افزودن بهبودهای ترجمه دستی
### افزودن بهبودهای دستی ترجمه
1. فایل را در `translations/{language-code}/` بیابید
2. بهبودها را در حفظ ساختار اعمال کنید
3. اطمینان داشته باشید نمونه کدها عملکرد دارند
4. هر محتوای آزمون محلی‌شده را تست کنید
1. پیدا کردن فایل در `translations/{language-code}/`
2. انجام بهبودها بدون تغییر ساختار
3. اطمینان از عملکرد نمونه‌های کد
4. تست محتوای آزمون‌های بومی شده
### متادیتای ترجمه
فایل‌های ترجمه دارای هدر متادیتا هستند:
فایل‌های ترجمه شامل سربرگ متادیتا هستند:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,120 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## اشکال‌زدایی و عیب‌یابی
## عیب‌یابی و رفع اشکال
### مشکلات رایج
**اپلیکیشن آزمون اجرا نمی‌شود**:
- نسخه Node.js بررسی شود (v14+ توصیه می‌شود)
- حذف `node_modules` و `package-lock.json` سپس اجرای مجدد `npm install`
- بررسی تداخل پورت (پورت پیش‌فرض Vite برابر ۵۱۷۳ است)
**عدم شروع برنامه آزمون**:
- بررسی نسخه Node.js (توصیه شده v14+)
- حذف پوشه‌های `node_modules` و فایل `package-lock.json`، سپس اجرای مجدد `npm install`
- بررسی تعارض پورت (پیش‌فرض: پورت 5173 توسط Vite استفاده می‌شود)
**سرور API راه‌اندازی نمی‌شود**:
- اطمینان از حداقل نسخه Node.js (node >=10)
- بررسی استفاده بودن پورت
- اطمینان از نصب تمامی وابستگی‌ها با `npm install`
- بررسی نسخه Node.js (حداقل node >=10)
- اطمینان از عدم استفاده پورت توسط برنامه دیگر
- اطمینان از نصب تمام وابستگی‌ها با `npm install`
**افزونه مرورگر بارگذاری نمی‌شود**:
- بررسی قالب‌بندی صحیح manifest.json
- مشاهده کنسول مرورگر برای خطاها
- پیروی از دستورالعمل نصب افزونه مطابق مرورگر
**بارگذاری نشدن افزونه مرورگر**:
- بررسی قالب صحیح manifest.json
- مشاهده خطاها در کنسول مرورگر
- پیروی از دستورالعمل‌های نصب افزونه خاص مرورگر
**مشکلات پروژه چت پایتون**:
- نصب بسته OpenAI: `pip install openai`
**مشکلات پروژه چت Python**:
- اطمینان از نصب بسته OpenAI: `pip install openai`
- تنظیم متغیر محیطی GITHUB_TOKEN
- بررسی مجوزهای دسترسی به مدل‌های GitHub
- بررسی دسترسی به مدل‌های GitHub
**عدم سرو مستندات Docsify**:
- نصب docsify-cli به صورت سراسری: `npm install -g docsify-cli`
- اجرای دستور از دایرکتوری ریشه مخزن
**عدم سرویس‌دهی مستندات Docsify**:
- نصب جهانی docsify-cli: `npm install -g docsify-cli`
- اجرا از شاخه ریشه مخزن
- اطمینان از وجود فایل `docs/_sidebar.md`
### نکات محیط توسعه
- استفاده از VS Code با افزونه Live Server برای پروژه‌های HTML
- نصب افزونه‌های ESLint و Prettier برای فرمت یکنواخت
- استفاده از ابزارهای توسعه مرورگر برای اشکال‌زدایی جاوااسکریپت
- استفاده از DevTools مرورگر برای اشکال‌زدایی JavaScript
- نصب افزونه Vue DevTools برای پروژه‌های Vue
### ملاحظات عملکرد
- تعداد زیاد فایل‌های ترجمه شده (بیش از ۵۰ زبان) سبب حجم بزرگ کلون کامل می‌شود
- استفاده از کلون سطحی در صورت کار صرفاً با محتوا: `git clone --depth 1`
- حذف ترجمه‌ها از جستجو هنگام کار با محتوای انگلیسی
- روندهای ساخت در اولین اجرا ممکن است کند باشند (npm install، ساخت Vite)
- تعداد زیاد فایل‌های ترجمه شده (بیش از ۵۰ زبان) باعث بزرگ بودن کلون کامل می‌شود
- برای کار فقط روی محتوا از کلون کم‌عمق استفاده کنید: `git clone --depth 1`
- هنگام کار بر روی محتوای انگلیسی، از جستجو در ترجمه‌ها خودداری کنید
- فرآیندهای ساخت ممکن است در اولین اجرا کند باشد (نصب npm، ساخت Vite)
## ملاحظات امنیتی
### متغیرهای محیطی
- کلیدهای API نباید در مخزن کامیت شوند
- استفاده از فایل‌های `.env` (قبلاً در `.gitignore` قرار دارند)
- کلیدهای API هرگز نباید در مخزن کامیت شوند
- استفاده از فایل‌های `.env` (که در `.gitignore` هستند)
- مستندسازی متغیرهای محیطی مورد نیاز در README پروژه‌ها
### پروژه‌های پایتون
### پروژه‌های Python
- استفاده از محیط‌های مجازی: `python -m venv venv`
- نگه داشتن به‌روزرسانی وابستگی‌ها
- توکن‌های GitHub باید حداقل مجوزهای لازم را داشته باشند
- استفاده از محیط مجازی: `python -m venv venv`
- به‌روز نگه داشتن وابستگی‌ها
- توکن‌های GitHub باید حداقل دسترسی لازم را داشته باشند
### دسترسی به مدل‌های GitHub
- توکن‌های دسترسی شخصی (PAT) برای دسترسی به مدل‌ها لازم است
- توکن‌ها باید در متغیرهای محیطی ذخیره شوند
- هرگز توکنها یا اطلاعات حساس را کامیت نکنید
- توکن‌های دسترسی شخصی (PAT) برای GitHub Models لازم است
- توکن‌ها باید به عنوان متغیر محیطی ذخیره شوند
- هرگز توکن یا اطلاعات ورود را کامیت نکنید
## یادداشت‌های اضافی
### مخاطبان هدف
- مبتدیان کامل در توسعه وب
- دانش‌آموزان و یادگیرندگان خودآموز
- معلمانی که برنامه درسی را در کلاس تدریس می‌کنند
- محتوا به گونه‌ای طراحی شده که دسترسی‌پذیر و به صورت تدریجی مهارت‌ها را می‌سازد
- دانشجویان و خودآموزها
- معلمانی که برنامه درسی را در کلاس درس استفاده می‌کنند
- محتوای طراحی شده برای دسترس‌پذیری و پیشرفت تدریجی مهارت‌ها
### فلسفه آموزشی
- رویکرد یادگیری مبتنی بر پروژه
- بررسی مکرر دانش (آزمون‌ها)
- تمرین‌های عملی برنامه‌نویسی
- مثال‌های کاربردی در دنیای واقعی
- تأکید بر مبانی پیش از فریمورک‌ها
- بررسی‌های مکرر دانش (آزمون‌ها)
- تمرین‌های کدنویسی عملی
- مثال‌هایی از کاربردهای واقعی
- تمرکز بر اصول پایه قبل از فریم‌ورک‌ها
### نگهداری مخزن
- جامعه فعالی از یادگیرندگان و مشارکت‌کنندگان
- به‌روزرسانی منظم وابستگی‌ها و محتوا
- نظارت بر بحث‌ها و مسائل توسط نگه‌داران
- بروزرسانی ترجمه‌ها به‌طور خودکار توسط GitHub Actions
- وجود جامعه فعال از یادگیرندگان و مشارکت‌کنندگان
- به‌روزرسانی‌های منظم وابستگی‌ها و محتوا
- بررسی مسائل و بحث‌ها توسط نگهدارندگان
- به‌روزرسانی‌های ترجمه به‌صورت خودکار از طریق GitHub Actions
### منابع مرتبط
- [ماژول‌های Microsoft Learn](https://docs.microsoft.com/learn/)
- [مرکز دانش‌آموزان Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [گیت‌هاب کوپایلوت GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) توصیه‌شده برای یادگیرندگان
- دوره‌های اضافی: هوش مصنوعی مولد، علوم داده، یادگیری ماشین، برنامه درسی اینترنت اشیا
- [منابع Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) پیشنهادی برای یادگیرندگان
- دوره‌های اضافی: AI مولد، علم داده، یادگیری ماشین، برنامه‌های IoT موجود
### کار با پروژه‌های مشخص
### کار با پروژه‌های خاص
برای دستورالعمل‌های دقیق درباره پروژه‌های فردی، به فایل‌های 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` - توسعه بازی مبتنی بر کانواس
- `9-chat-project/README.md` - پروژه دستیار چت هوش مصنوعی
### ساختار مونو رپو
اگرچه این مخزن یک مونو رپوی سنتی نیست، شامل چند پروژه مستقل است:
- هر درس خودکفا است
اگرچه یک مونو رپو سنتی نیست، این مخزن شامل چندین پروژه مستقل است:
- هر درس به‌صورت جداگانه
- پروژه‌ها وابستگی مشترک ندارند
- می‌توان روی پروژه‌های فردی بدون تأثیر بر دیگران کار کرد
- کلون کل مخزن برای تجربه کامل برنامه درسی لازم است
- کار روی پروژه‌های جداگانه بدون تأثیر بر سایرین
- کلون کل مخزن برای تجربه کامل برنامه درسی
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**سلب مسئولیت**:
این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما برای دقت تلاش می‌کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است شامل خطاها یا عدم دقت‌هایی باشند. سند اصلی به زبان بومی خود باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حیاتی، ترجمه حرفه‌ای انسانی توصیه می‌شود. ما مسئول هیچ گونه سوءتفاهم یا تفسیر نادرست ناشی از استفاده از این ترجمه نیستیم.
این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما برای دقت تلاش می‌کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است شامل خطاها یا نادرستی‌هایی باشند. سند اصلی به زبان بومی خود باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حیاتی، ترجمه حرفه‌ای انسانی توصیه می‌شود. ما مسئول هیچ گونه سوء تفاهم یا تفسیر نادرستی که ناشی از استفاده از این ترجمه باشد، نمی‌باشیم.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -12,211 +12,210 @@
# توسعه وب برای مبتدیان - یک برنامه درسی
اصول پایه توسعه وب را با دوره جامع ۱۲ هفته‌ای ما توسط مدافعان مایکروسافت کلود بیاموزید. هر یک از ۲۴ درس به صورت عملی به جاوااسکریپت، CSS و HTML می‌پردازد، با پروژه‌های کاربردی مانند تراریوم‌ها، افزونه‌های مرورگر و بازی‌های فضایی. در آزمون‌ها، بحث‌ها و وظایف عملی شرکت کنید. مهارت‌های خود را افزایش دهید و حفظ دانش خود را با روش تدریس پروژه‌محور مؤثر ما بهینه‌سازی کنید. سفر کدنویسی خود را امروز آغاز کنید!
اصول توسعه وب را با دوره جامع ۱۲ هفته‌ای ما توسط مدافعان ابری مایکروسافت بیاموزید. هر یک از ۲۴ درس به صورت پروژه‌های عملی مثل تراریوم‌ها، افزونه‌های مرورگر و بازی‌های فضایی به جاوااسکریپت، CSS و HTML می‌پردازد. با آزمون‌ها، بحث‌ها و تمرین‌های عملی درگیر شوید. مهارت‌های خود را ارتقا دهید و با روش آموزش پروژه‌محور موثر ما، دانش خود را بهینه کنید. امروز سفر برنامه‌نویسی خود را آغاز کنید!
به جامعه دیسکورد Azure AI Foundry بپیوندید
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
برای شروع استفاده از این منابع، مراحل زیر را دنبال کنید:
1. **فورک کردن مخزن**: کلیک کنید بر [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **کلون کردن مخزن**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**به دیسکورد Azure AI Foundry بپیوندید و با کارشناسان و توسعه‌دهندگان همدل ملاقات کنید**](https://discord.com/invite/ByRwuEEgH4)
1. **فورک کردن مخزن**: کلیک کنید [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **کلون کردن مخزن**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
۳. [**به دیسکورد Azure AI Foundry بپیوندید و با کارشناسان و توسعه‌دهندگان هم‌سطح ملاقات کنید**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 پشتیبانی چند زبانه
### 🌐 پشتیبانی چندزبانه
#### پشتیبانی شده توسط GitHub Action (خودکار و همیشه به‌روز)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](./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)
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Khmer](../km/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](./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)
> **ترجیح می‌دهید محلی کلون کنید؟**
> **ترجیح می‌دهید به صورت محلی کلون کنید؟**
>
> این مخزن شامل بیش از ۵۰ ترجمه زبانی است که سایز دانلود را به طور قابل توجهی افزایش می‌دهد. برای کلون بدون ترجمه‌ها، از sparse checkout استفاده کنید:
> این مخزن شامل بیش از ۵۰ ترجمه زبانی است که باعث افزایش قابل توجه اندازه دانلود می‌شود. برای کلون بدون ترجمه‌ها، از sparse checkout استفاده کنید:
>
> **Bash / macOS / Linux:**
> **بش / macOS / لینوکس:**
> ```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'
> ```
>
> **CMD (Windows):**
> **CMD (ویندوز):**
> ```cmd
> 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) مراجعه کنید که در آن منابع مبتدی، بسته‌های دانش‌آموزی و حتی راه‌هایی برای دریافت کوپن گواهی‌نامه رایگان پیدا خواهید کرد. این صفحه‌ای است که می‌خواهید آن را نشانک گذاری کنید و گهگاه چک کنید چون محتوای آن ماهانه به‌روزرسانی می‌شود.
به صفحه [**Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) مراجعه کنید، جایی که منابع مبتدی، بسته‌های دانشجویی و حتی راه‌هایی برای دریافت کوپن رایگان گواهی دریافت خواهید کرد. این صفحه‌ای است که می‌خواهید آن را نشانک (Bookmark) کنید و هر از گاهی چک کنید چون محتوای آن ماهانه به‌روزرسانی می‌شود.
### 📣 اعلامیه - چالش‌های جدید GitHub Copilot Agent Mode برای تکمیل!
### 📣 اطلاعیه - چالش‌های جدید حالت GitHub Copilot Agent برای تکمیل!
چالش جدید اضافه شده است، به دنبال "چالش GitHub Copilot Agent 🚀" در اکثر فصل‌ها باشید. این یک چالش جدید برای شماست تا با استفاده از GitHub Copilot و حالت Agent آن را کامل کنید. اگر قبلاً از حالت Agent استفاده نکرده‌اید، این حالت قادر است نه تنها متن تولید کند بلکه می‌تواند فایل ایجاد و ویرایش کند، دستورها را اجرا کند و بیشتر.
چالش جدید اضافه شده، دنبال "GitHub Copilot Agent Challenge 🚀" در اکثر فصل‌ها باشید. این یک چالش جدید برای شما است تا با استفاده از GitHub Copilot و حالت Agent کامل کنید. اگر قبلاً از حالت Agent استفاده نکرده‌اید، این حالت قادر است نه تنها متن تولید کند بلکه فایل‌ها را ایجاد و ویرایش کند، فرمان‌ها را اجرا کرده و بیشتر.
### 📣 اعلامیه - _پروژه جدیدی برای ساخت با استفاده از هوش مصنوعی مولد_
### 📣 اطلاعیه - _پروژه جدید برای ساخت با استفاده از هوش مصنوعی مولد_
پروژه دستیار هوش مصنوعی جدید به تازگی اضافه شده است، آن را بررسی کنید [پروژه](./9-chat-project/README.md)
### 📣 اعلامیه - _برنامه درسی جدید_ برای هوش مصنوعی مولد در جاوااسکریپت به تازگی منتشر شده است
### 📣 اطلاعیه - _برنامه درسی جدید_ درباره هوش مصنوعی مولد برای جاوااسکریپت به تازگی منتشر شده است
برنامه درسی جدید هوش مصنوعی مولد ما را از دست ندهید!
برنامه درسی هوش مصنوعی مولد ما را از دست ندهید!
برای شروع به آدرس [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) مراجعه کنید!
برای شروع به [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) مراجعه کنید!
![Background](../../translated_images/fa/background.148a8d43afde5730.webp)
![پس‌زمینه](../../translated_images/fa/background.148a8d43afde5730.webp)
- درس‌هایی که از مبانی تا RAG را پوشش می‌دهند.
- تعامل با شخصیت‌های تاریخی با استفاده از GenAI و اپلیکیشن همراه ما.
- روایت سرگرم‌کننده و جذاب، شما به سفر در زمان خواهید رفت!
- روایت سرگرم‌کننده و جذاب، شما در حال سفر در زمان هستید!
![character](../../translated_images/fa/character.5c0dd8e067ffd693.webp)
![شخصیت](../../translated_images/fa/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) گفتگو encouraged است و تیم مدیران ما در دسترسند تا به سوالات شما پاسخ دهند.
برای گسترش دانش خود، ما قویاً توصیه می‌کنیم که [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** در بالای صفحه انجام دهید. این کار یک مخزن جدید در حساب گیت‌هاب شما با نسخه‌ای از برنامه درسی ایجاد می‌کند.
برای ذخیره راحت کار خود، پیشنهاد می‌شود یک نسخه کپی از این مخزن بسازید. این کار را می‌توانید با کلیک روی دکمه **Use this template** در بالای صفحه انجام دهید. این یک مخزن جدید در حساب GitHub شما با کپی برنامه درسی ایجاد می‌کند.
مراحل زیر را دنبال کنید:
1. **فورک کردن مخزن**: روی دکمه "Fork" در گوشه بالا سمت راست این صفحه کلیک کنید.
2. **کلون کردن مخزن**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
۱. **فورک کردن مخزن:** روی دکمه "Fork" در گوشه بالا-راست این صفحه کلیک کنید.
۲. **کلون کردن مخزن:** `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/fa/createcodespace.0238bbf4d7a8d955.webp)
#### اجرای برنامه درسی به صورت محلی روی کامپیوتر
#### اجرای برنامه درسی به صورت محلی روی کامپیوتر شما
برای اجرای این برنامه درسی به صورت محلی روی کامپیوتر خود، به یک ویرایشگر متن، یک مرورگر و یک ابزار خط فرمان نیاز دارید. اولین درس ما، [مقدمه‌ای بر زبان‌های برنامه‌نویسی و ابزارهای مورد استفاده](../../1-getting-started-lessons/1-intro-to-programming-languages) شما را با گزینه‌های مختلف این ابزارها آشنا می‌کند تا بتوانید بهترین‌ها را انتخاب کنید.
برای اجرای این برنامه درسی به صورت محلی، به یک ویرایشگر متن، مرورگر و ابزار خط فرمان نیاز دارید. اولین درس ما، [مقدمه‌ای بر زبان‌ها و ابزارهای برنامه‌نویسی](../../1-getting-started-lessons/1-intro-to-programming-languages)، گزینه‌های مختلف برای هر کدام از این ابزارها را به شما معرفی می‌کند تا بهترین‌ها را انتخاب کنید.
توصیه ما استفاده از [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) به عنوان ویرایشگر است که همچنین یک [ترمینال](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) داخلی دارد. می‌توانید Visual Studio Code را از [اینجا](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) دانلود کنید.
1. مخزن خود را روی کامپیوترتان کلون کنید. می‌توانید این کار را با کلیک روی دکمه **Code** و کپی کردن آدرس URL انجام دهید:
توصیه ما استفاده از [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) به عنوان ویرایشگر است که دارای [ترمینال داخلی](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) نیز می‌باشد. می‌توانید Visual Studio Code را از [اینجا](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) دانلود کنید.
1. کد مخزن خود را روی کامپیوترتان کلون کنید. می‌توانید این کار را با کلیک روی دکمه **Code** و کپی کردن URL انجام دهید:
[CodeSpace](./images/createcodespace.png)
سپس، درون [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) در [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) باز کنید و فرمان زیر را اجرا کنید، به جای `<your-repository-url>` آدرسی که تازه کپی کرده‌اید را جایگزین کنید:
سپس، در [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>` آدرسی که تازه کپی کرده‌اید را جایگزین کنید:
```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) - برای پیش‌نمایش صفحات HTML درون Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - برای کمک به نوشتن کد سریع‌تر
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - برای پیش‌نمایش صفحات HTML در داخل Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - برای کمک به نوشتن سریع‌تر کد
## 📂 هر درس شامل:
- طرح اولیه اختیاری (sketchnote)
- ویدئوی کمکی اختیاری
- آزمون گرم‌کننده پیش از درس
- درس کتبی
- برای درس‌های مبتنی بر پروژه، راهنماهای گام به گام ساخت پروژه
- بررسی‌های دانش
- یک چالش
- مطالعه تکمیلی
- تکلیف
- یادداشت تصویری اختیاری
- ویدیوی تکمیلی اختیاری
- آزمون پیش‌گرم‌کننده پیش از درس
- درس نوشتاری
- برای درس‌های مبتنی بر پروژه، راهنماهای گام‌به‌گام برای ساخت پروژه
- چک‌های دانش
- چالش
- خواندن تکمیلی
- تمرین
- [آزمون پس از درس](https://ff-quizzes.netlify.app/web/)
> **نکته‌ای درباره آزمون‌ها**: همه آزمون‌ها در پوشه Quiz-app قرار دارند، در مجموع ۴۸ آزمون با هر کدام شامل سه سوال. آن‌ها قابل دسترس [در اینجا](https://ff-quizzes.netlify.app/web/) هستند و می‌توان اپلیکیشن آزمون را به صورت محلی اجرا کرد یا در Azure مستقر نمود؛ دستورالعمل‌ها در پوشه `quiz-app` آمده است.
> **نکته‌ای درباره آزمون‌ها**: همه آزمون‌ها در پوشه Quiz-app قرار دارند، مجموعاً ۴۸ آزمون هر کدام با سه سؤال. آن‌ها در [اینجا](https://ff-quizzes.netlify.app/web/) در دسترس هستند، اپ آزمون می‌تواند به صورت محلی اجرا یا به Azure منتشر شود؛ دستورالعمل‌ها در پوشه `quiz-app` آمده است.
## 🗃️ درسها
## 🗃️ دروس
| | نام پروژه | مفاهیم آموزش داده شده | اهداف یادگیری | درس مرتبط | نویسنده |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | شروع به کار | مقدمه‌ای بر برنامه‌نویسی و ابزارهای کار | یادگیری اصول پایه‌ای اکثر زبان‌های برنامه‌نویسی و نرم‌افزاری که به توسعه‌دهندگان حرفه‌ای در انجام کارشان کمک می‌کند | [مقدمه‌ای بر زبان‌ها و ابزارهای برنامه‌نویسی](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | شروع به کار | مبانی گیت‌هاب، شامل کار گروهی | چگونگی استفاده از گیت‌هاب در پروژه و همکاری با دیگران روی کد | [مقدمه‌ای بر گیت‌هاب](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | شروع به کار | دسترسی‌پذیری | فراگیری مبانی دسترسی‌پذیری وب | [مبانی دسترسی‌پذیری](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | مبانی JS | انواع داده در JavaScript | مبانی انواع داده در JavaScript | [انواع داده](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | مبانی JS | توابع و روش‌ها | آشنایی با توابع و روش‌ها برای مدیریت جریان منطقی برنامه | [توابع و روش‌ها](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | مبانی JS | گرفتن تصمیم با JS | یادگیری چگونگی ایجاد شرایط در کد با استفاده از روش‌های تصمیم‌گیری | [گرفتن تصمیم](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | مبانی JS | آرایه‌ها و حلقه‌ها | کار با داده‌ها با استفاده از آرایه‌ها و حلقه‌ها در JavaScript | [آرایه‌ها و حلقه‌ها](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [تراریوم](./3-terrarium/solution/README.md) | HTML در عمل | ساخت HTML برای ایجاد تراریوم آنلاین، تمرکز بر ساختار بندی صفحه | [مقدمه‌ای بر HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [تراریوم](./3-terrarium/solution/README.md) | CSS در عمل | ساخت CSS برای طراحی تراریوم آنلاین، تمرکز بر مبانی CSS شامل واکنشگرا کردن صفحه | [مقدمه‌ای بر CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [تراریوم](./3-terrarium/solution/README.md) | بسته‌های JavaScript، دستکاری DOM | ساخت جاوااسکریپت برای کارکرد تراریوم به صورت رابط کشیدن/رها کردن، تمرکز بر بسته‌ها و دستکاری DOM | [بسته‌های JavaScript، دستکاری DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [بازی تایپ](./4-typing-game/solution/README.md) | ساخت بازی تایپ | یادگیری استفاده از رویدادهای صفحه کلید برای هدایت منطق برنامه جاوااسکریپت | [برنامه‌نویسی رویدادمحور](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [افزونه مرورگر سبز](./5-browser-extension/solution/README.md) | کار با مرورگرها | یادگیری کارکرد مرورگرها، تاریخچه آن‌ها و راه‌اندازی اولیه افزونه مرورگر | [درباره مرورگرها](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [افزونه مرورگر سبز](./5-browser-extension/solution/README.md) | ساخت فرم، فراخوانی API و ذخیره متغیرها در local storage | ساخت عناصر جاوااسکریپت افزونه مرورگر برای فراخوانی API با استفاده از متغیرهای ذخیره شده در local storage | [APIها، فرم‌ها و ذخیره محلی](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [افزونه مرورگر سبز](./5-browser-extension/solution/README.md) | فرآیندهای پس‌زمینه در مرورگر، کارایی وب | استفاده از فرآیندهای پس‌زمینه مرورگر برای مدیریت آیکون افزونه؛ آشنایی با عملکرد وب و بهینه‌سازی‌هایی برای بهبود آن | [وظایف پس‌زمینه و کارایی](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [بازی فضایی](./6-space-game/solution/README.md) | توسعه بازی پیشرفته‌تر با JavaScript | یادگیری وراثت با هر دو کلاس و ترکیب و الگوی Pub/Sub، برای آماده‌سازی ساخت بازی | [مقدمه‌ای بر توسعه بازی پیشرفته](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [بازی فضایی](./6-space-game/solution/README.md) | رسم روی بوم | آشنایی با API بوم (Canvas) برای رسم عناصر روی صفحه | [رسم روی بوم](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [بازی فضایی](./6-space-game/solution/README.md) | حرکت عناصر در صفحه نمایش | کشف چگونگی حرکت گرفتن عناصر با استفاده از مختصات کارتزین و 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 | [قالب‌ها و مسیرها](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [اپ بانک](./7-bank-project/solution/README.md) | ساخت فرم ورود و ثبت‌نام | یادگیری ساخت فرم‌ها و مدیریت روال‌های اعتبارسنجی | [فرم‌ها](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [اپ بانک](./7-bank-project/solution/README.md) | روش‌های دریافت و استفاده از داده | جریان داده در برنامه، نحوه دریافت، ذخیره و حذف آن | [داده](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [اپ بانک](./7-bank-project/solution/README.md) | مفاهیم مدیریت وضعیت | یادگیری حفظ وضعیت برنامه و مدیریت برنامه‌ای آن | [مدیریت وضعیت](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [کد مرورگر/VScode](../../8-code-editor) | کار با VScode | یادگیری استفاده از ویرایشگر کد | [استفاده از ویرایشگر کد VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [دستیارهای هوش مصنوعی](./9-chat-project/README.md) | کار با هوش مصنوعی | یادگیری ساخت دستیار هوش مصنوعی خودتان | [پروژه دستیار هوش مصنوعی](./9-chat-project/README.md) | Chris |
## 🏫 روش آموزش
برنامه‌ی درسی ما با دو اصل کلیدی آموزش طراحی شده است:
| 01 | شروع کار | مقدمه‌ای بر برنامه‌نویسی و ابزارها | یادگیری مبانی پایه‌ای که پشت اکثر زبان‌های برنامه‌نویسی است و درباره نرم‌افزاری که به توسعه‌دهندگان حرفه‌ای کمک می‌کند تا وظایفشان را انجام دهند | [مقدمه‌ای بر زبان‌های برنامه‌نویسی و ابزارها](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | شروع کار | مبانی گیت‌هاب، شامل کار تیمی | نحوه استفاده از گیت‌هاب در پروژه‌تان، نحوه همکاری با دیگران روی یک پایگاه کد | [مقدمه‌ای بر گیت‌هاب](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | شروع کار | دسترس‌پذیری | یادگیری مبانی دسترس‌پذیری وب | [مبانی دسترس‌پذیری](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | مبانی جاوااسکریپت | انواع داده‌های جاوااسکریپت | مبانی انواع داده‌های جاوااسکریپت | [انواع داده](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | مبانی جاوااسکریپت | توابع و متدها | یادگیری درباره توابع و متدها برای مدیریت جریان منطق یک برنامه | [توابع و متدها](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | مبانی جاوااسکریپت | تصمیم‌گیری با جاوااسکریپت | یادگیری نحوه ایجاد شرایط در کد با استفاده از روش‌های تصمیم‌گیری | [تصمیم‌گیری](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | مبانی جاوااسکریپت | آرایه‌ها و حلقه‌ها | کار با داده‌ها با استفاده از آرایه‌ها و حلقه‌ها در جاوااسکریپت | [آرایه‌ها و حلقه‌ها](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [تردارخانه](./3-terrarium/solution/README.md) | تمرین HTML | ساخت HTML برای ایجاد یک تراریوم آنلاین، تمرکز بر ساختار‌بندی | [مقدمه‌ای بر HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [تردارخانه](./3-terrarium/solution/README.md) | تمرین CSS | ساخت CSS برای استایل‌دهی تراریوم آنلاین، تمرکز بر مبانی CSS شامل ساخت واکنشگرا | [مقدمه‌ای بر CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [تردارخانه](./3-terrarium/solution/README.md) | بسته‌های جاوااسکریپت، دستکاری DOM | ساخت کد جاوااسکریپت برای عملکرد تراریوم به عنوان واسط کشیدن/رها کردن، تمرکز بر بسته‌ها و دستکاری DOM | [بسته‌های جاوااسکریپت، دستکاری DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [بازی تایپینگ](./4-typing-game/solution/README.md) | ساخت بازی تایپینگ | یادگیری استفاده از رویدادهای صفحه‌کلید برای هدایت منطق اپلیکیشن جاوااسکریپت | [برنامه‌نویسی مبتنی بر رویداد](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [افزونه مرورگر سبز](./5-browser-extension/solution/README.md) | کار با مرورگرها | آشنایی با نحوه کار مرورگرها، تاریخچه آن‌ها و نحوه ساخت عناصر اولیه یک افزونه مرورگر | [درباره مرورگرها](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [افزونه مرورگر سبز](./5-browser-extension/solution/README.md) | ساخت یک فرم، فراخوانی API و ذخیره متغیرها در حافظه محلی | ساخت عناصر جاوااسکریپت افزونه مرورگر برای فراخوانی 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) | توسعه بازی پیشرفته‌تر با جاوااسکریپت | یادگیری درباره وراثت با استفاده از کلاس‌ها و ترکیب و الگوی Pub/Sub، برای آماده‌سازی جهت ساخت بازی | [مقدمه‌ای بر توسعه بازی پیشرفته](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [بازی فضا](./6-space-game/solution/README.md) | نقاشی روی بوم | آشنایی با API بوم برای ترسیم عناصر روی صفحه | [نقاشی روی بوم](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [بازی فضا](./6-space-game/solution/README.md) | حرکت دادن عناصر روی صفحه | کشف نحوه حرکت گرفتن عناصر با استفاده از مختصات کارتزینی و 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 | [کد مرورگر/وی‌اس‌کد](../../8-code-editor) | کار با وی‌اس‌کد | یادگیری نحوه استفاده از ویرایشگر کد| [استفاده از ویرایشگر کد وی‌اس‌کد](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [دستیارهای هوش مصنوعی](./9-chat-project/README.md) | کار با هوش مصنوعی | یادگیری چگونگی ساخت دستیار هوش مصنوعی خودتان | [پروژه دستیار هوش مصنوعی](./9-chat-project/README.md) | Chris |
## 🏫 روش تدریس
برنامه درسی ما با دو اصل کلیدی آموزشی طراحی شده است:
* یادگیری مبتنی بر پروژه
* آزمون‌های مکرر
این برنامه اساس‌های JavaScript، HTML و CSS را آموزش می‌دهد، همچنین جدیدترین ابزارها و تکنیک‌هایی که توسعه‌دهندگان وب امروزه استفاده می‌کنند. دانش‌آموزان فرصت کسب تجربه عملی را با ساخت بازی تایپ، تراریوم مجازی، افزونه مرورگر دوستدار محیط زیست، بازی سبک Space Invader و اپ بانک برای کسب‌وکارها خواهند داشت. تا پایان این مجموعه، یک درک جامع از توسعه وب کسب خواهند کرد.
این برنامه مبانی جاوااسکریپت، HTML و CSS را آموزش می‌دهد، به‌علاوه جدیدترین ابزارها و تکنیک‌هایی که توسعه‌دهندگان وب امروزی استفاده می‌کنند. دانشجویان فرصت خواهند داشت تا تجربه عملی با ساخت بازی تایپینگ، تراریوم مجازی، افزونه مرورگر سازگار با محیط زیست، بازی سبک مهاجم فضایی و اپ بانکداری برای کسب‌وکارها کسب کنند. تا پایان این سری، دانشجویان درک محکمی از توسعه وب به دست خواهند آورد.
> 🎓 شما می‌توانید چند درس اول این برنامه را به صورت [مسیر یادگیری](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) در Microsoft Learn دنبال کنید!
> 🎓 می‌توانید چند درس اول این برنامه درسی را به عنوان یک [مسیر یادگیری](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) در Microsoft Learn بگذرانید!
با اطمینان از هماهنگی محتوا با پروژه‌ها، روند یادگیری برای دانش‌آموزان جذاب‌تر شده و ماندگاری مفاهیم افزایش می‌یابد. همچنین چند درس مقدماتی در مبانی JavaScript نوشته شده است که مفاهیم را معرفی می‌کند و با ویدئویی از مجموعه آموزشی "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" همراه است که برخی نویسندگان آن به این برنامه کمک کرده‌اند.
با اطمینان از اینکه محتوا با پروژه‌ها هماهنگ است، فرآیند برای دانش‌آموزان جذاب‌تر شده و حفظ مفاهیم تقویت خواهد شد. همچنین چند درس شروع‌کننده در مبانی جاوااسکریپت نوشتیم تا مفاهیم را معرفی کنیم، همراه با ویدیویی از مجموعه "[سری شروع‌کنندگان به: جاوااسکریپت](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" که برخی نویسندگان آن به این برنامه درسی کمک کرده‌اند.
علاوه بر این، یک آزمون کم‌فشار قبل از کلاس هدف دانش‌آموز را به سمت یادگیری موضوع تعیین می‌کند، در حالی که آزمون دوم پس از کلاس، حفظ بهتر مطلب را تضمین می‌کند. این برنامه طوری طراحی شده که انعطاف‌پذیر و سرگرم‌کننده باشد و می‌توان آن را به صورت کامل یا بخشی از آن را گذراند. پروژه‌ها از سطح کوچک آغاز شده و تا پایان چرخه ۱۲ هفته‌ای به طور فزاینده‌ای پیچیده می‌شوند.
علاوه بر این، آزمونی با ریسک کم پیش از کلاس قصد دانش‌آموز را برای یادگیری موضوع تنظیم می‌کند، در حالی که آزمون دوم پس از کلاس حفظ بیشتر را تضمین می‌کند. این برنامه درسی به گونه‌ای طراحی شده که انعطاف‌پذیر و سرگرم‌کننده باشد و می‌توان آن را کامل یا جزیی دنبال کرد. پروژه‌ها با پروژه‌های کوچک شروع شده و تا پایان دوره ۱۲ هفته‌ای به تدریج پیچیده‌تر می‌شوند.
در حالی که عمداً از معرفی فریم‌ورک‌های JavaScript اجتناب کرده‌ایم تا روی مهارت‌های پایه‌ای که به عنوان توسعه‌دهنده وب نیاز دارید تمرکز کنیم، گام بعدی خوب برای تکمیل این برنامه، یادگیری Node.js از طریق مجموعه ویدئوهای دیگر است: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
در حالی که عمداً از معرفی چارچوب‌های جاوااسکریپت پرهیز کرده‌ایم تا روی مهارت‌های پایه‌ای لازم قبل از پذیرش چارچوب تمرکز کنیم، گام بعدی خوب برای تکمیل این برنامه یادگیری 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`. وب‌سایت روی پورت ۳۰۰۰ در لوکال‌هاست شما اجرا خواهد شد: `localhost:3000`.
شما می‌توانید این مستندات را به صورت آفلاین با استفاده از [Docsify](https://docsify.js.org/#/) اجرا کنید. این مخزن را فورک کنید، [Docsify را نصب کنید](https://docsify.js.org/#/quickstart) روی دستگاه محلی خود، سپس در پوشه ریشه این مخزن دستور `docsify serve` را تایپ کنید. وبسایت روی پورت ۳۰۰۰ در لوکال‌هاست شما سرو خواهد شد: `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
@ -233,7 +232,7 @@
---
### سری هوش مصنوعی مولد
### سری آموزش هوش مصنوعی مولد
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -241,7 +240,7 @@
---
### آموزش‌های پایه‌ای
### آموزش‌های اصلی
[![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)
@ -252,19 +251,19 @@
---
### سری CoPilot
### سری آموزش کوپایلوت
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![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 -->
## گرفتن کمک
## دریافت کمک
اگر گیر کردید یا سوالی درباره ساخت اپلیکیشن‌های هوش مصنوعی دارید، به جمع یادگیرندگان و توسعه‌دهندگان با تجربه در بحث‌های MCP بپیوندید. این یک جامعه حمایتگر است که سوالات پذیرفته شده و دانش به صورت آزاد به اشتراک گذاشته می‌شود.
اگر گیر کردید یا هر سوالی درباره ساخت اپلیکیشن‌های هوش مصنوعی دارید. به همراه دیگر یادگیرندگان و توسعه‌دهندگان با تجربه در بحث‌های مربوط به MCP شرکت کنید. این یک جامعه حمایت‌کننده است که در آن سوالات پذیرفته می‌شود و دانش به‌طور آزادانه به اشتراک گذاشته می‌شود.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
اگر بازخورد محصول یا خطا در حین ساخت دارید، به نشانی زیر مراجعه کنید:
اگر بازخورد محصول یا اشکالی هنگام ساخت دارید به اینجا مراجعه کنید:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
@ -275,6 +274,6 @@
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**سلب مسئولیت**:
این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما تلاش می‌کنیم دقت را حفظ کنیم، لطفاً آگاه باشید که ترجمه‌های خودکار ممکن است شامل اشتباهات یا نواقصی باشند. سند اصلی به زبان بومی خود باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حیاتی، ترجمه حرفه‌ای انسانی توصیه می‌شود. ما مسئول هیچ گونه سوءتفاهم یا برداشت نادرست ناشی از استفاده از این ترجمه نیستیم.
**سلب مسئولیت**:
این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. با اینکه ما برای دقت تلاش می‌کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است شامل خطاها یا نواقص باشند. سند اصلی به زبان مادری خود باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حیاتی، ترجمه حرفه‌ای انسانی توصیه می‌شود. ما مسئول هیچ گونه سوءتفاهم یا برداشت نادرست ناشی از استفاده از این ترجمه نیستیم.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-27T22:14:49+00:00",
"translation_date": "2026-04-06T18:59:16+00:00",
"source_file": "AGENTS.md",
"language_code": "ur"
},
@ -516,8 +516,8 @@
"language_code": "ur"
},
"README.md": {
"original_hash": "a2c9eed480687319517c08a6319e5536",
"translation_date": "2026-03-06T16:16:39+00:00",
"original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-04-06T18:55:23+00:00",
"source_file": "README.md",
"language_code": "ur"
},

@ -1,30 +1,30 @@
# AGENTS.md
## پروجیکٹ کا جائزہ
## منصوبے کا جائزہ
یہ ابتدائیوں کو ویب ڈویلپمنٹ کے بنیادی اصول سکھانے کے لیے ایک تعلیمی نصاب کا مخزن ہے۔ نصاب 12 ہفتوں پر محیط ایک جامع کورس ہے جو Microsoft Cloud Advocates نے تیار کیا ہے، جس میں جاوا اسکرپٹ، CSS، اور HTML پر مشتمل 24 عملی اسباق شامل ہیں۔
یہ ویب ڈویلپمنٹ کی بنیادی باتیں سکھانے کے لیے ابتدائیوں کے لیے ایک تعلیمی نصاب کا ذخیرہ ہے۔ نصاب ایک جامع ۱۲ ہفتوں کا کورس ہے جو Microsoft Cloud Advocates نے تیار کیا ہے، جس میں جاوا اسکرپٹ، CSS، اور HTML پر مشتمل ۲۴ عملی اسباق شامل ہیں۔
### کلیدی اجزاء
- **تعلیمی مواد**: 24 منظم اسباق جو پراجیکٹ پر مبنی ماڈیولز میں منظم ہیں
- **عملی پراجیکٹس**: ٹیریریم، ٹائپنگ گیم، براؤزر ایکسٹینشن، اسپیس گیم، بینکنگ ایپ، کوڈ ایڈیٹر، اور AI چیٹ اسسٹنٹ
- **انٹرایکٹو کوئزز**: 48 کوئزز جن میں ہر ایک میں 3 سوالات ہوتے ہیں (سبق سے پہلے/بعد کی تشخیص)
- **کثیراللسانی معاونت**: GitHub Actions کے ذریعے 50+ زبانوں میں خودکار ترجمے
- **ٹیکنالوجیز**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI پراجیکٹس کے لیے)
- **تعلیمی مواد**: ۲۴ منظم اسباق جو پروجیکٹ پر مبنی ماڈیولز میں ترتیب دیے گئے ہیں
- **عملی پروجیکٹس**: ٹیریریم، ٹائپنگ گیم، براؤزر ایکسٹینشن، اسپیس گیم، بنکنگ ایپ، کوڈ ایڈیٹر، اور AI چیٹ اسسٹنٹ
- **انٹرایکٹو کوئزز**: ۴۸ کوئزز، ہر ایک میں ۳ سوالات (سبق کے پہلے اور بعد میں تشخیص)
- **کثیرالزبان معاونت**: GitHub Actions کے ذریعہ 50+ زبانوں میں خودکار ترجمے
- **ٹیکنالوجیز**: HTML، CSS، جاوا اسکرپٹ، 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
@ -36,22 +36,22 @@ cd Web-Dev-For-Beginners
```bash
cd quiz-app
npm install
npm run dev # سرور کی ترقی شروع کریں
npm run build # پیداوار کے لیے تیار کریں
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 # API سرور شروع کریں
npm run lint # ESLint چلائیں
npm run format # Prettier کے ساتھ شکل دیں
npm start # اے پی آئی سرور شروع کریں
npm run lint # ای ایس لِنٹ چلائیں
npm run format # پریٹیئر کے ساتھ فارمیٹ کریں
```
### براؤزر ایکسٹینشن پراجیکٹس
### براؤزر ایکسٹینشن پروجیکٹس
```bash
cd 5-browser-extension/solution
@ -59,222 +59,222 @@ npm install
# مخصوص براؤزر کی توسیع لوڈ کرنے کی ہدایات پر عمل کریں
```
### اسپیس گیم پراجیکٹس
### اسپیس گیم پروجیکٹس
```bash
cd 6-space-game/solution
npm install
# براوزر میں index.html کھولیں یا Live Server استعمال کریں
# index.html کو براؤزر میں کھولیں یا Live Server استعمال کریں
```
### چیٹ پراجیکٹ (Python بیک اینڈ)
### چیٹ پروجیکٹ (Python بیک اینڈ)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# GITHUB_TOKEN ماحولیاتی متغیر مقرر کریں
# GITHUB_TOKEN ماحول کی متغیر مقرر کریں
python api.py
```
## ترقیاتی ورک فلو
### مواد کے شراکت داروں کے لیے
### مواد فراہم کرنے والوں کے لیے
1. اپنا GitHub اکاؤنٹ میں مخزن کو **فورک کریں**
2. اپنے فورک کو لوکل **کلون کریں**
3. اپنی تبدیلیوں کے لیے **نئی برانچ بنائیں**
1. **ذخیرہ کو فورک کریں** اپنے GitHub اکاؤنٹ پر
2. **اپنے فورک کو لوکل کلون کریں**
3. **اپنی تبدیلیوں کے لیے ایک نیا برانچ بنائیں**
4. سبق کے مواد یا کوڈ مثالوں میں تبدیلی کریں
5. متعلقہ پراجیکٹ ڈائریکٹریز میں کوڈ کی تبدیلیاں ٹیسٹ کریں
6. شراکت کے رہنما خطوط کے مطابق پل ریکویسٹ جمع کروائیں
5. متعلقہ پروجیکٹ ڈائریکٹریز میں کسی بھی کوڈ تبدیلی کی جانچ کریں
6. تعاون کی ہدایتوں کے مطابق پل ریکویسٹ جمع کروائیں
### سیکھنے والوں کے لیے
1. مخزن کو فورک یا کلون کریں
2. مرحلہ وار سبق کی ڈائریکٹریز پر جائیں
3. ہر سبق کے README فائلز پڑھیں
1. ذخیرہ فورک یا کلون کریں
2. سبق کی ڈائریکٹریز متواتر ملاحظہ کریں
3. ہر سبق کی README فائل پڑھیں
4. سبق سے پہلے کی کوئزز مکمل کریں https://ff-quizzes.netlify.app/web/
5. سبق کی فولڈرز میں کوڈ کی مثالوں پر کام کریں
5. سبق کے فولڈرز میں کوڈ مثالوں پر کام کریں
6. اسائنمنٹس اور چیلنجز مکمل کریں
7. سبق کے بعد کی کوئزز دیں
7. سبق کے بعد کی کوئزز لیں
### لائیو ڈیولپمنٹ
- **دستاویزات**: روٹ میں `docsify serve` چلائیں (پورٹ 3000)
- **کوئز ایپ**: quiz-app ڈائریکٹری میں `npm run dev` چلائیں
- **پراجیکٹس**: HTML پراجیکٹس کے لیے VS Code Live Server ایکسٹینشن استعمال کریں
- **API پراجیکٹس**: متعلقہ API ڈائریکٹریز میں `npm start` چلائیں
- **دستاویزات**: جڑ فولڈر میں `docsify serve` چلائیں (پورٹ 3000)
- **کوئز ایپ**: کوئز ایپ فولڈر میں `npm run dev` چلائیں
- **پروجیکٹس**: HTML پروجیکٹس کے لیے VS Code Live Server ایکسٹینشن استعمال کریں
- **API پروجیکٹس**: متعلقہ API ڈائریکٹریز میں `npm start` چلائیں
## ٹیسٹنگ کی ہدایات
## جانچ کے ہدایات
### کوئز ایپ ٹیسٹنگ
### کوئز ایپ کی جانچ
```bash
cd quiz-app
npm run lint # کوڈ اسٹائل کے مسائل کی جانچ کریں
npm run build # تصدیق کریں کہ بلڈ کامیاب ہو گیا ہے
npm run build # تصدیق کریں کہ بلڈ کامیاب ہوا
```
### بینک API ٹیسٹنگ
### بنک API کی جانچ
```bash
cd 7-bank-project/api
npm run lint # کوڈ کے انداز کے مسائل چیک کریں
node server.js # تصدیق کریں کہ سرور بغیر کسی خرابی کے شروع ہوتا ہے
npm run lint # کوڈ اسٹائل کے مسائل کی جانچ کریں
node server.js # یقینی بنائیں کہ سرور بغیر غلطیوں کے شروع ہو رہا ہے
```
### عمومی ٹیسٹنگ طریقہ کار
### عمومی جانچ کا طریقہ
- یہ ایک تعلیمی مخزن ہے جس میں جامع خودکار ٹیسٹ شامل نہیں
- دستی ٹیسٹنگ پر توجہ مرکوز ہے:
- کوڈ مثالیں بغیر غلطی کے چلتی ہیں
- دستاویزات میں لنکس درست کام کرتے ہیں
- پراجیکٹ بلڈ کامیابی سے مکمل ہوتے ہیں
- مثالیں بہترین طریقے کار کی پیروی کرتی ہیں
- یہ تعلیمی ذخیرہ ہے، اس میں مکمل خودکار ٹیسٹ نہیں ہیں
- دستی جانچ پر توجہ مرکوز ہے:
- کوڈ مثالیں بغیر ایررز کے چلیں
- دستاویزات میں لنکس صحیح چلیں
- پروجیکٹ کامیابی سے تعمیر ہوں
- مثالیں بہترین طریقوں کی پیروی کریں
### پیشگی چیک
### سبمیشن سے پہلے کی جانچ
- package.json والے فولڈرز میں `npm run lint` چلائیں
- `npm run lint` چلائیں ان فولڈرز میں جہاں package.json موجود ہو
- مارک ڈاؤن لنکس کی درستگی کی تصدیق کریں
- کوڈ مثالوں کو براؤزر یا Node.js میں ٹیسٹ کریں
- یقینی بنائیں کہ تراجم ڈھانچے کو صحیح طریقے سے برقرار رکھتے ہیں
- ترجمے کا ڈھانچہ صحیح برقرار رکھا گیا ہو
## کوڈ اسٹائل کے رہنما اصول
## کوڈ اسلوب کی ہدایات
### جاوا اسکرپٹ
- جدید ES6+ نحو استعمال کریں
- پراجیکٹس میں مہیا کردہ معیاری ESLint کنفیگریشن پر عمل کریں
- تعلیمی وضاحت کے لیے معنی خیز متغیر اور فنکشن نام استعمال کریں
- سیکھنے والوں کے لیے تصورات کی وضاحت کے لیے تبصرے شامل کریں
- جہاں کنفیگر کیا گیا ہو Prettier سے فارمیٹ کریں
- پروجیکٹس میں مہیا کردہ معیاری ESLint کنفیگریشنز پر عمل کریں
- تعلیمی وضاحت کے لیے بامعنی متغیر اور فنکشن نام استعمال کریں
- سیکھنے والوں کے لیے مفاہیم کی وضاحت کے لیے تبصرے شامل کریں
- جہاں مقرر ہو پر Prettier کے ذریعے فارمیٹ کریں
### HTML/CSS
- معنوی HTML5 اجزاء
- ریسپانسیو ڈیزائن کے اصول
- معنوی HTML5 عناصر
- جوابدہ ڈیزائن کے اصول
- واضح کلاس نامی کنونشنز
- سیکھنے والوں کے لیے CSS تکنیک کی وضاحت کے تبصرے
- CSS تکنیک کی وضاحت کے لیے تبصرے
### پائتھون
- PEP 8 اسٹائل گائیڈ لائنز
- PEP 8 طرز کی ہدایات
- واضح، تعلیمی کوڈ مثالیں
- سیکھنے کے لیے جہاں مفید ہو ٹائپ ہنٹس
- جہاں مددگار ہو، ٹائپ ہنٹس
### مارک ڈاؤن دستاویزات
- واضح ہیڈنگ ہائیرارکی
- زبان کی وضاحت کے ساتھ کوڈ بلاکس
- اضافی وسائل کے لنکس
- `images/` ڈائریکٹریز میں اسکرین شاٹس اور تصاویر
- معذوری کے لیے تصاویر کے لیے Alt متن
- `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 Static Web Apps)
کوئز ایپ Azure Static Web Apps پر ڈیپلائمنٹ کے لیے ترتیب دی گئی ہے:
کوئز ایپ Azure Static Web Apps تعیناتی کے لیے مرتب ہے:
```bash
cd quiz-app
npm run build # فولڈر dist/ بناتا ہے
# مین پر پش کرنے پر GitHub Actions ورک فلو کے ذریعے تعینات کرتا ہے
# مین پر پش ہونے پر GitHub Actions ورک فلو کے ذریعے تعینات کرتا ہے
```
Azure Static Web Apps کنفیگریشن:
- **اپلیکیشن مقام**: `/quiz-app`
Azure Static Web Apps کی ترتیب:
- **ایپ مقام**: `/quiz-app`
- **آؤٹ پٹ مقام**: `dist`
- **ورک فلو**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
- **ورک فلو**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### دستاویزات PDF جنریشن
### دستاویزات کا PDF جنریشن
```bash
npm install # docsify-to-pdf انسٹال کریں
npm run convert # docs سے PDF بنائیں
```
### Docsify دستاویزات
```bash
npm install -g docsify-cli # ڈاکسفائی کو عالمی طور پر انسٹال کریں
docsify serve # لوکل ہوسٹ:3000 پر سروس دیں
npm install -g docsify-cli # دستاویزات کو عالمی سطح پر انسٹال کریں
docsify serve # localhost:3000 پر خدمت دیں
```
### پروجیکٹ مخصوص بیلڈز
### پراجیکٹ مخصوص بلڈز
ہر پراجیکٹ ڈائریکٹری کا اپنا بلڈ عمل ہو سکتا ہے:
- Vue پراجیکٹس: `npm run build` سے پروڈکشن بنڈلز بنتے ہیں
- Static پراجیکٹس: کوئی بلڈ مرحلہ نہیں، فائلیں براہ راست سرف کی جاتی ہیں
ہر پروجیکٹ ڈائریکٹری کا اپنا بنایا جا سکتا عمل ہو سکتا ہے:
- Vue پروجیکٹس: `npm run build` پروڈکشن بنڈلز بناتا ہے
- سٹیٹک پروجیکٹس: کوئی بلڈ اسٹیپ نہیں، فائلیں براہ راست سرور کی جاتی ہیں
## پل ریکویسٹ رہنما خطوط
## پل ریکویسٹ کی ہدایات
### عنوان کی شکل
### عنوان کا انداز
صاف، وضاحتی عنوانات استعمال کریں جو تبدیلی کے علاقے کی نشاندہی کرتے ہوں:
صاف اور وضاحتی عنوانات استعمال کریں جو تبدیلی کے شعبے کی نشاندہی کریں:
- `[Quiz-app] سبق X کے لیے نیا کوئز شامل کریں`
- `[Lesson-3] ٹیریریم پراجیکٹ میں ٹائپو کی اصلاح کریں`
- `[Lesson-3] ٹیریریم پروجیکٹ میں ٹائپ کی اصلاح کریں`
- `[Translation] سبق 5 کے لیے ہسپانوی ترجمہ شامل کریں`
- `[Docs] سیٹ اپ ہدایات اپ ڈیٹ کریں`
- `[Docs] سیٹ اپ ہدایات کو اپ ڈیٹ کریں`
### درکار چیک
### ضروری چیکس
PR جمع کروانے سے پہلے:
PR جمع کرانے سے پہلے:
1. **کوڈ معیار**:
- متاثرہ پراجیکٹ ڈائریکٹریز میں `npm run lint` چلائیں
- تمام lint غلطیاں اور وارننگز درست کریں
1. **کوڈ کوالٹی**:
- متعلقہ پروجیکٹ فولڈرز میں `npm run lint` چلائیں
- تمام لنٹنگ کی غلطیاں اور وارننگز درست کریں
2. **بلڈ توثیق**:
- اگر قابل اطلاق ہو تو `npm run build` چلائیں
- یقینی بنائیں کہ کوئی بلڈ غلطی نہ ہو
2. **بیلڈ کی تصدیق**:
- اگر ضرورت ہو تو `npm run build` چلائیں
- یقینی بنائیں کہ کوئی بلڈ ایررز نہ ہوں
3. **لنک ویریفیکیشن**:
- تمام مارک ڈاؤن لنکس کی جانچ کریں
- امیج حوالہ جات کی تصدیق کریں
3. **لنک کی تصدیق**:
- تمام مارک ڈاؤن لنکس ٹیسٹ کریں
- تصاویر کے حوالے کی تصدیق کریں
4. **مواد کا جائزہ**:
- املا اور گرامر کی جانچ کریں
- املا اور گرامر کی تصحیح کریں
- کوڈ مثالیں درست اور تعلیمی ہوں
- ترجمے اصل معنی برقرار رکھیں
- ترجمے اصل معنی کو برقرار رکھیں
### تعاون کی ضروریات
- Microsoft CLA سے اتفاق کریں (پہلے PR پر خودکار چیک)
- Microsoft CLA سے اتفاق کریں (پہلی PR پر خودکار چیک)
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) کی پیروی کریں
- تفصیلی رہنما خطوط کے لیے [CONTRIBUTING.md](./CONTRIBUTING.md) دیکھیں
- اگر قابل اطلاق ہو تو PR کی وضاحت میں مسئلے کے نمبر حوالہ کریں
- مفصل ہدایات کے لیے [CONTRIBUTING.md](./CONTRIBUTING.md) دیکھیں
- PR کی وضاحت میں مسئلہ نمبرات حوالہ دیں اگر ضروری ہو
### جائزہ لینے کا عمل
### جائزہ کا عمل
- PRs کا جائزہ مینٹیینرز اور کمیونٹی کرتے ہیں
- تعلیمی وضاحت کو ترجیح دی جاتی ہے
- کوڈ مثالیں موجودہ بہترین طریقوں کی پیروی کریں
- تراجم کی درستگی اور ثقافتی مطابقت کی جانچ کی جاتی ہے
- PRs مینٹینرز اور کمیونٹی کے ذریعے جائزہ لیے جاتے ہیں
- تعلیمی وضاحت کو اولین ترجیح دی جاتی ہے
- کوڈ مثالیں حالیہ بہترین طریقوں کی پیروی کریں
- ترجمے درستگی اور ثقافتی مطابقت کے لیے دیکھے جاتے ہیں
## ترجمہ کا نظام
## ترجمے کا نظام
### خودکار ترجمہ
- GitHub Actions کے ساتھ co-op-translator ورک فلو استعمال کرتا ہے
- 50+ زبانوں میں خودکار ترجمہ کرتا ہے
- 50+ زبانوں میں خودکار ترجمے
- ماخذ فائلیں مرکزی ڈائریکٹریز میں
- ترجمہ شدہ فائلیں `translations/{language-code}/` ڈائریکٹریز میں
- ترجمہ کی گئی فائلیں `translations/{language-code}/` میں
### دستی ترجمہ کی بہتری شامل کرنا
### دستی ترجمے میں بہتری شامل کرنا
1. `translations/{language-code}/` میں فائل تلاش کریں
2. ڈھانچہ برقرار رکھتے ہوئے بہتری کریں
3. یقینی بنائیں کہ کوڈ مثالیں کام کر رہی ہوں
4. کسی مقامی کوئز مواد کی جانچ کریں
3. یقینی بنائیں کہ کوڈ مثالیں فعال رہیں
4. کسی بھی مقامی کوئز مواد کی جانچ کریں
### ترجمہ میٹا ڈیٹا
### ترجمے کا میٹا ڈیٹا
ترجمہ شدہ فائلوں میں میٹا ڈیٹا ہیڈر شامل ہوتا ہے:
```markdown
@ -288,121 +288,121 @@ 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` سے انسٹال ہوں
- چیک کریں کہ پورٹ پہلے سے استعمال میں نہ ہو
- تمام dependencies `npm install` سے انسٹال ہوں
**براؤزر ایکسٹینشن نہیں چلتی**:
**براؤزر ایکسٹینشن لوڈ نہیں ہوتی**:
- 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-cli عالمی طور پر انسٹال کریں: `npm install -g docsify-cli`
- ذخیرہ جڑ فولڈر سے چلائیں
- چیک کریں کہ `docs/_sidebar.md` موجود ہو
### ترقیاتی ماحول کے ٹپس
### ترقیاتی ماحول کی تجاویز
- HTML پراجیکٹس کے لیے VS Code میں Live Server ایکسٹینشن استعمال کریں
- ESLint اور Prettier ایکسٹینشن انسٹال کریں تاکہ فارمیٹنگ یکساں رہے
- جاوا اسکرپٹ کی خرابیوں کے لیے براؤزر DevTools استعمال کریں
- Vue پراجیکٹس کے لیے Vue DevTools براؤزر ایکسٹینشن انسٹال کریں
- HTML پروجیکٹس کے لیے VS Code Live Server ایکسٹینشن استعمال کریں
- مستقل فارمیٹنگ کے لیے ESLint اور Prettier ایکسٹینشن انسٹال کریں
- جاوا اسکرپٹ کی خرابی تلاش کے لیے براؤزر ڈیولپر ٹولز استعمال کریں
- Vue پروجیکٹس کے لیے Vue DevTools براؤزر ایکسٹینشن انسٹال کریں
### کارکردگی کے امور
- ترجمہ شدہ فائلوں کی بڑی تعداد (50+ زبانیں) کلوننگ کو بڑا بناتی ہے
- صرف مواد پر کام کے لیے shallow clone استعمال کریں: `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` میں شامل ہیں)
- ضروری ماحولیاتی ویریبلز کو README میں دستاویز کریں
### پائتھون پراجیکٹس
### پائتھون پروجیکٹس
- ورچوئل ماحول استعمال کریں: `python -m venv venv`
- انحصارات کو بروقت اپڈیٹ رکھیں
- GitHub ٹوکنز کو کم از کم ضروری اجازتیں دینی چاہئیں
- ورچوئل اینوائرنمنٹ استعمال کریں: `python -m venv venv`
- dependencies کو اپ ٹو ڈیٹ رکھیں
- GitHub ٹوکنز کو کم از کم ضروری اجازتیں دیں
### GitHub Models تک رسائی
- GitHub Models کے لیے Personal Access Tokens (PAT) ضروری ہیں
- ٹوکنز کو ماحول کی ویریبلز کے طور پر محفوظ کریں
- ٹوکنز یا اسناد کو کبھی بھی کمیٹ نہ کریں
- ٹوکنز ماحولیاتی ویریبلز کی طرح محفوظ رکھیں
- ٹوکنز یا اسناد کبھی ذخیرہ میں جمع نہ کریں
## اضافی نوٹس
### ہدف سامعین
- ویب ڈویلپمنٹ کے مکمل نو آموز
- ویب ڈویلپمنٹ کے مکمل ابتدائی
- طلباء اور خود سیکھنے والے
- اساتذہ جو نصاب کو کلاس رومز میں استعمال کرتے ہیں
- مواد قابل رسائی اور بتدریج مہارت سازی کے لیے ڈیزائن کیا گیا ہے
- معلمین جو نصاب کلاس روم میں استعمال کرتے ہیں
- مواد قابل رسائی اور تدریجی مہارت سازی کے لیے ڈیزائن کیا گیا ہے
### تعلیمی فلسفہ
- پراجیکٹ پر مبنی سیکھنے کا طریقہ
- بار بار علم کی جانچ (کوئزز)
- پروجیکٹ پر مبنی سیکھنے کا طریقہ
- بار بار معلومات کی جانچ (کوئزز)
- عملی کوڈنگ مشقیں
- حقیقی دنیا کی ایپلیکیشن کی مثالیں
- فریم ورکس سے پہلے بنیادی اصولوں پر توجہ
- حقیقی دنیا کی درخواست کی مثالیں
- فریم ورکس سے پہلے بنیادی باتوں پر توجہ
### مخزن کی دیکھ بھال
### ذخیرہ کا نگہداشت
- سیکھنے والوں اور تعاون کنندگان کی فعال کمیونٹی
- انحصارات اور مواد کی باقاعدہ اپ ڈیٹس
- مسائل اور مباحثے مینٹیینرز کی نگرانی میں
- ترجمہ کی اپ ڈیٹس GitHub Actions کے ذریعے خودکار
- سیکھنے والوں اور تعاون کاروں کی فعال کمیونٹی
- dependencies اور مواد کی باقاعدہ اپ ڈیٹس
- مسائل اور مباحثے مینٹینرز کے زیر نگرانی
- ترجمے کی تازہ کاری خودکار طور پر 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) سیکھنے والوں کے لیے تجویز کردہ
- اضافی کورسز: جنریٹو AI، ڈیٹا سائنس، ML، IoT نصاب دستیاب ہیں
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) جو سیکھنے والوں کے لیے تجویز کردہ ہے
- اضافی کورسز: جنریٹو 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` - کینوس پر مبنی گیم ڈیولپمنٹ
- `9-chat-project/README.md` - AI چیٹ اسسٹنٹ پراجیکٹ
- `9-chat-project/README.md` - AI چیٹ اسسٹنٹ پروجیکٹ
### مونو رپو ساخت
### مونو ریپو ڈھانچہ
اگرچہ یہ روایتی مونو رپو نہیں ہے، یہ مخزن متعدد آزاد پراجیکٹس پر مشتمل ہے:
روایتی مونو ریپو تو نہیں، لیکن اس ذخیرے میں متعدد آزاد پروجیکٹس شامل ہیں:
- ہر سبق خود مختار ہے
- پراجیکٹس انحصارات شیئر نہیں کرتے
- بغیر دوسرے پراجیکٹس کو متاثر کیے انفرادی پراجیکٹس پر کام کریں
- پورے نصاب کے تجربے کے لیے پورا مخزن کلون کریں
- پروجیکٹس کی dependencies مشترک نہیں ہیں
- ایک دوسرے کو متاثر کیے بغیر انفرادی پروجیکٹس پر کام کریں
- مکمل نصاب کے لیے پورے ذخیرے کو کلون کریں
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**خبردار**:
اس دستاویز کا ترجمہ AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کے ذریعے کیا گیا ہے۔ اگرچہ ہم درستگی کے لیے کوشاں ہیں، براہ کرم آگاہ رہیں کہ خودکار تراجم میں غلطیاں یا عدم صحیحیت ہو سکتی ہے۔ اصل دستاویز اپنی اصلی زبان میں معتبر ماخذ سمجھی جائے گی۔ اہم معلومات کے لیے پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کی ذمہ داری ہم پر عائد نہیں ہوتی۔
**ڈس کلیمر**:
یہ دستاویز AI ترجمہ خدمت [Co-op Translator](https://github.com/Azure/co-op-translator) استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ اگرچہ ہم درستگی کے لیے کوشاں ہیں، براہ کرم آگاہ رہیں کہ خودکار تراجم میں غلطیاں یا عدم درستیاں ہو سکتی ہیں۔ اصل دستاویز اپنی مادری زبان میں مستند ماخذ سمجھی جانی چاہیے۔ اہم معلومات کے لیے پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تعبیر کے ذمہ دار نہیں ہیں۔
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -10,29 +10,29 @@
[![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 ایکشن کے ذریعے معاونت (خودکار اور ہمیشہ تازہ ترین)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](./README.md) | [Vietnamese](../vi/README.md)
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Khmer](../km/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](./README.md) | [Vietnamese](../vi/README.md)
> **مقامی طور پر کلون کرنا پسند کریں؟**
> **کیا آپ لوکل طور پر کلون کرنا پسند کرتے ہیں؟**
>
> یہ رفوسٹری 50+ زبانوں کے تراجم شامل کرتی ہے جس سے ڈاؤن لوڈ کا سائز بہت بڑھ جاتا ہے۔ بغیر تراجم کی کلوننگ کے لیے sparse checkout استعمال کریں:
> اس ریپوزیٹری میں 50+ زبانوں میں ترجمے شامل ہیں جو ڈاؤن لوڈ کے سائز کو کافی بڑھا دیتے ہیں۔ بغیر ترجموں کے کلون کرنے کے لیے sparse checkout استعمال کریں:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,170 +48,171 @@ Azure AI Foundry Discord کمیونٹی میں شامل ہوں
> 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 page**](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 Assistant پروجیکٹ ابھی شامل کیا گیا ہے، اسے چیک کریں [project](./9-chat-project/README.md)
نیا AI اسسٹنٹ پروجیکٹ ابھی شامل کیا گیا ہے، چیک کریں [project](./9-chat-project/README.md)
### 📣 اعلان - _جنریٹو AI کے لیے نیا نصاب جے ایس پر ابھی جاری ہوا ہے_
### 📣 اعلان - _جاوا اسکرپٹ کے لیے جنریٹو AI پر نیا نصاب جاری کیا گیا ہے_
ہمارا نیا جنریٹو AI نصاب مت چھوڑیں!
شروع کرنے کے لیے ملاحظہ کریں [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)
شروع کرنے کے لیے وزٹ کریں [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) !
![Background](../../translated_images/ur/background.148a8d43afde5730.webp)
- بنیادی سے لے کر RAG تک تمام موضوعات کا احاطہ۔
- تاریخی شخصیات سے GenAI اور ہمارا ساتھ دینے والا ایپ کے ذریعے بات چیت کریں۔
- مزیدار اور دلچسپ کہانی، آپ وقت میں سفر کریں گے!
- اسباق جو بنیادی باتوں سے لے کر RAG تک کور کرتے ہیں۔
- GenAI اور ہمارے کمپینین ایپ کے ساتھ تاریخی کرداروں سے بات چیت کریں۔
- مزے دار اور دلچسپ قصہ، آپ وقت میں سفر کریں گے!
![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)۔
1. اپنے ریپوزٹری کو اپنے کمپیوٹر پر کلون کریں۔ آپ یہ **Code** بٹن پر کلک کر کے اور 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) بھی شامل ہے۔ آپ Visual Studio Code یہاں سے ڈاؤن لوڈ کر سکتے ہیں [here](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)۔
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 کے اضافی پلگ ان:
> تجویز کردہ 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/))
- اسباق کے بعد کا کوئز [post-lesson quiz](https://ff-quizzes.netlify.app/web/)
> **کوئزز کے بارے میں ایک نوٹ**: تمام کوئزز Quiz-app فولڈر میں محفوظ ہیں، کل 48 کوئزز جن میں ہر ایک میں تین سوالات ہوتے ہیں۔ یہ [یہاں](https://ff-quizzes.netlify.app/web/) دستیاب ہیں، کوئز ایپ مقامی طور پر چلائی جا سکتی ہے یا Azure پر بھی تعینات کی جا سکتی ہے؛ `quiz-app` فولڈر میں دی گئی ہدایات پر عمل کریں۔
> **کوئزز کے بارے میں ایک نوٹ**: تمام کوئزز Quiz-app فولڈر میں موجود ہیں، کل 48 کوئزز، ہر ایک میں تین سوالات ہیں۔ یہ [یہاں](https://ff-quizzes.netlify.app/web/) دستیاب ہیں۔ کوئز ایپ کو مقامی طور پر چلایا جا سکتا ہے یا Azure پر ڈیپلائے کیا جا سکتا ہے؛ `quiz-app` فولڈر میں ہدایات پر عمل کریں۔
## 🗃️ اسباق
| | پروجیکٹ کا نام | سکھائے جانے والے تصورات | تعلیم کے مقاصد | متعلقہ سبق | مصنف |
| | پروجیکٹ کا نام | پڑھائے گئے تصورات | تعلیمی مقاصد | منسلک سبق | مصنف |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Getting Started | پروگرامنگ اور اس کے اوزار کا تعارف | زیادہ تر پروگرامنگ زبانوں اور پیشہ ورانہ ترقی کاروں کی مدد کرنے والے سافٹ ویئر کی بنیادی باتیں سیکھیں | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | GitHub کی بنیادی باتیں، ٹیم کے ساتھ کام کرنا | اپنے پروجیکٹ میں GitHub کو کیسے استعمال کریں، اور دوسروں کے ساتھ ایک کوڈ بیس پر کس طرح تعاون کریں | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Accessibility | ویب ایکسیسبلٹی کی بنیادی باتیں سیکھیں | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | جاوااسکرپٹ ڈیٹا کی اقسام | جاوا اسکرپٹ ڈیٹا کی اقسام کی بنیادی باتیں | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | فنکشنز اور میتھڈز | ایپلیکیشن کے منطق کے بہاؤ کو منظم کرنے کے لیے فنکشنز اور میتھڈز کے بارے میں سیکھیں | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | JS میں فیصلے کرنا | اپنے کوڈ میں فیصلہ سازی کے طریقے استعمال کرتے ہوئے شرائط بنانے کے بارے میں سیکھیں | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Arrays اور Loops | جاوا اسکرپٹ میں arrays اور loops کے ذریعہ ڈیٹا کے ساتھ کام کریں | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML عملی طور پر | آن لائن ٹیریریم بنانے کے لیے HTML تیار کریں، لے آؤٹ بنانے پر توجہ دیں | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS عملی طور پر | آن لائن ٹیریریم کو اسٹائل کرنے کے لیے CSS تیار کریں، CSS کی بنیادی باتوں پر توجہ دیں بشمول صفحے کا ردعمل دینا | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | جاوا اسکرپٹ Closures، DOM میں ترمیم | ٹیریریم کو ڈریگ/ڈراپ انٹرفیس کے طور پر فعال بنانے کے لیے جاوا اسکرپٹ بنائیں، closures اور DOM میں ترمیم پر توجہ دیں | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | ٹائپنگ گیم بنائیں | جاوا اسکرپٹ ایپ کے منطقی بہاؤ کے لیے کی بورڈ ایونٹس کو کیسے استعمال کریں | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | براؤزر کے ساتھ کام کرنا | براؤزر کیسے کام کرتے ہیں، ان کی تاریخ، اور براؤزر ایکسٹینشن کے پہلا عناصر کس طرح تیار کرتے ہیں | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | فارم بنانا، API کال کرنا اور لوکل اسٹوریج میں متغیرات محفوظ کرنا | اپنے براؤزر ایکسٹینشن کے جاوا اسکرپٹ عناصر تیار کریں تاکہ API کال کی جا سکے جو لوکل اسٹوریج میں محفوظ متغیرات استعمال کرتے ہیں | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | براؤزر کے پس منظر کے مراحل، ویب کی کارکردگی | ایکسٹینشن کے آئیکن کو منظم کرنے کے لیے براؤزر کے پس منظر کے مراحل استعمال کریں؛ ویب کارکردگی اور کچھ اصلاحات سیکھیں تاکہ کارکردگی بڑھائی جا سکے | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | جاوا اسکرپٹ کے ساتھ مزید جدید کھیل کی ترقی | کلاسز اور کمپوزیشن دونوں استعمال کرتے ہوئے وراثت اور Pub/Sub پیٹرن کے بارے میں سیکھیں، گیم بنانے کی تیاری کے لیے | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | کینوس پر ڈرائنگ | کینوس API کے بارے میں سیکھیں، جو سیریز پر عناصر ڈرائنگ کے لیے استعمال ہوتا ہے | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | اسکرین پر عناصر کو حرکت دینا | دریافت کریں کہ کس طرح عناصر کو کارٹیسیئن کوآرڈی نیٹس اور کینوس API کی مدد سے حرکت دی جا سکتی ہے | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | تصادم کا پتہ لگانا | عناصر کو آپس میں ٹکرائیں اور ایک دوسرے کے ردعمل کو یقینی بنانے کے لیے keypresses استعمال کریں؛ گیم کی کارکردگی کو یقینی بنانے کے لیے cooldown فنکشن فراہم کریں | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | سکور رکھنا | گیم کی حالت اور کارکردگی کی بنیاد پر ریاضی کے حسابات کریں | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | گیم کا اختتام اور دوبارہ شروع کرنا | گیم کا اختتام اور دوبارہ شروع کرنے کے بارے میں سیکھیں، بشمول اثاثوں کی صفائی اور متغیرات کی ری سیٹ کرنا | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | ویب ایپ میں HTML ٹیمپلیٹس اور روٹس | ملٹی پیج ویب سائٹ کے فن تعمیر کی اسکافولڈنگ کو روٹنگ اور HTML ٹیمپلیٹس کا استعمال کر کے سیکھیں | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | لاگ ان اور رجسٹریشن فارم بنائیں | فارم بنانے اور ویلیڈیشن کے طریقہ کار کے بارے میں سیکھیں | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | ڈیٹا حاصل کرنے اور استعمال کرنے کے طریقے | آپ کی ایپ میں ڈیٹا کیسے آتا اور جاتا ہے، اسے کیسے حاصل کریں، محفوظ کریں، اور ختم کریں | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | اسٹیٹ مینجمنٹ کے تصورات | اپنی ایپ میں اسٹیٹ کو کیسے برقرار رکھا جاتا ہے اور پروگرام کے ذریعے اسے کیسے منظم کیا جاتا ہے | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | VScode کے ساتھ کام کرنا | کوڈ ایڈیٹر استعمال کرنا سیکھیں| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | AI کے ساتھ کام کرنا | اپنا AI اسسٹنٹ بنانا سیکھیں | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 تعلیم
ہمارا نصاب دو اہم تعلیمی اصولوں کو مدنظر رکھتے ہوئے ڈیزائن کیا گیا ہے:
* پروجیکٹ پر مبنی سیکھنا
* کثرت سے کوئزز
یہ پروگرام جاوا اسکرپٹ، HTML، اور CSS کی بنیادیں سکھاتا ہے، نیز آج کے ویب ڈویلپرز کی طرف سے استعمال ہونے والے جدید اوزار اور تکنیکس بھی۔ طلباء کو ٹائپنگ گیم، ورچوئل ٹیریریم، ماحولیاتی براؤزر ایکسٹینشن، اسپیس انویڈر طرز کا گیم، اور کاروباری بنکنگ ایپ بنانے کا عملی تجربہ حاصل کرنے کا موقع ملے گا۔ سیریز کے آخر تک، طلباء کو ویب ڈویلپمنٹ کی ایک مضبوط سمجھ حاصل ہو جائے گی۔
> 🎓 آپ اس نصاب کے ابتدائی چند اسباق کو مائیکروسافٹ لرن پر [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) رہنما خطوط ملاحظہ کریں۔ ہم آپ کی تعمیری آراء کے خیرمقدم کے منتظر ہیں!
| 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 | شروع کرنا | رسائی (Accessibility) | ویب رسائی کی بنیادی باتیں سیکھیں | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS بنیادی باتیں | 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 بنیادی باتیں | Arrays اور Loops | جاوا اسکرپٹ میں ڈیٹا کو Arrays اور Loops کے ذریعے سنبھالنا | [Arrays اور Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML کی مشق | آن لائن ٹیریریم بنانے کے لیے HTML بنائیں، خاص طور پر لے آؤٹ بنانے پر توجہ دیں | [HTML کا تعارف](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS کی مشق | آن لائن ٹیریریم کو اسٹائل کرنے کے لیے CSS بنائیں، CSS کی بنیادی باتوں پر توجہ دیں بشمول صفحہ کو ذمہ دار بنانا | [CSS کا تعارف](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript کلوزرز، 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) | کینوس پر ڈرائنگ | Canvas API کے بارے میں سیکھیں، جو اسکرین پر عناصر ڈرائنگ کے لیے استعمال ہوتی ہے | [کینوس پر ڈرائنگ](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | اسکرین پر عناصر کو حرکت دینا | دریافت کریں کہ عناصر کو کس طرح Cartesian کوآرڈینیٹس اور Canvas API استعمال کرتے ہوئے حرکت دی جا سکتی ہے | [عناصر کو حرکت دینا](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | ٹکراؤ کی شناخت | عناصر کو آپس میں ٹکرانے دیں اور Keypresses استعمال کرتے ہوئے رد عمل ظاہر کریں، اور گیم کی کارکردگی کو یقینی بنانے کے لیے ایک cooldown فنکشن فراہم کریں | [ٹکراؤ کی شناخت](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | اسکور رکھنا | گیم کی حالت اور کارکردگی کی بنیاد پر ریاضیاتی حسابات انجام دیں | [اسکور رکھنا](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | گیم ختم کرنا اور دوبارہ شروع کرنا | گیم کو ختم کرنے اور دوبارہ شروع کرنے کے بارے میں جانیں، بشمول اثاثوں کی صفائی اور ویریبل قدروں کو ری سیٹ کرنا | [اختتامی حالت](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | ویب ایپ میں HTML ٹیمپلیٹس اور راستے | ملٹی پیج ویب سائٹ کی ساخت بنانے کے لیے روٹنگ اور 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`۔
آپ اس دستاویز کو آف لائن [Docsify](https://docsify.js.org/#/) کے ذریعے چلا سکتے ہیں۔ اس ریپو کو فورک کریں، اپنے مقامی مشین پر [Docsify انسٹال کریں](https://docsify.js.org/#/quickstart اور پھر اس ریپو کے روٹ فولڈر میں کمانڈ `docsify serve` چلائیں۔ ویب سائٹ آپ کے لوکل ہوسٹ پر پورٹ 3000 پر دستیاب ہوگی: `localhost:3000`۔
## 📘 PDF
تمام اسباق کا ایک پی ڈی ایف [یہاں](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) دستیاب ہے۔
تمام اسباق کا پی ڈی ایف یہاں مل سکتا ہے [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)۔
## 🎒 دیگر کورسز
ہماری ٹیم دیگر کورسز بھی تیار کرتی ہے! دیکھیں:
ہماری ٹیم دوسرے کورسز بھی فراہم کرتی ہے! چیک کریں:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -227,7 +228,7 @@ Azure AI Foundry Discord کمیونٹی میں شامل ہوں
[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Generative 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)
@ -235,8 +236,8 @@ Azure AI Foundry Discord کمیونٹی میں شامل ہوں
[![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)
---
### 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)
@ -246,8 +247,8 @@ Azure AI Foundry Discord کمیونٹی میں شامل ہوں
[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Copilot 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)
@ -255,21 +256,21 @@ Azure AI Foundry Discord کمیونٹی میں شامل ہوں
## مدد حاصل کریں
اگر آپ پھنس جائیں یا AI ایپس بنانے کے بارے میں کوئی سوال ہو تو۔ MCP کے بارے میں بحث میں دیگر سیکھنے والوں اور تجربہ کار ڈویلپرز سے شامل ہوں۔ یہ ایک معاون کمیونٹی ہے جہاں سوالات خوش آمدید ہیں اور علم آزادانہ طور پر شیئر کیا جاتا ہے۔
اگر آپ رکاوٹ کا سامنا کرتے ہیں یا AI ایپس بنانے کے حوالے سے کوئی سوال ہے تو MCP کے بارے میں بحث میں شامل ہوں۔ یہ ایک معاون کمیونٹی ہے جہاں سوالات خوش آمدید ہیں اور علم آزادانہ طور پر شیئر کیا جاتا ہے۔
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
اگر آپ کو کسی پروڈکٹ کا فیڈبیک ہو یا تعمیر کے دوران کوئی خرابی ہو تو ملاحظہ کریں:
اگر آپ کے پاس کوئی پروڈکٹ فیڈ بیک ہے یا آپ کو کام بناتے وقت کوئی غلطی پیش آتی ہے تو یہاں جائیں:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## لائسنس
یہ ریپوزٹری MIT لائسنس کے تحت ہے۔ مزید معلومات کے لیے [LICENSE](../../LICENSE) فائل دیکھیں۔
یہ ذخیرہ MIT لائسنس کے تحت لائسنس یافتہ ہے۔ مزید معلومات کے لیے [LICENSE](../../LICENSE) فائل دیکھیں۔
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**دستیابی کی اطلاع**:
یہ دستاویز AI ترجمہ خدمت [Co-op Translator](https://github.com/Azure/co-op-translator) کے ذریعے ترجمہ کی گئی ہے۔ اگرچہ ہم درستگی کی کوشش کرتے ہیں، براہ کرم آگاہ رہیں کہ خودکار ترجموں میں غلطیاں یا کمیاں ہو سکتی ہیں۔ اصل دستاویز اپنی مادری زبان میں مستند ماخذ سمجھی جانی چاہیے۔ اہم معلومات کے لیے پیشہ ورانہ انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمہ کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا تشریح کی ذمہ داری ہم پر نہیں ہوگی۔
**ڈس کلیمر**:
اس دستاویز کا ترجمہ AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کے ذریعے کیا گیا ہے۔ اگرچہ ہم درستگی کے لیے کوشاں ہیں، براہ کرم یہ بات ذہن میں رکھیں کہ خودکار تراجم میں غلطیاں یا کمی بیشی ہو سکتی ہے۔ اصل دستاویز اپنی مادری زبان میں ہی مستند ماخذ شمار کی جانی چاہیے۔ اہم معلومات کے لیے پیشہ ور انسانی ترجمہ کو ترجیح دی جانی چاہیے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تعبیر کے لیے ذمہ دار نہیں ہیں۔
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-27T22:15:37+00:00",
"translation_date": "2026-04-06T19:00:10+00:00",
"source_file": "AGENTS.md",
"language_code": "zh-CN"
},
@ -516,8 +516,8 @@
"language_code": "zh-CN"
},
"README.md": {
"original_hash": "a2c9eed480687319517c08a6319e5536",
"translation_date": "2026-03-06T16:23:42+00:00",
"original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-04-06T18:57:05+00:00",
"source_file": "README.md",
"language_code": "zh-CN"
},

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

@ -10,17 +10,17 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# 针对初学者的网页开发课程
# 初学者的网页开发课程
通过微软云倡导者提供的 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`
2. <strong>克隆仓库</strong> `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**加入 Azure AI Foundry Discord结识专家和其他开发者**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 多语言支持
@ -28,11 +28,11 @@
#### 通过 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)](./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)
[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) | [Khmer](../km/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **本地克隆?**
> **喜欢本地克隆?**
>
> 该仓库包含 50 多种语言的翻译文件,显著增加下载体积。想要不含翻译的克隆版本,可以使用稀疏检出:
> 本仓库包含50+语言翻译,显著增加了下载大小。若要克隆时不包含翻译内容,可以使用稀疏检出:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,174 +48,173 @@
> 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),您将找到初学资源、学生包以及获取免费证书优惠券的方式。建议收藏此页,并定期查看,因内容每月更新
访问 [<strong>学生中心页面</strong>](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 课程_
别错过我们的生成式 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 的课程内容
- 使用生成式 AI 和我们的伴侣应用与历史人物互动。
- 有趣且引人入胜的叙事,你将体验时光穿梭
![character](../../translated_images/zh-CN/character.5c0dd8e067ffd693.webp)
每节课包含作业、知识测试和挑战,帮助您学习以下主题:
- 提示词及提示工程
- 文本图像应用生成
每节课都包含作业、知识检测和挑战,帮助你学习以下主题:
- 提示语和提示工程
- 文本图像应用生成
- 搜索应用
访问 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 开始学习!
## 🌱 快速开始
## 🌱 入门指南
> **教师们**,我们[提供了一些建议](for-teachers.md)指导您如何使用这套课程。欢迎在[讨论区](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)提供反馈!
> <strong>教师们</strong>,我们[已包含一些建议](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`
2. <strong>克隆仓库</strong> `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。
1. 将你的仓库克隆到电脑上。你可以点击 **Code** 按钮并复制 URL
我们推荐使用 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 作为编辑器,它自带内置的 [终端](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。你可以在[这里](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)下载 Visual Studio 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>` 替换成刚才复制的 URL
然后,在 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 中打开 [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon),运行以下命令,将 `<your-repository-url>` 替换为您刚刚复制的 URL
```bash
git clone <your-repository-url>
```
2. 在 Visual Studio Code 中打开该文件夹。你可以点击 **文件** > **打开文件夹** 并选择刚刚克隆的文件夹。
2. 在 Visual Studio Code 中打开文件夹。您可以通过点击 **File** > **Open Folder** 并选择您刚刚克隆的文件夹来完成。
> 推荐的 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) - 帮助你更快地编写代码
> * [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` 文件夹中的说明操作
> <strong>关于测验的说明</strong>:所有测验均包含在 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) | 网络应用中的 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 |
| | 项目名称 | 授概念 | 学习目标 | 关课程 | 作者 |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 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用于在屏幕上绘制图形 | [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) | 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 | [浏览器/代码编辑器](../../8-code-editor) | 使用 VScode | 学习如何使用代码编辑器 | [使用 VScode 代码编辑器](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI 助手](./9-chat-project/README.md) | 使用人工智能 | 学习构建您自己的 AI 助手 | [AI 助手项目](./9-chat-project/README.md) | Chris |
## 🏫 教学法
我们的课程设计基于两个关键教学原则:
* 项目驱动学习
我们的课程设计基于两个关键教学原则:
* 项目学习
* 频繁测验
该项目教授 JavaScript、HTML 和 CSS 的基础知识,以及当前 Web 开发者使用的最新工具和技术。学生将通过构建打字游戏、虚拟生态瓶、环保浏览器扩展、太空入侵风格游戏和企业银行应用获得实践经验。系列课程结束时,学生将具备扎实的 Web 开发基础。
> 🎓 你可以将本课程的前几节课作为 Microsoft Learn 上的 [学习路径](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) 进行学习!
该项目教授 JavaScript、HTML 和 CSS 基础知识,以及当今网络开发者使用的最新工具和技术。学生将通过构建打字游戏、虚拟生态瓶、环保浏览器扩展、太空侵略者风格游戏和商业银行应用等项目获得实践经验。课程结束时,学生将掌握扎实的网页开发知识。
通过确保内容与项目对齐,学习过程对学生更具吸引力,概念的掌握度也会提高。我们还编写了几节 JavaScript 基础入门课程,配合来自"[JavaScript 初学者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"合集的视频教程,这些视频的部分作者参与了本课程的编写。
> 🎓 您可以将本课程的前几节作为微软 Learn 平台上的[学习路径](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)进行学习!
此外课前的低风险测验帮助学生树立学习目标课后的测验则确保进一步巩固学习内容。本课程设计灵活且富有趣味性支持整套学习或部分学习。项目从简单开始随着12周课程周期逐步变得复杂
通过确保内容与项目紧密相关,过程对于学生更有吸引力,概念的掌握也将得到增强。我们还编写了多节 JavaScript 基础入门课程配合 “[JavaScript 初学者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)” 视频教程,该教学系列部分作者也参与了本课程编写
虽然我们特意避免引入 JavaScript 框架,以专注于掌握作为 Web 开发者所需的基础技能,但完成本课程后,学习 Node.js 将是下一步的不错选择,推荐相关视频合集 "[Node.js 初学者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"
此外,课堂前的低风险测验帮助学生明确学习目标,课后的第二次测验则确保进一步的知识巩固。本课程设计灵活有趣,可整体或部分学习。项目从小型开始,逐渐增加复杂度,覆盖为期 12 周的周期
> 请查看我们的[行为准则](CODE_OF_CONDUCT.md)和[贡献指南](CONTRIBUTING.md)。欢迎您提供建设性的反馈!
虽然我们刻意避免引入 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)。欢迎您提供建设性的反馈!
## 🧭 离线访问
你可以通过使用 [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
@ -257,23 +256,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 -->
**免责声明**
本文使用 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 -->
Loading…
Cancel
Save