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

update-translations
localizeflow[bot] 1 day ago
parent dd3fd5ed38
commit f83a23dca8

@ -1,7 +1,7 @@
{
"1-getting-started-lessons/1-intro-to-programming-languages/README.md": {
"original_hash": "d45ddcc54eb9232a76d08328b09d792e",
"translation_date": "2026-01-06T10:49:43+00:00",
"original_hash": "bec5e35642176d9e483552bfc82996d8",
"translation_date": "2026-03-06T16:14:33+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
"language_code": "fa"
},
@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-02-06T15:59:48+00:00",
"translation_date": "2026-03-06T16:28:31+00:00",
"source_file": "AGENTS.md",
"language_code": "fa"
},
@ -516,8 +516,8 @@
"language_code": "fa"
},
"README.md": {
"original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-02-06T15:55:30+00:00",
"original_hash": "a2c9eed480687319517c08a6319e5536",
"translation_date": "2026-03-06T16:09:59+00:00",
"source_file": "README.md",
"language_code": "fa"
},

@ -1,24 +1,24 @@
# AGENTS.md
## مروری بر پروژه
## نمای کلی پروژه
این یک مخزن محتوای آموزشی برای آموزش اصول توسعه وب به مبتدیان است. این دوره آموزشی جامع، یک دوره 12 هفته‌ای است که توسط مایکروسافت کلود ادوکیتس توسعه یافته و شامل 24 درس عملی در زمینه جاوااسکریپت، CSS و HTML می‌باشد.
این یک مخزن آموزشی برای آموزش مبانی توسعه وب به مبتدیان است. این دوره آموزشی جامع شامل ۱۲ هفته است که توسط تیم Microsoft Cloud Advocates توسعه یافته و شامل ۲۴ درس عملی درباره JavaScript، CSS و HTML می‌باشد.
### اجزای اصلی
### اجزای کلیدی
- **محتوای آموزشی**: 24 درس ساختاریافته سازمان‌یافته در ماژول‌های مبتنی بر پروژه
- **پروژه‌های عملی**: تری‌ریم، بازی تایپینگ، افزونه مرورگر، بازی فضایی، برنامه بانکداری، ویرایشگر کد و دستیار چت هوش مصنوعی
- **آزمون‌های تعاملی**: 48 آزمون با 3 سوال هر کدام (ارزیابی قبل/بعد از درس)
- **پشتیبانی چندزبانه**: ترجمه خودکار برای بیش از 50 زبان از طریق اکشن‌های گیت‌هاب
- **فناوری‌ها**: HTML، CSS، جاوااسکریپت، Vue.js 3، Vite، Node.js، Express، پایتون (برای پروژه‌های AI)
- **محتوای آموزشی**: ۲۴ درس سازمان‌دهی شده به صورت ماژول‌های پروژه‌محور
- **پروژه‌های عملی**: تراریوم، بازی تایپ، افزونه مرورگر، بازی فضایی، برنامه بانکی، ویرایشگر کد و دستیار چت هوش مصنوعی
- **آزمون‌های تعاملی**: ۴۸ آزمون با ۳ سوال هر کدام (ارزیابی قبل و بعد از درس)
- **پشتیبانی چندزبانه**: ترجمه خودکار به بیش از ۵۰ زبان با استفاده از GitHub Actions
- **فناوری‌ها**: HTML، CSS، JavaScript، Vue.js 3، Vite، Node.js، Express، Python (برای پروژه‌های هوش مصنوعی)
### معماری
- مخزن آموزشی با ساختار مبتنی بر درس‌ها
- هر پوشه درس شامل README، نمونه کدها و راه‌حل‌ها است
- پروژه‌های مستقل در دایرکتوری‌های جداگانه (quiz-app، پروژه‌های مختلف درس‌ها)
- سیستم ترجمه با استفاده از GitHub Actions (co-op-translator)
- مستندات ارائه شده با Docsify و در قالب PDF دردسترس
- مخزن آموزشی با ساختار مبتنی بر درس‌ها
- هر فولدر درس شامل README، مثال‌های کد و راه‌حل‌ها است
- پروژه‌های مستقل در دایرکتوری‌های جداگانه (quiz-app، پروژه‌های مختلف درس‌ها)
- سیستم ترجمه با استفاده از GitHub Actions (co-op-translator)
- مستندات ارائه شده از طریق Docsify و قابل دسترسی به صورت PDF
## دستورات راه‌اندازی
@ -31,7 +31,7 @@ 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,12 +41,12 @@ 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 start # شروع سرور API
npm run lint # اجرای ESLint
npm run format # قالب‌بندی با Prettier
```
@ -72,7 +72,7 @@ npm install
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# تنظیم متغیر محیطی GITHUB_TOKEN
# مقداردهی متغیر محیطی GITHUB_TOKEN
python api.py
```
@ -80,33 +80,33 @@ python api.py
### برای مشارکت‌کنندگان محتوا
1. **شاخه مخزن را فورک کنید** به حساب گیت‌هاب خود
2. **شاخه فورک شده را کلون کنید** به صورت محلی
3. **یک شاخه جدید بسازید** برای تغییراتتان
4. تغییرات در محتوای درس یا نمونه کدها ایجاد کنید
5. هر تغییر کد را در دایرکتوری‌های مرتبط پروژه تست کنید
6. درخواست‌های پول (pull requests) را طبق دستورالعمل‌های مشارکت ارسال کنید
1. **Fork** مخزن به حساب GitHub خود
2. **Clone** کردن Fork روی سیستم محلی
3. ایجاد شاخه جدید برای تغییرات
4. اعمال تغییرات در محتوا یا مثال‌های کد
5. تست تغییرات کد در دایرکتوری پروژه‌های مرتبط
6. ارسال Pull Request با رعایت دستورالعمل‌های مشارکت
### برای یادگیرندگان
1. مخزن را فورک یا کلون کنید
2. مستقیماً به دایرکتوری‌های درس به ترتیب مراجعه کنید
3. فایل‌های README هر درس را مطالعه کنید
4. آزمون‌های قبل از درس را در https://ff-quizzes.netlify.app/web/ تکمیل کنید
5. روی نمونه کدها در پوشه‌های درس کار کنید
6. تمرینات و چالش‌ها را انجام دهید
7. آزمون‌های بعد از درس را انجام دهید
1. Fork یا clone مخزن
2. به ترتیب به دایرکتوری‌های درس‌ها بروید
3. فایل‌های README هر درس را مطالعه کنید
4. آزمون‌های قبل از درس را در https://ff-quizzes.netlify.app/web/ انجام دهید
5. مثال‌های کد در پوشه‌های درس را بررسی کنید
6. تکالیف و چالش‌ها را کامل کنید
7. آزمون‌های پس از درس را برگزار کنید
### توسعه زنده
### توسعه به صورت زنده
- **مستندات**: با دستور `docsify serve` در ریشه اجرا کنید (پورت 3000)
- **اپلیکیشن آزمون**: دستور `npm run dev` را در دایرکتوری quiz-app اجرا کنید
- **پروژه‌ها**: از افزونه Live Server در VS Code برای پروژه‌های HTML استفاده کنید
- **پروژه‌های API**: دستور `npm start` را در دایرکتوری‌های API مربوطه اجرا کنید
- **مستندات**: اجرای `docsify serve` در شاخه اصلی (پورت 3000)
- **برنامه آزمون**: اجرای `npm run dev` در دایرکتوری quiz-app
- **پروژه‌ها**: استفاده از افزونه VS Code Live Server برای پروژه‌های HTML
- **پروژه‌های API**: اجرای `npm start` در دایرکتوری‌های مربوط به API
## دستورالعمل‌های تست
### تست اپلیکیشن آزمون
### تست برنامه آزمون
```bash
cd quiz-app
@ -114,84 +114,84 @@ npm run lint # بررسی مشکلات سبک کد
npm run build # تأیید موفقیت ساخت
```
### تست API بانک
### تست API بانکی
```bash
cd 7-bank-project/api
npm run lint # بررسی مشکلات سبک کد
node server.js # بررسی راه‌اندازی سرور بدون خطاها
npm run lint # بررسی مسائل سبک کد
node server.js # تایید راه‌اندازی سرور بدون خطاها
```
### رویکرد کلی تست
- این یک مخزن آموزشی بدون تست‌های خودکار جامع است
- تست دستی روی موارد زیر تمرکز دارد:
- نمونه کدها بدون خطا اجرا شوند
- لینک‌های مستندات به درستی کار کنند
- ساخت پروژه‌ها موفقیت‌آمیز باشد
- نمونه‌ها طبق بهترین شیوه‌ها باشند
- این یک مخزن آموزشی است و تست‌های خودکار جامع ندارد
- تست دستی تمرکز دارد روی:
- اجرای بدون خطا مثال‌های کد
- عملکرد صحیح لینک‌ها در مستندات
- ساخت پروژه‌ها به صورت موفقیت‌آمیز
- رعایت بهترین شیوه‌ها در مثال‌ها
### بررسی‌های قبل از ارسال
- اجرای `npm run lint` در دایرکتوری‌های حاوی package.json
- اطمینان از صحت لینک‌های مارک‌داون
- تست نمونه کدها در مرورگر یا Node.js
- بررسی حفظ ساختار ترجمه‌ها
- اجرای `npm run lint` در دایرکتوری‌هایی که package.json دارند
- اعتبارسنجی لینک‌های مارک‌داون
- تست مثال‌های کد در مرورگر یا Node.js
- اطمینان از حفظ ساختار ترجمه‌ها
## راهنمای سبک کد
## دستورالعمل‌های سبک کد
### جاوااسکریپت
### JavaScript
- استفاده از نگارش مدرن ES6+
- پیروی از تنظیمات معتبر ESLint ارائه شده در پروژه‌ها
- استفاده از نام‌های متغیر و تابع معنادار برای وضوح آموزشی
- افزودن کامنت برای توضیح مفاهیم برای یادگیرندگان
- فرمت کردن با Prettier در صورت پیکربندی
- استفاده از نحو مدرن ES6+
- پیروی از تنظیمات ESLint موجود در پروژه‌ها
- نام‌گذاری متغیرها و توابع معنادار برای آموزش بهتر
- افزودن کامنت جهت توضیح مفاهیم برای یادگیرندگان
- فرمت کردن با Prettier در صورت تنظیم بودن
### HTML/CSS
- استفاده از عناصر معنایی HTML5
- اصول طراحی واکنش‌گرا
- قراردادهای نامگذاری کلاس‌های واضح
- کامنت‌های توضیح تکنیک‌های CSS برای یادگیرندگان
- استفاده از المان‌های معنایی HTML5
- اصول طراحی واکنش‌گرا
- شیوه نام‌گذاری کلاس‌ها به صورت واضح
- کامنت‌های توضیحی روش‌های CSS برای یادگیرندگان
### پایتون
- رعایت دستورالعمل‌های استایل PEP 8
- نمونه کدهای واضح و آموزشی
- استفاده از Type hints در صورت مفید بودن برای یادگیری
- پیروی از دستورالعمل‌های سبک PEP 8
- مثال‌های کد واضح و آموزشی
- استفاده از نوع‌دهی در مواقع لازم برای یادگیری
### مستندات مارک‌داون
- سلسله مراتب واضح عناوین
- بلوک‌های کد با مشخص کردن زبان
- لینک به منابع اضافی
- تصاویر و اسکرین‌شات‌ها در دایرکتوری `images/`
- متن جایگزین برای تصاویر جهت دسترسی بهتر
- سلسله مراتب شفاف عناوین
- بلاک کد با مشخص کردن زبان
- لینک به منابع اضافی
- تصاویر و اسکرین‌شات‌ها در دایرکتوری `images/`
- متن جایگزین برای تصاویر جهت دسترسی‌پذیری
### سازماندهی فایل‌ها
- درس‌ها به صورت شماره‌گذاری پشت سر هم (مثل 1-getting-started-lessons، 2-js-basics، و غیره)
- هر پروژه دارای پوشه `solution/` و اغلب `start/` یا `your-work/`
- تصاویر در فولدرهای مخصوص هر درس در `images/`
- ترجمه‌ها در ساختار `translations/{language-code}/`
- نام‌گذاری درس‌ها به صورت عددی متوالی (1-getting-started-lessons، 2-js-basics و غیره)
- هر پروژه شامل پوشه‌های `solution/` و معمولاً `start/` یا `your-work/`
- تصاویر در پوشه‌های خاص هر درس واقع در `images/` ذخیره می‌شوند
- ترجمه‌ها در ساختار `translations/{language-code}/` قرار دارند
## ساخت و استقرار
### استقرار اپلیکیشن آزمون (Azure Static Web Apps)
### استقرار برنامه آزمون (Azure Static Web Apps)
quiz-app برای استقرار در Azure Static Web Apps پیکربندی شده است:
برنامه quiz-app برای استقرار در Azure Static Web Apps پیکربندی شده است:
```bash
cd quiz-app
npm run build # پوشه dist/ را ایجاد می‌کند
# هنگام push به شاخه main با استفاده از گردش کار GitHub Actions انتشار می‌دهد
npm run build # پوشه dist/ ایجاد می‌کند
# در هر بار پوش کردن به main با استفاده از گردش کار GitHub Actions مستقر می‌کند
```
پیکربندی Azure Static Web Apps:
- **مکان اپلیکیشن**: `/quiz-app`
- **مکان خروجی**: `dist`
- **روند کاری**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
پیکربندی Azure Static Web Apps:
- **مکان برنامه**: `/quiz-app`
- **مکان خروجی**: `dist`
- **جریان کاری**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### تولید PDF مستندات
@ -200,7 +200,7 @@ npm install # نصب docsify-to-pdf
npm run convert # تولید PDF از docs
```
### مستندات Docsify
### مستندسازی Docsify
```bash
npm install -g docsify-cli # نصب Docsify به صورت سراسری
@ -209,72 +209,74 @@ docsify serve # سرویس‌دهی در localhost:3000
### ساخت‌های خاص پروژه
هر دایرکتوری پروژه ممکن است روند ساخت خاص خود را داشته باشد:
- پروژه‌های Vue: `npm run build` برای ایجاد بسته‌های تولیدی
- پروژه‌های استاتیک: بدون مرحله ساخت، فایل‌ها مستقیماً سرو می‌شوند
هر دایرکتوری ممکن است فرایند ساخت مخصوص به خود را داشته باشد:
- پروژه‌های Vue: اجرای `npm run build` برای تولید نسخه‌های نهایی
- پروژه‌های استاتیک: بدون گام ساخت، فایل‌ها مستقیماً سرو می‌شوند
## دستورالعمل‌های Pull Request
## دستورالعمل‌های درخواست Pull Request
### قالب عنوان
### فرمت عنوان
از عناوین شفاف و توصیفی استفاده کنید که حوزه تغییر را مشخص کند:
- `[Quiz-app] افزودن آزمون جدید برای درس X`
- `[Lesson-3] اصلاح اشتباه تایپی در پروژه تراریوم`
- `[Translation] افزودن ترجمه اسپانیایی برای درس ۵`
- `[Docs] به‌روزرسانی دستورالعمل‌های راه‌اندازی`
از عناوین واضح و توصیفی استفاده کنید که حوزه تغییر را نشان می‌دهند:
- `[Quiz-app] افزودن آزمون جدید برای درس X`
- `[Lesson-3] اصلاح تایپو در پروژه تری‌ریم`
- `[Translation] افزودن ترجمه اسپانیایی برای درس 5`
- `[Docs] به‌روزرسانی دستورالعمل‌های راه‌اندازی`
### بررسی‌های مورد نیاز
### چک‌های مورد نیاز قبل از ارسال PR
قبل از ارسال PR:
1. **کیفیت کد**:
- اجرای `npm run lint` در دایرکتوری پروژه‌های مربوط
- رفع تمام خطاها و هشدارهای lint
1. **کیفیت کد**:
- اجرای `npm run lint` در دایرکتوری‌های مرتبط
- رفع تمامی خطاها و هشدارهای lint
2. **تایید ساخت**:
- اجرای `npm run build` در صورت نیاز
- اطمینان از عدم وجود خطای ساخت
2. **تأیید ساخت**:
- اجرای `npm run build` در صورت نیاز
- اطمینان از عدم وجود خطای ساخت
3. **اعتبارسنجی لینک‌ها**:
- تست تمام لینک‌های مارک‌داون
- اطمینان از کارکرد ارجاعات به تصاویر
3. **اعتبارسنجی لینک‌ها**:
- بررسی همه لینک‌های مارک‌داون
- اطمینان از کارکرد ارجاعات تصاویر
4. **بازبینی محتوا**:
- اصلاح املایی و گرامری
- اطمینان از درستی و آموزشی بودن نمونه‌های کد
- بررسی حفظ معنی در ترجمه‌ها
4. **بازبینی محتوا**:
- بازخوانی و بررسی املایی و دستوری
- اطمینان از صحیح و آموزشی بودن مثال‌های کد
- تضمین دقیق بودن ترجمه‌ها و حفظ معنی اصلی
### الزامات مشارکت
- تایید قرارداد مجوز مایکروسافت (چک خودکار در PR اول)
- پیروی از [کد رفتاری منبع باز مایکروسافت](https://opensource.microsoft.com/codeofconduct/)
- مشاهده [CONTRIBUTING.md](./CONTRIBUTING.md) برای راهنمایی‌های دقیق‌تر
- ارجاع شماره‌های Issue در توضیحات PR در صورت وجود
- موافقت با CLA مایکروسافت (بررسی خودکار در اولین PR)
- رعایت [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- مشاهده [CONTRIBUTING.md](./CONTRIBUTING.md) برای دستورالعمل‌های دقیق
- ارجاع به شماره مسائل در توضیحات PR در صورت وجود
### روند بازبینی
- PRها توسط نگه‌دارندگان و جامعه بررسی می‌شوند
- اولویت بر وضوح آموزشی است
- نمونه‌های کد باید بهترین شیوه‌های کنونی را دنبال کنند
- ترجمه‌ها برای دقت و تناسب فرهنگی بررسی می‌شوند
- PRها توسط نگهدارندگان و جامعه بازبینی می‌شوند
- وضوح آموزشی الویت دارد
- مثال‌های کد باید بهترین شیوه‌ها را دنبال کنند
- ترجمه‌ها برای دقت و انطباق فرهنگی بازبینی می‌شوند
## سیستم ترجمه
### ترجمه خودکار
- استفاده از GitHub Actions با روند کاری co-op-translator
- ترجمه به بیش از 50 زبان به صورت خودکار
- فایل‌های منبع در دایرکتوری‌های اصلی
- فایل‌های ترجمه شده در ساختار `translations/{language-code}/`
- استفاده از GitHub Actions با جریان کاری co-op-translator
- ترجمه خودکار به بیش از ۵۰ زبان
- فایل‌های منبع در دایرکتوری‌های اصلی
- فایل‌های ترجمه شده در `translations/{language-code}/`
### افزودن بهبودهای ترجمه دستی
1. فایل را در `translations/{language-code}/` پیدا کنید
2. بهبودها را با حفظ ساختار اعمال کنید
3. اطمینان از عملکرد صحیح نمونه کدها
4. تست محتوای آزمون محلی‌شده در صورت وجود
1. ورود به فایل در `translations/{language-code}/`
2. اعمال بهبودها با حفظ ساختار
3. اطمینان از عملکرد صحیح مثال‌های کد
4. تست هر محتوای آزمون محلی شده
### فراداده ترجمه
فایل‌های ترجمه شامل هدر فراداده هستند:
فایل‌های ترجمه شده شامل هدر فراداده:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -287,120 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## اشکال‌زدایی و رفع مشکلات
## عیب‌یابی و رفع مشکلات
### مشکلات رایج
### مشکلات متداول
**اپلیکیشن آزمون راه‌اندازی نمی‌شود**:
- نسخه Node.js را بررسی کنید (نسخه 14+ توصیه می‌شود)
- پوشه‌های `node_modules` و فایل `package-lock.json` را حذف و مجدد `npm install` اجرا کنید
- بررسی تداخل پورت‌ها (پیش‌فرض: Vite از پورت 5173 استفاده می‌کند)
**برنامه آزمون اجرا نمی‌شود**:
- نسخه Node.js را بررسی کنید (v14+ توصیه شده)
- حذف `node_modules` و `package-lock.json`، سپس اجرای دوباره `npm install`
- بررسی تداخل پورت‌ها (پیش‌فرض: Vite از پورت 5173 استفاده می‌کند)
**سرور API استارت نمی‌خورد**:
- اطمینان از حداقل نسخه Node.js (node >= 10)
- چک کنید پورت اشغال نشده باشد
- اطمینان از نصب تمام وابستگی‌ها با `npm install`
**سرور API اجرا نمی‌شود**:
- اطمینان از حداقل نسخه Node.js (node >=10)
- بررسی استفاده بودن پورت
- اطمینان از نصب همه وابستگی‌ها با `npm install`
**افزونه مرورگر بارگیری نمی‌شود**:
- بررسی فرمت صحیح `manifest.json`
- کنسول مرورگر برای خطاها را چک کنید
- دستورالعمل نصب افزونه مربوط به مرورگر را دنبال کنید
**افزونه مرورگر لود نمی‌شود**:
- بررسی صحت قالب manifest.json
- چک کردن کنسول مرورگر برای خطاها
- دنبال کردن دستورالعمل نصب افزونه مرورگر خاص
**مشکل در پروژه چت پایتون**:
- اطمینان از نصب بسته OpenAI: `pip install openai`
- چک کنید متغیر محیطی GITHUB_TOKEN تنظیم شده باشد
- بررسی دسترسی مدل‌های گیت‌هاب
**مشکلات پروژه چت پایتون**:
- اطمینان از نصب پکیج OpenAI: `pip install openai`
- بررسی تنظیم متغیر محیطی GITHUB_TOKEN
- بررسی مجوزهای دسترسی به مدل‌های GitHub
**Docsify مستندات را ارائه نمی‌دهد**:
- نصب docsify-cli به صورت جهانی: `npm install -g docsify-cli`
- اجرا از دایرکتوری ریشه مخزن
- بررسی وجود فایل `docs/_sidebar.md`
**مستندات Docsify بارگیری نمی‌شود**:
- نصب docsify-cli به صورت جهانی: `npm install -g docsify-cli`
- اجرای دستور از شاخه ریشه مخزن
- اطمینان از وجود فایل `docs/_sidebar.md`
### نکات محیط توسعه
- استفاده از VS Code با افزونه Live Server برای پروژه‌های HTML
- نصب افزونه‌های ESLint و Prettier برای فرمت بندی یکنواخت
- استفاده از DevTools مرورگر برای اشکال‌زدایی جاوااسکریپت
- برای پروژه‌های Vue، نصب افزونه Vue DevTools مرورگر
- استفاده از VS Code با افزونه Live Server برای پروژه‌های HTML
- نصب افزونه‌های ESLint و Prettier برای قالب‌بندی یکنواخت
- استفاده از DevTools مرورگر برای اشکال‌زدایی JavaScript
- نصب افزونه Vue DevTools برای پروژه‌های Vue
### ملاحظات عملکرد
- تعداد زیاد فایل‌های ترجمه شده (50+ زبان) باعث بزرگی کلون کامل می‌شود
- از کلون سطحی در صورت کار فقط با محتوا استفاده کنید: `git clone --depth 1`
- در هنگام کار روی محتوای انگلیسی ترجمه‌ها را از جستجوها حذف کنید
- روند ساخت در اولین اجرا ممکن است کند باشد (npm install، ساخت Vite)
- تعداد زیاد فایل‌های ترجمه شده (بیش از ۵۰ زبان) باعث بزرگ شدن کلون کامل می‌شود
- استفاده از کلون کم‌عمق در صورت کار صرفاً روی محتوا: `git clone --depth 1`
- حذف ترجمه‌ها از جستجو هنگام کار روی محتوای انگلیسی
- فرایندهای ساخت ممکن است در اجرای اولیه کند باشند (npm install، ساخت Vite)
## ملاحظات امنیتی
### متغیرهای محیطی
- کلیدهای API هرگز نباید در مخزن کامیت شوند
- استفاده از فایل‌های `.env` (که در `.gitignore` هستند)
- مستندسازی متغیرهای محیطی مورد نیاز در README پروژه‌ها
- کلیدهای API هرگز نباید در مخزن کامیت شوند
- استفاده از فایل‌های `.env` (در `.gitignore` موجود است)
- مستندسازی متغیرهای محیطی مورد نیاز در README پروژه‌ها
### پروژه‌های پایتون
- استفاده از محیط‌های مجازی: `python -m venv venv`
- به‌روزرسانی وابستگی‌ها
- توکن‌های گیت‌هاب باید حداقل مجوزهای لازم را داشته باشند
- استفاده از محیط‌های مجازی: `python -m venv venv`
- به‌روزرسانی مداوم وابستگی‌ها
- توکن‌های GitHub باید حداقل مجوزهای لازم را داشته باشند
### دسترسی به مدل‌های گیت‌هاب
### دسترسی به مدل‌های GitHub
- توکن‌های دسترسی شخصی (PAT) برای مدل‌های گیت‌هاب لازم است
- توکن‌ها باید به عنوان متغیرهای محیطی ذخیره شوند
- هرگز توکن‌ها یا اطلاعات ورود را کامیت نکنید
- توکن‌های Personal Access Token (PAT) برای مدل‌های GitHub لازم است
- توکن‌ها باید به صورت متغیر محیطی ذخیره شوند
- هرگز توکن‌ها یا اطلاعات اعتبار را کامیت نکنید
## یادداشت‌های اضافی
### مخاطب هدف
### مخاطبان هدف
- مبتدیان کامل در توسعه وب
- دانشجویان و یادگیرندگان خودآموز
- معلمانی که از دوره در کلاس استفاده می‌کنند
- محتوای طراحی شده برای دسترسی‌پذیری و ارتقاء مهارت تدریجی
- مبتدیان کامل در توسعه وب
- دانش‌آموزان و یادگیرندگان خودآموز
- معلمانی که از این دوره در کلاس‌های درس استفاده می‌کنند
- محتوای طراحی شده برای دسترسی‌پذیری و ساخت مهارت تدریجی
### فلسفه آموزشی
- رویکرد یادگیری مبتنی بر پروژه
- بررسی دانش مکرر (آزمون‌ها)
- تمرینات کدنویسی عملی
- مثال‌های کاربردی دنیای واقعی
- تاکید بر اصول پایه قبل از فریم‌ورک‌ها
- رویکرد یادگیری پروژه محور
- بررسی‌های دانش مکرر (آزمون‌ها)
- تمرین‌های عملی کد نویسی
- مثال‌های کاربردی دنیای واقعی
- تمرکز بر اصول قبل از فریم‌ورک‌ها
### نگهداری مخزن
- جامعه فعال از یادگیرندگان و مشارکت‌کنندگان
- به‌روزرسانی منظم وابستگی‌ها و محتوا
- ارجاعات و بحث‌ها توسط نگه‌دارندگان پایش می‌شود
- به‌روزرسانی‌های ترجمه به صورت خودکار توسط 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) توصیه شده برای یادگیرندگان
- دوره‌های اضافی: AI مولد، علم داده، یادگیری ماشین، برنامۀ IoT در دسترس
- [ماژول‌های 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) توصیه شده برای یادگیرندگان
- دوره‌های اضافی: هوش مصنوعی مولد، علوم داده، یادگیری ماشین، دوره‌های IoT موجود
### کار با پروژه‌های خاص
### کار با پروژه‌های مشخص
برای دستورالعمل‌های دقیق پروژه‌های فردی، به فایل‌های README مراجعه کنید در:
- `quiz-app/README.md` - اپلیکیشن آزمون Vue 3
- `7-bank-project/README.md` - برنامه بانکداری با احراز هویت
- `5-browser-extension/README.md` - توسعه افزونه مرورگر
- `6-space-game/README.md` - توسعه بازی مبتنی بر Canvas
- `9-chat-project/README.md` - پروژه دستیار چت AI
برای دستورالعمل‌های دقیق درباره پروژه‌های فردی به فایل README مراجعه کنید:
- `quiz-app/README.md` - برنامه آزمون Vue 3
- `7-bank-project/README.md` - برنامه بانکی با احراز هویت
- `5-browser-extension/README.md` - توسعه افزونه مرورگر
- `6-space-game/README.md` - توسعه بازی مبتنی بر Canvas
- `9-chat-project/README.md` - پروژه دستیار چت هوش مصنوعی
### ساختار Monorepo
### ساختار مونو رپو
اگرچه این یک monorepo سنتی نیست، این مخزن شامل چندین پروژه مستقل است:
- هر درس به صورت خودکفا است
- پروژه‌ها وابستگی مشترک ندارند
- روی پروژه‌های فردی بدون تأثیرگذاری روی دیگران کار کنید
- برای تجربه کامل دوره، کل مخزن را کلون کنید
اگرچه این مخزن یک مونو رپو سنتی نیست، شامل چندین پروژه مستقل است:
- هر درس به صورت جداگانه مستقل است
- پروژه‌ها وابستگی مشترک ندارند
- روی پروژه‌های فردی بدون تأثیر بر دیگران کار کنید
- کلون کامل مخزن برای تجربه کامل دوره لازم است
---
<!-- 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,199 +12,211 @@
# توسعه وب برای مبتدیان - یک برنامه درسی
اصول توسعه وب را با دوره جامع ۱۲ هفته‌ای ما توسط مایکروسافت کلود ادوکیتس بیاموزید. هر یک از ۲۴ درس به صورت عملی به جاوااسکریپت، CSS و HTML می‌پردازد از طریق پروژه‌های عملی مانند تراریوم‌ها، افزونه‌های مرورگر و بازی‌های فضایی. با آزمون‌ها، بحث‌ها و تکالیف عملی درگیر شوید. مهارت‌های خود را تقویت کنید و با روش آموزش مبتنی بر پروژه مؤثر، دانش خود را بهینه کنید. سفر برنامه‌نویسی خود را امروز آغاز کنید!
اصول پایه توسعه وب را با دوره جامع ۱۲ هفته‌ای ما توسط مدافعان مایکروسافت کلود بیاموزید. هر یک از ۲۴ درس به صورت عملی به جاوااسکریپت، CSS و HTML می‌پردازد، با پروژه‌های کاربردی مانند تراریوم‌ها، افزونه‌های مرورگر و بازی‌های فضایی. در آزمون‌ها، بحث‌ها و وظایف عملی شرکت کنید. مهارت‌های خود را افزایش دهید و حفظ دانش خود را با روش تدریس پروژه‌محور مؤثر ما بهینه‌سازی کنید. سفر کدنویسی خود را امروز آغاز کنید!
به انجمن دیسکورد Azure AI Foundry بپیوندید
به جامعه دیسکورد 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)
برای شروع استفاده از این منابع، مراحل زیر را دنبال کنید:
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)
3. [**به دیسکورد Azure AI Foundry بپیوندید و با کارشناسان و توسعه‌دهندگان همدل ملاقات کنید**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 پشتیبانی چندزبانه
### 🌐 پشتیبانی چند زبانه
#### پشتیبانی شده از طریق GitHub Action (خودکار و همیشه به‌روز)
#### پشتیبانی شده توسط GitHub Action (خودکار و همیشه به‌روز)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](./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 استفاده کنید:
>
> **Bash / macOS / Linux:**
> ```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
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> این به شما همه چیز مورد نیاز برای اتمام دوره را همراه با دانلود بسیار سریعتر می‌دهد.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**اگر مایل هستید زبان‌های ترجمه اضافی پشتیبانی شوند، این زبان‌ها در [اینجا](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) فهرست شده‌اند**
**اگر مایلید زبان‌های ترجمه اضافی پشتیبانی شود، آنها در این آدرس لیست شده‌اند [اینجا](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _آیا دانشجو هستید؟_
#### 🧑‍🎓 _آیا دانش‌آموز هستید؟_
از [**صفحه مرکز دانشجویی**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) دیدن کنید، جایی که منابع مبتدی، بسته‌های دانشجویی و حتی راه‌هایی برای دریافت رایگان کد تخفیف گواهی را پیدا خواهید کرد. این صفحه‌ای است که باید ذخیره کنید و هر از گاهی بررسی کنید چون محتوای آن ماهانه به روز می‌شود.
به صفحه [**مرکز دانش‌آموزان**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) مراجعه کنید که در آن منابع مبتدی، بسته‌های دانش‌آموزی و حتی راه‌هایی برای دریافت کوپن گواهی‌نامه رایگان پیدا خواهید کرد. این صفحه‌ای است که می‌خواهید آن را نشانک گذاری کنید و گهگاه چک کنید چون محتوای آن ماهانه به‌روزرسانی می‌شود.
### 📣 اعلامیه - چالش‌های جدید حالت GitHub Copilot Agent برای تکمیل!
### 📣 اعلامیه - چالش‌های جدید GitHub Copilot Agent Mode برای تکمیل!
چالش جدید اضافه شده است، در اکثر فصل‌ها دنبال "چالش GitHub Copilot Agent 🚀" باشید. این چالش جدیدی است برای شما که با استفاده از GitHub Copilot و حالت Agent تکمیل کنید. اگر قبلاً از حالت Agent استفاده نکرده‌اید، این حالت نه تنها قادر به تولید متن است بلکه می‌تواند فایل بسازد و ویرایش کند، دستورات اجرا کند و بیشتر.
چالش جدید اضافه شده است، به دنبال "چالش GitHub Copilot Agent 🚀" در اکثر فصل‌ها باشید. این یک چالش جدید برای شماست تا با استفاده از GitHub Copilot و حالت Agent آن را کامل کنید. اگر قبلاً از حالت Agent استفاده نکرده‌اید، این حالت قادر است نه تنها متن تولید کند بلکه می‌تواند فایل ایجاد و ویرایش کند، دستورها را اجرا کند و بیشتر.
### 📣 اعلامیه - _پروژه جدید برای ساخت با استفاده از هوش مصنوعی مولد_
### 📣 اعلامیه - _پروژه جدیدی برای ساخت با استفاده از هوش مصنوعی مولد_
پروژه دستیار هوش مصنوعی جدید همین الان اضافه شده است، آن را بررسی کنید [پروژه](./9-chat-project/README.md)
پروژه دستیار هوش مصنوعی جدید به تازگی اضافه شده است، آن را بررسی کنید [پروژه](./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)
- دروس شامل همه چیز از اصول تا RAG.
- درس‌هایی که از مبانی تا RAG را پوشش می‌دهند.
- تعامل با شخصیت‌های تاریخی با استفاده از GenAI و اپلیکیشن همراه ما.
- روایت سرگرم‌کننده و جذاب، شما سفر در زمان خواهید داشت!
- روایت سرگرم‌کننده و جذاب، شما به سفر در زمان خواهید رفت!
![character](../../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) تشویق می‌شود که تیمی از ناظران ما برای پاسخ به سوالات شما حضور دارند.
برای ادامه تحصیل، به شدت پیشنهاد می‌کنیم مواد آموزشی بیشتر را در [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** در بالای صفحه انجام دهید. این کار یک مخزن جدید در حساب گیت‌هاب شما با نسخه‌ای از برنامه درسی ایجاد می‌کند.
مراحل زیر را دنبال کنید:
1. **فورک کردن مخزن**: روی دکمه "Fork" در گوشه بالای سمت راست این صفحه کلیک کنید.
1. **فورک کردن مخزن**: روی دکمه "Fork" در گوشه بالا سمت راست این صفحه کلیک کنید.
2. **کلون کردن مخزن**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### اجرای برنامه درسی در یک Codespace
#### اجرای برنامه درسی در Codespace
در نسخه کپی شده مخزن که ایجاد کرده‌اید، دکمه **Code** را کلیک کرده و **Open with Codespaces** را انتخاب کنید. این یک Codespace جدید برای کار ایجاد خواهد کرد.
در نسخه‌ای از این مخزن که ایجاد کرده‌اید، دکمه **Code** را کلیک کرده و گزینه **Open with Codespaces** را انتخاب کنید. این برای شما یک Codespace جدید ایجاد می‌کند.
![Codespace](../../translated_images/fa/createcodespace.0238bbf4d7a8d955.webp)
#### اجرای برنامه به صورت محلی روی کامپیوتر خود
برای اجرای این برنامه روی کامپیوترتان به یک ویرایشگر متن، یک مرورگر و یک ابزار خط فرمان نیاز دارید. اولین درس ما، [مقدمه‌ای بر زبان‌های برنامه‌نویسی و ابزارهای کار](../../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-getting-started-lessons/1-intro-to-programming-languages) شما را با گزینه‌های مختلف این ابزارها آشنا می‌کند تا بتوانید بهترین‌ها را انتخاب کنید.
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)
سپس، درون [ترمینال](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) در [ویژوال استودیو کد](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) باز کنید و دستور زیر را اجرا کنید، جایگزین `<your-repository-url>` با آدرسی که همین حالا کپی کردید:
سپس، درون [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) در [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) باز کنید و فرمان زیر را اجرا کنید، به جای `<your-repository-url>` آدرسی که تازه کپی کرده‌اید را جایگزین کنید:
```bash
git clone <your-repository-url>
```
۲. پوشه را در ویژوال استودیو کد باز کنید. می‌توانید این کار را با کلیک روی **File** > **Open Folder** و انتخاب پوشه‌ای که همین حالا کلون کرده‌اید، انجام دهید.
> افزونه‌های پیشنهادی ویژوال استودیو کد:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - برای پیش‌نمایش صفحات HTML در ویژوال استودیو کد
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - برای کمک به شما در نوشتن سریع‌تر کد
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) - برای کمک به نوشتن کد سریع‌تر
## 📂 هر درس شامل:
- یادداشت اختیاری
- ویدئوی مکمل اختیاری
- آزمون گرم‌کننده پیش از درس
- درس کتبی
- برای درس‌های مبتنی بر پروژه، راهنمای گام‌به‌گام برای ساخت پروژه
- بررسی دانش
- یک چالش
- مطالعه مکمل
- تمرین
- طرح اولیه اختیاری (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` آمده است.
## 🗃️ درس‌ها
| | نام پروژه | مفاهیم آموزش داده شده | اهداف یادگیری | درس مرتبط | نویسنده |
| :-: | :----------------------------------------------------: | :------------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| ۰۱ | شروع به کار | مقدمه‌ای بر برنامه‌نویسی و ابزارهای مرتبط | یادگیری اصول پایه اکثر زبان‌های برنامه‌نویسی و نرم‌افزاری که به توسعه‌دهندگان حرفه‌ای کمک می‌کند وظایف خود را انجام دهند | [مقدمه بر زبان‌های برنامه‌نویسی و ابزارها](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| ۰۲ | شروع به کار | اصول گیت‌هاب، شامل کار تیمی | نحوه استفاده از گیت‌هاب در پروژه خود، نحوه همکاری با دیگران روی یک کد | [مقدمه بر گیت‌هاب](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| ۰۳ | شروع به کار | دسترسی‌پذیری | یادگیری اصول دسترسی‌پذیری وب | [مبانی دسترسی‌پذیری](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| ۰۴ | مفاهیم پایه JS | انواع داده در جاوااسکریپت | اصول انواع داده در جاوااسکریپت | [انواع داده](./2-js-basics/1-data-types/README.md) | Jasmine |
| ۰۵ | مفاهیم پایه JS | توابع و متدها | آموزش توابع و متدها برای مدیریت جریان منطق برنامه | [توابع و متدها](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| ۰۶ | مفاهیم پایه JS | گرفتن تصمیم با JS | یادگیری ایجاد شرایط در کد با استفاده از روش‌های تصمیم‌گیری | [گرفتن تصمیم](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| ۰۷ | مفاهیم پایه JS | آرایه‌ها و حلقه‌ها | کار با داده‌ها با استفاده از آرایه‌ها و حلقه‌ها در جاوااسکریپت | [آرایه‌ها و حلقه‌ها](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| ۰۸ | [تراریوم](./3-terrarium/solution/README.md) | HTML در عمل | ساخت HTML برای ایجاد یک تراریوم آنلاین، تمرکز بر ساختار صفحه | [مقدمه‌ای بر HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| ۰۹ | [تراریوم](./3-terrarium/solution/README.md) | CSS در عمل | ساخت CSS برای استایل دهی تراریوم آنلاین، تمرکز بر اصول CSS و ساخت صفحه واکنش‌گرا | [مقدمه‌ای بر CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| ۱۰ | [تراریوم](./3-terrarium/solution/README.md) | کلوزرهای جاوااسکریپت، دستکاری DOM | ساخت جاوااسکریپت برای ایجاد رابط کشیدن و رها کردن در تراریوم، تمرکز بر کلوزرها و دستکاری DOM | [کلوزرهای جاوااسکریپت، دستکاری DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| ۱۱ | [بازی تایپ](./4-typing-game/solution/README.md) | ساخت بازی تایپ | یادگیری استفاده از رویدادهای کیبورد برای مدیریت منطق برنامه جاوااسکریپت | [برنامه‌نویسی رویداد محور](./4-typing-game/typing-game/README.md) | Christopher |
| ۱۲ | [افزونه مرورگر سبز](./5-browser-extension/solution/README.md) | کار با مرورگرها | یادگیری طرز کار مرورگرها، تاریخچه آنها و ساختار اولیه افزونه مرورگر | [درباره مرورگرها](./5-browser-extension/1-about-browsers/README.md) | Jen |
| ۱۳ | [افزونه مرورگر سبز](./5-browser-extension/solution/README.md) | ساخت فرم، فراخوانی API و ذخیره متغیرها در ذخیره محلی | ساخت المان‌های جاوااسکریپت در افزونه مرورگر برای فراخوانی API با استفاده از متغیرهای ذخیره شده در ذخیره محلی | [APIها، فرم‌ها و ذخیره محلی](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| ۱۴ | [افزونه مرورگر سبز](./5-browser-extension/solution/README.md) | فرایندهای پس‌زمینه در مرورگر، بهینه‌سازی وب | استفاده از فرایندهای پس‌زمینه مرورگر برای مدیریت آیکون افزونه؛ یادگیری درباره عملکرد وب و بهینه‌سازی‌های مربوطه | [فرایندهای پس‌زمینه و عملکرد](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| ۱۵ | [بازی فضایی](./6-space-game/solution/README.md) | توسعه پیشرفته بازی با جاوااسکریپت | یادگیری وراثت با استفاده از کلاس‌ها و ترکیب و الگوی Pub/Sub، برای آمادگی ساخت بازی | [مقدمه‌ای بر توسعه پیشرفته بازی](./6-space-game/1-introduction/README.md) | Chris |
| ۱۶ | [بازی فضایی](./6-space-game/solution/README.md) | رسم روی بوم | آشنایی با API بوم که برای رسم اجزا روی صفحه استفاده می‌شود | [رسم روی بوم](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| ۱۷ | [بازی فضایی](./6-space-game/solution/README.md) | حرکت دادن اجزا روی صفحه | کشف نحوه حرکت اجزا با استفاده از مختصات کارتزین و API بوم | [حرکت دادن اجزا](./6-space-game/3-moving-elements-around/README.md) | Chris |
| ۱۸ | [بازی فضایی](./6-space-game/solution/README.md) | تشخیص برخورد | ایجاد برخورد بین اجزا و واکنش به هم با کلیدهای فشرده شده و فراهم‌سازی عملکرد خنک‌کننده برای تضمین اجرای صحیح بازی | [تشخیص برخورد](./6-space-game/4-collision-detection/README.md) | Chris |
| ۱۹ | [بازی فضایی](./6-space-game/solution/README.md) | نگهداری امتیاز | انجام محاسبات ریاضی براساس وضعیت و عملکرد بازی | [نگهداری امتیاز](./6-space-game/5-keeping-score/README.md) | Chris |
| ۲۰ | [بازی فضایی](./6-space-game/solution/README.md) | پایان و راه‌اندازی مجدد بازی | آشنایی با پایان و راه‌اندازی مجدد بازی، شامل پاک‌سازی منابع و بازنشانی متغیرها | [شرط پایان](./6-space-game/6-end-condition/README.md) | Chris |
| ۲۱ | [اپ بانکداری](./7-bank-project/solution/README.md) | قالب‌ها و مسیرها در اپ وب | یادگیری ایجاد چارچوب معماری یک وب‌سایت چند صفحه‌ای با استفاده از مسیرها و قالب‌های HTML | [قالب‌ها و مسیرهای HTML](./7-bank-project/1-template-route/README.md) | Yohan |
| ۲۲ | [اپ بانکداری](./7-bank-project/solution/README.md) | ساخت فرم ورود و ثبت نام | یادگیری ساخت فرم‌ها و مدیریت اعتبارسنجی | [فرم‌ها](./7-bank-project/2-forms/README.md) | Yohan |
| ۲۳ | [اپ بانکداری](./7-bank-project/solution/README.md) | روش‌های واکشی و استفاده از داده | نحوه جریان داده‌ها در اپلیکیشن، نحوه واکشی، ذخیره‌سازی و حذف آنها | [دادهها](./7-bank-project/3-data/README.md) | Yohan |
| ۲۴ | [اپ بانکداری](./7-bank-project/solution/README.md) | مفاهیم مدیریت وضعیت | یادگیری اینکه اپ چگونه وضعیت را حفظ می‌کند و چطور می‌توان آن را به صورت برنامه‌ای مدیریت کرد | [مدیریت وضعیت](./7-bank-project/4-state-management/README.md) | Yohan |
| ۲۵ | [کد مرورگر/وی‌اس‌کد](../../8-code-editor) | کار با وی‌اس‌کد | یادگیری استفاده از ویرایشگر کد | [استفاده از ویرایشگر کد وی‌اس‌کد](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| ۲۶ | [دستیارهای هوش مصنوعی](./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 | مبانی 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 |
## 🏫 روش آموزش
برنامه‌ی درسی ما با دو اصل کلیدی آموزش طراحی شده است:
* یادگیری مبتنی بر پروژه
* آزمون‌های مکرر
این برنامه اصول جاوااسکریپت، HTML و CSS و همچنین جدیدترین ابزارها و تکنیک‌های مورد استفاده توسعه‌دهندگان وب امروزی را آموزش می‌دهد. دانش‌آموزان فرصت خواهند داشت با ساختن بازی تایپ، تراریوم مجازی، افزونه مرورگر دوستدار محیط‌زیست، بازی سبک مهاجم فضایی و اپ بانکداری برای کسب‌وکارها، تجربه عملی کسب کنند. تا پایان این مجموعه، دانش‌آموزان درک خوبی از توسعه وب پیدا خواهند کرد.
این برنامه اساس‌های JavaScript، HTML و CSS را آموزش می‌دهد، همچنین جدیدترین ابزارها و تکنیک‌هایی که توسعه‌دهندگان وب امروزه استفاده می‌کنند. دانش‌آموزان فرصت کسب تجربه عملی را با ساخت بازی تایپ، تراریوم مجازی، افزونه مرورگر دوستدار محیط زیست، بازی سبک Space Invader و اپ بانک برای کسب‌وکارها خواهند داشت. تا پایان این مجموعه، یک درک جامع از توسعه وب کسب خواهند کرد.
> 🎓 می‌توانید چند درس اول این برنامه آموزشی را به عنوان یک [مسیر یادگیری](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) در مایکروسافت لرن دنبال کنید!
> 🎓 شما می‌توانید چند درس اول این برنامه را به صورت [مسیر یادگیری](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) در Microsoft Learn دنبال کنید!
با اطمینان از تطابق محتوا با پروژه‌ها، فرآیند یادگیری برای دانش‌آموزان جذاب‌تر می‌شود و حفظ مفاهیم افزایش می‌یابد. همچنین چند درس ابتدایی در مبانی جاوااسکریپت برای معرفی مفاهیم همراه با ویدیویی از مجموعه "[سری مقدماتی به: جاوااسکریپت](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"، که برخی نویسندگان آن در این برنامه همکاری کرده‌اند، نوشته شده است.
با اطمینان از هماهنگی محتوا با پروژه‌ها، روند یادگیری برای دانش‌آموزان جذاب‌تر شده و ماندگاری مفاهیم افزایش می‌یابد. همچنین چند درس مقدماتی در مبانی JavaScript نوشته شده است که مفاهیم را معرفی می‌کند و با ویدئویی از مجموعه آموزشی "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" همراه است که برخی نویسندگان آن به این برنامه کمک کرده‌اند.
علاوه بر این، آزمون کم‌فشار پیش از کلاس هدف دانش‌آموز را به سمت یادگیری موضوع مشخص می‌کند و آزمون دوم پس از کلاس تضمین‌کننده حفظ بیشتر است. این برنامه آموزشی طراحی شده تا انعطاف‌پذیر و سرگرم‌کننده باشد و می‌توان آن را به طور کامل یا جزئی گذراند. پروژه‌ها کوچک شروع شده و تا پایان سیکل ۱۲ هفته‌ای پیچیده‌تر می‌شوند.
علاوه بر این، یک آزمون کم‌فشار قبل از کلاس هدف دانش‌آموز را به سمت یادگیری موضوع تعیین می‌کند، در حالی که آزمون دوم پس از کلاس، حفظ بهتر مطلب را تضمین می‌کند. این برنامه طوری طراحی شده که انعطاف‌پذیر و سرگرم‌کننده باشد و می‌توان آن را به صورت کامل یا بخشی از آن را گذراند. پروژه‌ها از سطح کوچک آغاز شده و تا پایان چرخه ۱۲ هفته‌ای به طور فزاینده‌ای پیچیده می‌شوند.
در حالی که عمداً از معرفی چارچوب‌های جاوااسکریپت خودداری کرده‌ایم تا بر مهارت‌های پایه لازم برای توسعه‌دهنده وب قبل از استفاده از چارچوب تمرکز کنیم، قدم بعدی مناسب پس از تکمیل این دوره می‌تواند یادگیری Node.js از طریق مجموعه دیگری از ویدیوها باشد: "[سری مقدماتی به: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
در حالی که عمداً از معرفی فریم‌ورک‌های JavaScript اجتناب کرده‌ایم تا روی مهارت‌های پایه‌ای که به عنوان توسعه‌دهنده وب نیاز دارید تمرکز کنیم، گام بعدی خوب برای تکمیل این برنامه، یادگیری Node.js از طریق مجموعه ویدئوهای دیگر است: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> به [کد رفتاری](CODE_OF_CONDUCT.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
@ -221,7 +233,7 @@
---
### Generative AI Series
### سری هوش مصنوعی مولد
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -229,7 +241,7 @@
---
### 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)
@ -240,29 +252,29 @@
---
### Copilot Series
### سری 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)
## مجوز
این مخزن تحت مجوز MIT منتشر شده است. برای اطلاعات بیشتر به فایل [LICENSE](../../LICENSE) مراجعه کنید.
این مخزن تحت مجوز MIT است. برای اطلاعات بیشتر به فایل [LICENSE](../../LICENSE) مراجعه کنید.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**سلب مسئولیت**:
این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. هر چند ما در تلاش برای دقت هستیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است دارای خطا یا نادرستی‌هایی باشند. سند اصلی به زبان بومی خود باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حیاتی، ترجمه حرفه‌ای انسانی توصیه می‌شود. ما مسئول هیچ گونه سوءتفاهم یا تفسیر نادرستی که ناشی از استفاده از این ترجمه باشد، نیستیم.
این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما تلاش می‌کنیم دقت را حفظ کنیم، لطفاً آگاه باشید که ترجمه‌های خودکار ممکن است شامل اشتباهات یا نواقصی باشند. سند اصلی به زبان بومی خود باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حیاتی، ترجمه حرفه‌ای انسانی توصیه می‌شود. ما مسئول هیچ گونه سوءتفاهم یا برداشت نادرست ناشی از استفاده از این ترجمه نیستیم.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -1,7 +1,7 @@
{
"1-getting-started-lessons/1-intro-to-programming-languages/README.md": {
"original_hash": "d45ddcc54eb9232a76d08328b09d792e",
"translation_date": "2025-11-03T12:59:41+00:00",
"original_hash": "bec5e35642176d9e483552bfc82996d8",
"translation_date": "2026-03-06T16:21:37+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
"language_code": "ur"
},
@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-02-06T16:11:17+00:00",
"translation_date": "2026-03-06T16:29:46+00:00",
"source_file": "AGENTS.md",
"language_code": "ur"
},
@ -516,8 +516,8 @@
"language_code": "ur"
},
"README.md": {
"original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-02-06T16:05:00+00:00",
"original_hash": "a2c9eed480687319517c08a6319e5536",
"translation_date": "2026-03-06T16:16:39+00:00",
"source_file": "README.md",
"language_code": "ur"
},

@ -2,23 +2,23 @@
## پروجیکٹ کا جائزہ
یہ ویب ڈویلپمنٹ کے بنیادی اصولوں کو ابتدائی افراد کو سکھانے کے لیے ایک تعلیمی نصاب کا ذخیرہ ہے۔ نصاب ایک جامع 12 ہفتوں کا کورس ہے جو Microsoft Cloud Advocates نے تیار کیا ہے، جس میں JavaScript, CSS, اور HTML پر مشتمل 24 عملی اسباق شامل ہیں۔
یہ ویب ڈویلپمنٹ کے بنیادی اصولوں کو ابتدائی افراد کو سکھانے کے لیے ایک تعلیمی نصاب کا ذخیرہ ہے۔ نصاب مائیکروسافٹ کلاؤڈ ایڈووکیٹس کی طرف سے تیار کردہ 12 ہفتوں پر محیط جامع کورس ہے، جس میں 24 عملی سبق شامل ہیں جو جاوا اسکرپٹ، CSS اور HTML کو کور کرتے ہیں۔
### کلیدی اجزاء
### اہم اجزاء
- **تعلیمی مواد**: 24 منظم اسباق جو پروجیکٹ پر مبنی ماڈیولز میں ترتیب دیے گئے ہیں
- **عملی پروجیکٹس**: ٹیریریم، ٹائپنگ گیم، براؤزر توسیع، اسپیس گیم، بینکنگ ایپ، کوڈ ایڈیٹر، اور AI چیٹ اسسٹنٹ
- **انٹرایکٹو کوئزز**: 48 کوئزز، ہر ایک میں 3 سوالات (سبق سے پہلے اور بعد کے جائزے)
- **کثیراللسانی تعاون**: GitHub Actions کے ذریعے 50 سے زائد زبانوں میں خودکار ترجمہ
- **تعلیمی مواد**: 24 منظم سبق جو پروجیکٹ پر مبنی ماڈیولز میں ترتیب دیے گئے ہیں
- **عملی پروجیکٹس**: ٹیریریم، ٹائپنگ گیم، براؤزر ایکسٹینشن، اسپیس گیم، بینکنگ ایپ، کوڈ ایڈیٹر، اور AI چیٹ اسسٹنٹ
- **انٹرایکٹو کوئزز**: 48 کوئزز، ہر ایک میں 3 سوالات (سبق سے پہلے/بعد کی جانچ)
- **کثیر اللسانی حمایت**: GitHub Actions کے ذریعے 50+ زبانوں میں خودکار تراجم
- **ٹیکنالوجیز**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI پروجیکٹس کے لیے)
### فن تعمیر
- سبق کے لحاظ سے تعلیمی ذخیرہ
- ہر سبق کے فولڈر میں README، کوڈ کی مثالیں، اور حل شامل ہیں
- مختلف ڈائریکٹریز میں آزاد پروجیکٹس (quiz-app، مختلف سبق کے پروجیکٹس)
- GitHub Actions (co-op-translator) کے ذریعے ترجمہ کا نظام
- Docsify کے ذریعہ دستاویزات فراہم کی جاتی ہیں اور PDF کے طور پر دستیاب ہیں
- سبق پر مبنی تعلیمی ذخیرہ
- ہر سبق کے فولڈر میں README، کوڈ کے مثالیں، اور حل شامل ہیں
- علیحدہ ڈائریکٹریز میں آزاد پروجیکٹس (quiz-app، مختلف سبق کے پروجیکٹس)
- GitHub Actions (co-op-translator) کے ذریعے ترجمہ نظام
- دستاویزات Docsify کے ذریعے فراہم اور پی ڈی ایف میں دستیاب
## سیٹ اپ کمانڈز
@ -36,8 +36,8 @@ 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 چلائیں
```
@ -47,8 +47,8 @@ npm run lint # ESLint چلائیں
cd 7-bank-project/api
npm install
npm start # اے پی آئی سرور شروع کریں
npm run lint # ای ایس لنٹ چلائیں
npm run format # پریٹیئر کے ساتھ فارمیٹ کریں
npm run lint # ESLint چلائیں
npm run format # Prettier کے ساتھ فارمیٹ کریں
```
### براؤزر ایکسٹینشن پروجیکٹس
@ -56,7 +56,7 @@ npm run format # پریٹیئر کے ساتھ فارمیٹ کریں
```bash
cd 5-browser-extension/solution
npm install
# براؤزر مخصوص ایکسٹینشن لوڈ کرنے کی ہدایات پر عمل کریں
# براوزر مخصوص ایکسٹینشن لوڈ کرنے کی ہدایات پر عمل کریں
```
### اسپیس گیم پروجیکٹس
@ -64,219 +64,219 @@ npm install
```bash
cd 6-space-game/solution
npm install
# بروزر میں index.html کھولیں یا Live Server استعمال کریں
# index.html کو براؤزر میں کھولیں یا Live Server استعمال کریں
```
### چیٹ پروجیکٹ (Python بیک اینڈ)
### چیٹ پروجیکٹ (Python Backend)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# GITHUB_TOKEN ماحول کی ویری ایبل سیٹ کریں
# GITHUB_TOKEN ماحول کی متغیر سیٹ کریں
python api.py
```
## ترقیاتی ورک فلو
### مواد کے منتظمین کے لیے
### مواد کے تعاون کاروں کے لیے
1. **ریپوزٹری کو فورک کریں** اپنے GitHub اکاؤنٹ میں
2. **اپنے فورک کو کلون کریں** لوکل مشین پر
3. **تبدیلیوں کے لیے نئی شاخ بنائیں**
4. سبق کے مواد یا کوڈ کی مثالوں میں تبدیلی کریں
5. متعلقہ پروجیکٹس کے فولڈرز میں کوڈ کی تبدیلیوں کا ٹیسٹ کریں
6. شراکت کی ہدایات کے مطابق پل ریکویسٹ جمع کروائیں
1. **ذخیرہ اپنے GitHub اکاؤنٹ پر فورک کریں**
2. **اپنے فورک کو مقامی کلون کریں**
3. **اپنے تبدیلیوں کے لیے نیا برانچ بنائیں**
4. سبق کے مواد یا کوڈ مثالوں میں تبدیلی کریں
5. متعلقہ پروجیکٹ ڈائریکٹریز میں کوڈ میں تبدیلیوں کو ٹیسٹ کریں
6. تعاون کی ہدایات کے مطابق پل ریکوئسٹس بھیجیں
### سیکھنے والوں کے لیے
### طلباء کے لیے
1. ریپوزٹری کو فورک یا کلون کریں
2. سبق کے فولڈرز میں ترتیب کے مطابق جائیں
3. ہر سبق کے README فائل پڑھیں
4.سبق سے پہلے کے کوئزز مکمل کریں https://ff-quizzes.netlify.app/web/
5. سبق کے فولڈرز میں کوڈ کی مثالیں آزمائیں
1. ذخیرہ فورک یا کلون کریں
2. سبق کی ڈائریکٹریز کو ترتیب سے دیکھیں
3. ہر سبق کے README فائلز پڑھیں
4. سبق سے پہلے کوئزز مکمل کریں https://ff-quizzes.netlify.app/web/
5. سبق کے فولڈرز میں کوڈ مثالوں پر کام کریں
6. اسائنمنٹس اور چیلنجز مکمل کریں
7.سبق کے بعد کے کوئزز دیں
7. سبق کے بعد کوئزز لیں
### لائیو ترقی
- **دستاویزات**: جڑ میں `docsify serve` چلائیں (پورٹ 3000)
- **کوئز ایپ**: `quiz-app` ڈائرکٹری میں `npm run dev` چلائیں
- **دستاویزات**: روٹ میں `docsify serve` چلائیں (پورٹ 3000)
- **کوئز ایپ**: `quiz-app` ڈائریکٹری میں `npm run dev` چلائیں
- **پروجیکٹس**: HTML پروجیکٹس کے لیے VS Code Live Server ایکسٹینشن استعمال کریں
- **API پروجیکٹس**: متعلقہ API ڈائرکٹریز میں `npm start` چلائیں
- **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` چلائیں
- مارک ڈاؤن لنکس کی تصدیق کریں
- براؤزر یا Node.js میں کوڈ کی مثالیں ٹیسٹ کریں
- ترجمے صحیح ساخت کے مطابق ہوں
- package.json والی ڈائریکٹریز میں `npm run lint` چلائیں
- مارک ڈاؤن لنکس کی درستگی یقینی بنائیں
- کوڈ مثالوں کو براؤزر یا Node.js میں ٹیسٹ کریں
- تصدیق کریں کہ تراجم صحیح ساخت برقرار رکھیں
## کوڈ اسٹائل کے اصول
## کوڈ اسٹائل گائیڈ لائنز
### JavaScript
### جاوا اسکرپٹ
- جدید ES6+ اصول استعمال کریں
- پروجیکٹس میں دیئے گئے معیاری ESLint کنفیگریشنز فالو کریں
- تعلیمی وضاحت کے لیے بامعنی متغیر اور فنکشن نام استعمال کریں
- جدید ES6+ نحو استعمال کریں
- پروجیکٹس میں فراہم کردہ معیاری ESLint کنفیگریشن پر عمل کریں
- تعلیمی وضاحت کے لیے بامعنی متغیر اور فنکشن کے نام استعمال کریں
- سیکھنے والوں کے لیے تصورات کی وضاحت کے لیے تبصرے شامل کریں
- جہاں پریٹیئر کنفیگرڈ ہو فرمیٹنگ کریں
- جہاں کنفیگر ہو وہاں Prettier سے فارمیٹ کریں
### HTML/CSS
- معنوی HTML5 عناصر
- ریسپانسیو ڈیزائن اصول
- واضح کلاس کے نام رکھنے کے اصول
- CSS تکنیکس کی وضاحت کے لیے تبصرے
- معنوی HTML5 عناصر استعمال کریں
- ریسپانسیو ڈیزائن کے اصول
- واضح کلاس ناموں کے قواعد
- CSS تکنیک کی وضاحت کے لیے تبصرے
### Python
### پائتھان
- PEP 8 اسٹائل گائیڈلائنس
- واضح، تعلیمی کوڈ کی مثالیں
- سیکھنے کے لیے ٹائپ ہنٹس جہاں مفید ہوں
- PEP 8 اسٹائل گائیڈ لائنز
- واضح، تعلیمی کوڈ مثالیں
- جہاں مفید ہو، ٹائپ ہنٹس
### مارک ڈاؤن دستاویزات
- واضح سرخیوں کی ترتیب
- واضح ہیڈنگ ہائیرارکی
- زبان کی وضاحت کے ساتھ کوڈ بلاکس
- اضافی وسائل کے لنکس
- اضافی وسائط کے لنکس
- `images/` فولڈرز میں اسکرین شاٹس اور تصاویر
- رسائی کے لیے تصاویر کے لیے الف ٹیکسٹ
- رسائی کے لیے تصاویر کا alt متن
### فائل آرگنائزیشن
### فائل تنظیم
- اسباق مسلسل نمبر شدہ (1-getting-started-lessons, 2-js-basics, وغیرہ)
- ہر پروجیکٹ کے پاس `solution/` اور اکثر `start/` یا `your-work/` فولڈرز
- سبق نمبر وار ترتیب دیے گئے (1-getting-started-lessons, 2-js-basics, وغیرہ)
- ہر پروجیکٹ میں `solution/` اور اکثر `start/` یا `your-work/` ڈائریکٹریز
- تصاویر سبق مخصوص `images/` فولڈرز میں محفوظ
- ترجمے `translations/{language-code}/` ڈھانچے میں
- تراجم `translations/{language-code}/` ساخت میں
## بلڈ اور تعیناتی
### کوئز ایپ تعیناتی (Azure Static Web Apps)
کوئز-ایپ Azure Static Web Apps تعیناتی کے لیے ترتیب دی گئی ہے:
کوئز ایپ کو Azure Static Web Apps تعیناتی کے لیے ترتیب دیا گیا ہے:
```bash
cd quiz-app
npm run build # dist/ فولڈر بناتا ہے
# مرکزی برانچ پر پش کرنے پر GitHub Actions ورک فلو کے ذریعے تعینات کرتا ہے
npm run build # فولڈر dist/ بناتا ہے
# مرکزی شاخ پر push کرنے پر GitHub Actions ورک فلو کے ذریعے تعینات کرتا ہے
```
Azure Static Web Apps کنفیگریشن:
- **ایپ کی جگہ**: `/quiz-app`
- **آؤٹ پٹ کی جگہ**: `dist`
- **ایپ کا مقام**: `/quiz-app`
- **آؤٹ پٹ لوکیشن**: `dist`
- **ورک فلو**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### دستاویزات PDF جنریشن
```bash
npm install # انسٹال کریں docsify-to-pdf
npm run convert # docs سے PDF تیار کریں
npm install # docsify-to-pdf انسٹال کریں
npm run convert # دستاویزات سے PDF بنائیں
```
### Docsify دستاویزات
```bash
npm install -g docsify-cli # گلوبلی Docsify انسٹال کریں
docsify serve # localhost:3000 پر سروس فراہم کریں
npm install -g docsify-cli # ڈاکسفائی کو عالمی سطح پر انسٹال کریں
docsify serve # لوکل ہوسٹ پر 3000 پورٹ پر سروس فراہم کریں
```
### پروجیکٹ مخصوص بلڈ
### پروجیکٹ مخصوص بلڈز
ہر پروجیکٹ فولڈر کا اپنا بلڈ پروسیس ہوسکتا ہے:
- Vue پروجیکٹس: `npm run build` سے پروڈکشن بنڈلز بنتے ہیں
- سٹیٹک پروجیکٹس: کوئی بلڈ قدم نہیں، فائلیں براہ راست سروس کی جاتی ہیں
ہر پروجیکٹ ڈائریکٹری کا اپنا بلڈ عمل ہو سکتا ہے:
- Vue پروجیکٹس: `npm run build` پروڈکشن بنڈل بناتا ہے
- سٹیٹک پروجیکٹس: کوئی بلڈ مرحلہ نہیں، فائلز براہ راست سرونگ
## پل ریکویسٹ ہدایات
## پل ریکوئسٹ گائیڈ لائنز
### عنوان کا فارمٹ
### عنوان کی شکل
واضح، وضاحتی عنوانات استعمال کریں جو تبدیلی کے شعبے کی نشاندہی کریں:
واضح، وضاحتی عنوان استعمال کریں جو تبدیلی کے شعبے کو ظاہر کریں:
- `[Quiz-app] سبق X کے لیے نیا کوئز شامل کریں`
- `[Lesson-3] ٹیریریم پروجیکٹ میں ٹائپ کی اصلاح`
- `[Lesson-3] ٹیریریم پروجیکٹ میں ٹائپو درست کریں`
- `[Translation] سبق 5 کے لیے ہسپانوی ترجمہ شامل کریں`
- `[Docs] سیٹ اپ ہدایات کو اپ ڈیٹ کریں`
- `[Docs] سیٹ اپ ہدایات اپ ڈیٹ کریں`
### ضروری چیکس
PR جمع کروانے سے پہلے:
1. **کوڈ کا معیار**:
- متاثرہ پروجیکٹ فولڈرز میں `npm run lint` چلائیں
- تمام لِنٹ کی خرابیوں اور وارننگز کو درست کریں
1. **کوڈ کوالٹی**:
- متعلقہ پروجیکٹ ڈائریکٹریز میں `npm run lint` چلائیں
- تمام لِنٹنگ غلطیاں اور وارننگز حل کریں
2. **بلڈ کی تصدیق**:
- اگر قابل اطلاق ہو تو `npm run build` چلائیں
- یقینی بنائیں کہ کوئی بلڈ کی خرابی نہیں
2. **بلڈ تصدیق**:
- جہاں قابل اطلاق ہو `npm run build` چلائیں
- یقینی بنائیں کہ کوئی بلڈ غلطی نہ ہو
3. **لنک کی تصدیق**:
- تمام مارک ڈاؤن لنکس کا ٹیسٹ کریں
- تصویری حوالہ جات کی جانچ کریں
3. **لنک ویلیڈیشن**:
- تمام مارک ڈاؤن لنکس ٹیسٹ کریں
- تصویر کے ریفرنس کام کریں
4. **مواد کا جائزہ**:
- املا اور گرائمر کے لیے پروف ریڈنگ کریں
- کوڈ کی مثالیں درست اور تعلیمی ہوں
- ترجمے اصل معنی کو برقرار رکھیں
- املا اور گرامر کی پروف ریڈنگ کریں
- کوڈ مثالیں درست اور تعلیمی ہوں
- تراجم اصل معنی برقرار رکھیں
### شراکت کی ضروریات
### تعاون کی ضروریات
- Microsoft CLA سے اتفاق کریں (پہلے PR پر خودکار چیک)
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) کی پیروی کریں
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) پر عمل کریں
- تفصیلی ہدایات کے لیے [CONTRIBUTING.md](./CONTRIBUTING.md) دیکھیں
- اگر قابل اطلاق ہو تو PR کی تفصیل میں مسئلے کے نمبر کا حوالہ دیں
- PR تفصیل میں اگر قابل اطلاق ہو تو مسئلہ نمبر شامل کریں
### جائزہ کا عمل
- PRs کو مینٹینرز اور کمیونٹی کے ذریعے جائزہ لیا جاتا ہے
- PRs کی ملاحظہ کاری مینٹینرز اور کمیونٹی کرتے ہیں
- تعلیمی وضاحت کو ترجیح دی جاتی ہے
- کوڈ کی مثالیں جدید بہترین طریقہ کار کی پیروی کریں
- ترجمے درستگی اور ثقافتی مطابقت کے لیے جائزہ لیں
- کوڈ مثالیں موجودہ بہترین طریقوں کی پیروی کریں
- تراجم درستگی اور ثقافتی مناسبت کے لیے جائزہ لیے جاتے ہیں
## ترجمہ کا نظام
## ترجمہ نظام
### خودکار ترجمہ
- GitHub Actions کے ساتھ co-op-translator ورک فلو استعمال کرتا ہے
- 50 سے زائد زبانوں میں خود بخود ترجمہ کرتا ہے
- ماخذ فائلیں مرکزی ڈائریکٹریز میں
- ترجمہ شدہ فائلیں `translations/{language-code}/` فولڈرز میں
- 50+ زبانوں میں خودکار ترجمہ کرتا ہے
- بنیادی ڈائریکٹریز میں ماخذ فائلیں
- ترجمہ شدہ فائلیں `translations/{language-code}/` ڈائریکٹریز میں
### دستی ترجمہ کی بہتری شامل کرنا
### دستی ترجمے کی بہتری شامل کرنا
1. `translations/{language-code}/` فولڈر میں فائل تلاش کریں
2. ساخت کو برقرار رکھتے ہوئے بہتری کریں
3. یقینی بنائیں کہ کوڈ کی مثالیں کام کر رہی ہوں
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 پورٹ 5173 استعمال کرتا ہے)
- Node.js ورژن چیک کریں (v14+ کی سفارش)
- `node_modules` اور `package-lock.json` حذف کریں، پھر `npm install` چلائیں
- پورٹ تنازعہ چیک کریں (ڈیفالٹ: Vite پورٹ 5173 استعمال کرتا ہے)
**API سرور شروع نہیں ہوتا**:
- Node.js کا ورژن کم از کم 10 ہونا چاہیے
- چیک کریں کہ پورٹ پہلے سے استعمال میں نہیں ہے
- یقینی بنائیں کہ تمام انحصار `npm install` سے انسٹال ہوئے ہیں
- Node.js ورژن کم از کم (node >=10) یقینی بنائیں
- دیکھیں کہ پورٹ استعمال میں تو نہیں
- تمام dependencies `npm install` سے انسٹال ہوں
**براؤزر ایکسٹینشن لوڈ نہیں ہوتی**:
- manifest.json صحیح شکل میں ہے یہ تصدیق کریں
- براؤزر کے کنسول میں ایررز چیک کریں
- manifest.json کی درست فارمیٹنگ چیک کریں
- براؤزر کنسول میں غلطیاں دیکھیں
- براؤزر مخصوص ایکسٹینشن انسٹالیشن ہدایات پر عمل کریں
**Python چیٹ پروجیکٹ کے مسائل**:
- OpenAI پیکیج انسٹال کریں: `pip install openai`
- GITHUB_TOKEN ماحول متغیر سیٹ ہے یہ چیک کریں
- GitHub ماڈلز کی رسائی کی اجازتوں کا جائزہ لیں
**Python چیٹ پروجیکٹ مسائل**:
- 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` موجود ہے
### ترقیاتی ماحول کے مشورے
- HTML پروجیکٹس کے لیے VS Code لائیو سرور ایکسٹینشن استعمال کریں
- مستقل فارمیٹنگ کے لیے ESLint اور Prettier ایکسٹینشن انسٹال کریں
- JavaScript کی ڈی بگنگ کے لیے براؤزر DevTools استعمال کریں
- JavaScript ڈیبگنگ کے لیے براؤزر ڈویلپر ٹولز استعمال کریں
- 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 میں مطلوبہ ماحول کے متغیرات دستاویز کریں
- `.env` فائلز استعمال کریں (جو پہلے سے `.gitignore` میں ہیں)
- پروجیکٹ کے READMEs میں ضروری ماحول متغیرات دستاویز کریں
### Python پروجیکٹس
### پائتھان پروجیکٹس
- ورچوئل ماحول استعمال کریں: `python -m venv venv`
- انحصار کو تازہ ترین رکھیں
- GitHub ٹوکنز کے لیے کم از کم ضروری اجازتیں رکھیں
- dependencies کو اپ ڈیٹ رکھیں
- GitHub ٹوکنز میں کم از کم ضروری اجازتیں ہوں
### GitHub ماڈلز کی رسائی
### GitHub Models تک رسائی
- GitHub ماڈلز کے لیے پرسنل ایکسس ٹوکن (PAT) ضروری ہے
- ٹوکنز ماحول کے متغیرات کے طور پر محفوظ کریں
- ٹوکنز یا اسناد کو کبھی کمیٹ نہ کریں
- GitHub Models کے لیے پرسنل ایکسس ٹوکنز (PAT) ضروری
- ٹوکنز ماحول متغیرات کے طور پر محفوظ
- ٹوکنز یا کریڈینشلز کبھی بھی کمیٹ نہ کریں
## اضافی نوٹس
### ہدف ناظرین
### ہدف سامعین
- ویب ڈویلپمنٹ کے مکمل نو آموز
- ویب ڈویلپمنٹ کے کل جب beginner
- طلباء اور خود سیکھنے والے
- نصاب کو کلاس روم میں استعمال کرنے والے اساتذہ
- مواد قابل رسائی اور تدریجی مہارت کی تعمیر کے لیے ڈیزائن کیا گیا ہے
- اساتذہ جو نصاب کلاس روم میں استعمال کرتے ہیں
- مواد رسائی کے لیے ڈیزائن کیا گیا ہے اور ہنر کی تدریجی ترقی
### تعلیمی فلسفہ
- پروجیکٹ کی بنیاد پر سیکھنے کا طریقہ
- بار بار علم کی جانچ (کوئزز)
- عملی کوڈنگ کی مشقیں
- حقیقی دنیا کی ایپلیکیشن کی مثالیں
- پروجیکٹ پر مبنی سیکھنے کا طریقہ
- کثرت سے علم کی جانچ (کوئزز)
- عملی کوڈنگ مشقیں
- حقیقی دنیا کی تطبیقی مثالیں
- فریم ورکس سے پہلے بنیادی اصولوں پر توجہ
### ذخیرہ کی دیکھ بھال
- سرگرم کمیونٹی شامل سیکھنے والوں اور تعاون کرنے والوں کی
- انحصار اور مواد کی باقاعدہ اپ ڈیٹس
- مسائل اور مباحثے مینٹینرز کی زیر نگرانی
- ترجمہ کی اپ ڈیٹس 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 نصاب دستیاب
- اضافی کورسز: جنریٹیو AI، ڈیٹا سائنس، ML، IoT نصاب دستیاب
### مخصوص پروجیکٹس کے ساتھ کام کرنا
تفصیلی ہدایات کے لیے ہر پروجیکٹ کے README فائلوں کا حوالہ دیں:
انفرادی پروجیکٹس کے لیے تفصیلی ہدایات کے لیے README فائلز دیکھیں:
- `quiz-app/README.md` - Vue 3 کوئز ایپلیکیشن
- `7-bank-project/README.md` - بینکنگ ایپلیکیشن مع تصدیق
- `5-browser-extension/README.md` - براؤزر ایکسٹینشن ڈویلپمنٹ
- `5-browser-extension/README.md` - براؤزر ایکسٹینشن کی ترقی
- `6-space-game/README.md` - کینوس پر مبنی گیم ڈویلپمنٹ
- `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,198 +10,208 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# ویب ڈویلپمنٹ برائے مبتدئین - ایک نصاب
# ویب ڈیولپمنٹ برائے ابتدائی - ایک نصاب
مائیکروسافٹ کلاؤڈ ایڈووکیٹس کے ذریعہ ہمارے 12 ہفتوں کے جامع کورس کے ساتھ ویب ڈویلپمنٹ کی بنیادی باتیں سیکھیں۔ 24 اسباق میں سے ہر ایک جاوا اسکرپٹ، CSS، اور HTML کو عملی منصوبوں جیسے ٹیریریمز، براؤزر ایکسٹینشنز، اور خلائی کھیلوں کے ذریعے جانچتا ہے۔ کوئزز، مباحثوں، اور عملی اسائنمنٹس کے ساتھ مشغول ہوں۔ ہماری مؤثر پروجیکٹ پر مبنی تعلیم کے ساتھ اپنی مہارتوں کو بہتر بنائیں اور اپنے علم کو برقرار رکھنے کو بہتر بنائیں۔ آج ہی اپنے کوڈنگ کے سفر کا آغاز کریں!
Microsoft Cloud Advocates کی طرف سے ہمارا 12 ہفتوں کا جامع کورس کے ساتھ ویب ڈیولپمنٹ کی بنیادیں سیکھیں۔ 24 اسباق میں سے ہر ایک JavaScript، CSS، اور HTML میں ہاتھ سے تجرباتی پروجیکٹس جیسے کہ ٹیریریمز، براؤزر ایکسٹینشنز، اور اسپیس گیمز کے ذریعے وارد ہوتا ہے۔ کوئزز، مباحثے، اور عملی اسائنمنٹس میں حصہ لیں۔ اپنی مہارتیں بڑھائیں اور ہمارے مؤثر پروجیکٹ پر مبنی پیڈاگوگی کے ساتھ اپنے علم کو بہتر بنائیں۔ آج ہی اپنی کوڈنگ سفر شروع کریں!
Azure AI Foundry Discord کمیونٹی میں شامل ہوں
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
ان وسائل کو استعمال شروع کرنے کے لیے یہ اقدامات کریں:
1. **ریپوزٹری کو فورک کریں**: کلک کریں [![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`
1. **رفوسٹری کو فورک کریں**: کلک کریں [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **رفوسٹری کو کلون کریں**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Azure AI Foundry Discord میں شامل ہوں اور ماہرین اور دیگر ڈویلپرز سے ملاقات کریں**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 کثیر لسانی معاونت
### 🌐 کثیرالزبانی تعاون
#### GitHub Action کے ذریعے سپورٹ کیا گیا (خودکار اور ہمیشہ تازہ ترین)
#### GitHub Action کے ذریعہ حمایت یافتہ (خودکار اور ہمیشہ جدید)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](./README.md) | [Vietnamese](../vi/README.md)
> **کیا آپ کو مقامی طور پر کلون کرنا پسند ہے؟**
> اس ریپوزٹری میں 50+ زبانوں کے ترجمے شامل ہیں جو کہ ڈاؤن لوڈ کے سائز کو نمایاں طور پر بڑھاتے ہیں۔ ترجموں کے بغیر کلون کرنے کے لیے sparse checkout استعمال کریں:
> **مقامی طور پر کلون کرنا پسند کریں؟**
>
> یہ رفوسٹری 50+ زبانوں کے تراجم شامل کرتی ہے جس سے ڈاؤن لوڈ کا سائز بہت بڑھ جاتا ہے۔ بغیر تراجم کی کلوننگ کے لیے sparse checkout استعمال کریں:
>
> **Bash / macOS / Linux:**
> ```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
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> اس سے آپ کو تیزی سے کورس مکمل کرنے کے لیے سب کچھ مل جائے گا۔
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**اگر آپ چاہتے ہیں کہ اضافی ترجمہ کی زبانوں کی حمایت کی جائے تو یہاں دیکھیں [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**اگر آپ مزید ترجمہ شدہ زبانیں شامل کرانا چاہتے ہیں تو وہ یہاں ملاحظہ کریں [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _کیا آپ طالب علم ہیں؟_
جائیں [**Student Hub صفحہ**](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 اسسٹنٹ پروجیکٹ ابھی شامل کیا گیا ہے، اسے دیکھیں [project](./9-chat-project/README.md)
نیا AI Assistant پروجیکٹ ابھی شامل کیا گیا ہے، اسے چیک کریں [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 تک سب کچھ کور کرتے ہیں۔
- جن AI اور ہمارے معاون ایپ کے ذریعے تاریخی کرداروں کے ساتھ بات چیت کریں۔
- خوشگوار اور دلچسپ بیانیہ، آپ وقت میں سفر کریں گے!
- بنیادی سے لے کر 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)، آپ کو ان ٹولز کے مختلف آپشنز سے روشناس کروائے گا تاکہ آپ منتخب کر سکیں کہ کون سا آپ کے لیے بہترین ہے۔
#### اپنے کمپیوٹر پر لوکل طور پر نصاب چلانا
ہماری سفارش ہے کہ آپ [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)۔
اپنے کمپیوٹر پر اس نصاب کو چلانے کے لیے آپ کو ایک ٹیکسٹ ایڈیٹر، براؤزر اور کمانڈ لائن ٹول کی ضرورت ہوگی۔ ہمارا پہلا سبق، [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages)، آپ کو ان مختلف اختیارات کے بارے میں رہنمائی دے گا تاکہ آپ اپنے لیے بہترین منتخب کر سکیں۔
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** پر کلک کرکے اور وہ فولڈر منتخب کرکے کرسکتے ہیں جسے آپ نے ابھی کلون کیا ہے۔
> سفارش کردہ 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) - کوڈ تیزی سے لکھنے میں مدد کے لیے
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) - آپ کو تیزی سے کوڈ لکھنے میں مدد فراہم کرنے کے لیے
## 📂 ہر سبق میں شامل ہیں:
- اختیاری اسکیچنوٹ
- اختیاری اضافی ویڈیو
- سبق سے پہلے وارم اپ کوئز
- تحریری سبق
- پروجیکٹ پر مبنی اسباق کے لیے، پروجیکٹ بنانے کے طریقہ کار پر مرحلہ وار رہنمائی
- علم کی جانچ
- ایک چیلنج
- اضافی مطالعہ
- اسباق کے بعد کا کوئز [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 | شروعات | پروگرامنگ اور ٹولز کا تعارف | زیادہ تر پروگرامنگ زبانوں کی بنیادی بنیادوں کا سیکھنا اور ایسے سافٹ ویئر کے بارے میں جاننا جو پیشہ ورانہ ڈویلپرز کو ان کا کام کرنے میں مدد دیتا ہے | [پروگرامنگ زبانوں اور ٹولز کا تعارف](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | شروعات | GitHub کی بنیادی باتیں، ٹیم کے ساتھ کام شامل ہے | اپنے پروجیکٹ میں GitHub استعمال کرنا اور دوسروں کے ساتھ کوڈ بیس پر تعاون کرنا | [GitHub کا تعارف](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | شروعات | قابل رسائی | ویب کی رسائی کے بنیادی اصول سیکھیں | [رسائی کے بنیادی اصول](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS بنیادیات | جاوا اسکرپٹ ڈیٹا کی اقسام | جاوا اسکرپٹ ڈیٹا کی اقسام کے بنیادی اصول | [ڈیٹا کی اقسام](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS بنیادیات | فنکشنز اور میتھڈز | ایپلیکیشن کے منطق کے بہاؤ کو کنٹرول کرنے کے لیے فنکشنز اور میتھڈز کے بارے میں سیکھیں | [فنکشنز اور میتھڈز](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS بنیادیات | JS میں فیصلے کرنا | اپنی کوڈ میں حالات بنانے کے لیے فیصلہ سازی کے طریقے سیکھیں | [فیصلے کرنا](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS بنیادیات | Arrays اور Loops | جاوا اسکرپٹ میں ڈیٹا کے ساتھ کام کرنے کے لیے Arrays اور Loops استعمال کریں | [Arrays اور Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML پرعملی اطلاق | آن لائن Terrarium بنانے کے لیے HTML تیار کریں، خاص طور پر لے آؤٹ بنانے پر توجہ دیں | [HTML کا تعارف](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS پرعملی اطلاق | آن لائن Terrarium کے لیے CSS تیار کریں، CSS کے بنیادی اصول اور صفحہ کو Responsive بنانے پر توجہ دیں | [CSS کا تعارف](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | جاوا اسکرپٹ کلوزرز، DOM تبدیلی | جاوا اسکرپٹ تیار کریں تاکہ Terrarium کو drag/drop انٹرفیس کے طور پر کام کرے، کلوزرز اور DOM تبدیلی پر توجہ دیں | [جاوا اسکرپٹ کلوزرز، DOM تبدیلی](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | ٹائپنگ گیم بنانا | کی بورڈ ایونٹس کے ذریعے اپنی جاوا اسکرپٹ ایپ کے منطق کو چلانا سیکھیں | [ایونٹ ڈرائیو پروگرامنگ](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | براؤزرز کے ساتھ کام | براؤزرز کیسے کام کرتے ہیں، ان کی تاریخ، اور براؤزر ایکسٹینشن کے لیے پہلے عناصر کیسے اسکافولڈ کیے جاتے ہیں سیکھیں | [براؤزرز کے بارے میں](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | فارم بنانا، API کال کرنا اور لوکل اسٹوریج میں متغیرات محفوظ کرنا | اپنے براؤزر ایکسٹینشن کے جاوا اسکرپٹ عناصر تیار کریں تاکہ API کال کریں اور لوکل اسٹوریج میں محفوظ متغیرات استعمال کریں | [APIs، فارم اور لوکل اسٹوریج](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | براؤزر کے پس منظر کے عمل، ویب کی کارکردگی | ایکسٹینشن کے آئیکن کا انتظام کرنے کے لیے براؤزر کے پس منظر کے عمل استعمال کریں؛ ویب کی کارکردگی اور اسے بہتر بنانے کے طریقے سیکھیں | [پس منظر کے کام اور کارکردگی](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | جاوا اسکرپٹ کے ساتھ آگے بڑھتا ہوا گیم ڈیولپمنٹ | Inheritance کو کلاسز اور کمپوزیشن دونوں کے استعمال سے سیکھیں اور Pub/Sub پیٹرن کے بارے میں جانیں، گیم بنانے کی تیاری کے لیے | [ایڈوانسڈ گیم ڈیولپمنٹ کا تعارف](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | کینوس پر ڈرائنگ | Canvas API کے بارے میں جانیں، جو اسکرین پر عناصر ڈرائنگ کرنے کے لیے استعمال ہوتا ہے | [کینوس پر ڈرائنگ](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | اسکرین پر عناصر کو حرکت دینا | کارٹیسیئن کوآرڈینیٹس اور کینوس API کا استعمال کرتے ہوئے عناصر کو حرکت دیتے ہوئے دریافت کریں | [عناصر کو حرکت دینا](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | تصادم کی جانچ | عناصر کو ٹکرانے اور ایک دوسرے کے ردعمل ظاہر کرنے کے لیے کی پریس استعمال کریں اور گیم کی کارکردگی کو یقینی بنانے کے لیے کول ڈاؤن فنکشن فراہم کریں | [تصادم کی جانچ](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | اسکور رکھنا | گیم کی حالت اور کارکردگی کی بنیاد پر ریاضی کے حسابات کریں | [اسکور رکھنا](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | گیم ختم کرنا اور دوبارہ شروع کرنا | گیم کو ختم کرنے اور دوبارہ شروع کرنے کے بارے میں جانیں، جس میں اثاثے صاف کرنا اور متغیر اقدار کو ری سیٹ کرنا شامل ہے | [اختتامی شرط](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | ویب ایپ میں HTML ٹیمپلیٹس اور راستے | ملٹی پیج ویب سائٹ کے فن تعمیر کا اسکیفولڈ کیسے بنایا جاتا ہے، روٹنگ اور HTML ٹیمپلیٹس استعمال کرکے سیکھیں | [HTML ٹیمپلیٹس اور راستے](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | لاگ ان اور رجسٹریشن فارم بنائیں | فارم بنانے اور توثیقی عمل کو سنبھالنے کے بارے میں جانیں | [فارم](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | ڈیٹا حاصل کرنے اور استعمال کرنے کے طریقے | آپ کی ایپ میں ڈیٹا کیسے آتا اور جاتا ہے، اسے کیسے حاصل کریں، ذخیرہ کریں، اور تلف کریں | [ڈیٹا](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | اسٹیٹ مینجمنٹ کے تصورات | سیکھیں کہ آپ کی ایپ اسٹیٹ کو کس طرح برقرار رکھتی ہے اور اسے پروگرام کے ذریعے کیسے مینیج کرتی ہے | [اسٹیٹ مینجمنٹ](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | VScode کے ساتھ کام | سیکھیں کہ کوڈ ایڈیٹر کیسے استعمال کریں| [VScode کوڈ ایڈیٹر استعمال کریں](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | AI کے ساتھ کام | اپنی AI اسسٹنٹ بنانا سیکھیں | [AI اسسٹنٹ پروجیکٹ](./9-chat-project/README.md) | Chris |
## 🏫 تدریسی طریقہ کار
ہمارا نصاب دو اہم تعلیمی اصولوں کے ساتھ ڈیزائن کیا گیا ہے:
* پروجیکٹ پر مبنی تعلیم
* بار بار کوئزز
یہ پروگرام جاوا اسکرپٹ، HTML، اور CSS کی بنیادی باتیں سکھاتا ہے، نیز آج کے ویب ڈویلپرز کے لیے استعمال ہونے والے جدید ترین ٹولز اور تکنیکس بھی۔ طلباء کو ٹائپنگ گیم، ورچوئل ٹیریریم، ماحول دوست براؤزر ایکسٹینشن، اسپیس انویدر طرز کا گیم، اور کاروباری بنکنگ ایپ بنانے کا عملی تجربہ حاصل ہوگا۔ سیریز کے اختتام تک، طلباء کو ویب ڈیولپمنٹ کی مضبوط سمجھ حاصل ہوگی۔
> 🎓 آپ اس نصاب کے پہلے چند اسباق کو Microsoft Learn پر ایک [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) کی طرح لے سکتے ہیں!
پروجیکٹس کے ساتھ مواد کو ہم آہنگ کرکے، عمل طلباء کے لیے زیادہ دلکش بن جاتا ہے اور تصورات کو بہتر طور پر یاد رکھا جاتا ہے۔ ہم نے جاوا اسکرپٹ بنیادیات میں کئی ابتدائی اسباق بھی لکھے ہیں تاکہ تصورات کا تعارف کروایا جا سکے، جن کے ساتھ "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ویڈیو ٹیوٹوریلز کا ایک ویڈیو بھی شامل ہے، جن میں سے بعض مصنفین نے اس نصاب میں حصہ ڈالا ہے۔
اس کے علاوہ، کلاس سے پہلے ایک کم دباؤ والا کوئز طالب علم کے سیکھنے کے ارادے کو ترتیب دیتا ہے، جبکہ کلاس کے بعد دوسرا کوئز اضافی یادداشت کو یقینی بناتا ہے۔ یہ نصاب لچکدار اور خوشگوار بنانے کے لیے ڈیزائن کیا گیا ہے اور اسے پورے یا جزوی طور پر لیا جا سکتا ہے۔ پروجیکٹس چھوٹے شروع ہوتے ہیں اور 12 ہفتوں کے چکر کے اختتام تک زیادہ پیچیدہ ہو جاتے ہیں۔
جبکہ ہم نے جاوا اسکرپٹ فریم ورک متعارف کرانے سے جان بوجھ کر گریز کیا ہے تاکہ فریم ورک اپنانے سے پہلے ویب ڈویلپر کے طور پر بنیادی مہارتوں پر توجہ دی جا سکے، اس نصاب کو مکمل کرنے کے بعد اگلا اچھا قدم Node.js کے بارے میں سیکھنا ہو گا جس کے لیے ویڈیوز کا ایک اور مجموعہ ہے: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"۔
> ہمارے [Conduct Code](CODE_OF_CONDUCT.md) اور [Contributing](CONTRIBUTING.md) رہنما خطوط دیکھیں۔ ہم آپ کی تعمیری رائے کا خیرمقدم کرتے ہیں!
| 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) رہنما خطوط ملاحظہ کریں۔ ہم آپ کی تعمیری آراء کے خیرمقدم کے منتظر ہیں!
## 🧭 آف لائن رسائی
آپ اس دستاویز کو آف لائن [Docsify](https://docsify.js.org/#/) استعمال کرکے چلا سکتے ہیں۔ اس ریپو کو فورک کریں، اپنی مقامی مشین پر [Docsify انسٹال کریں](https://docsify.js.org/#/quickstart)، اور پھر اس ریپو کے روٹ فولڈر میں `docsify serve` ٹائپ کریں۔ ویب سائٹ آپ کے لوکل ہوسٹ پر پورٹ 3000 پر دستیاب ہوگی: `localhost:3000`۔
## 📘 پی ڈی ایف
آپ اس دستاویز کو آف لائن [Docsify](https://docsify.js.org/#/) کے ذریعہ چلا سکتے ہیں۔ اس ریپو کو فورک کریں، اپنی مقامی مشین پر [Docsify انسٹال کریں](https://docsify.js.org/#/quickstart)، پھر اس ریپو کے روٹ فولڈر میں `docsify serve` ٹائپ کریں۔ ویب سائٹ آپ کے لوکل ہوسٹ پر پورٹ 3000 پر چلے گی: `localhost:3000`۔
تمام اسباق کی پی ڈی ایف [یہاں](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) دی گئی ہے۔
## 📘 PDF
تمام اسباق کا ایک پی ڈی ایف [یہاں](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) دستیاب ہے۔
## 🎒 دیگر کورسز
ہماری ٹیم دوسرے کورسز بھی تیار کرتی ہے! دیکھیں:
ہماری ٹیم دیگر کورسز بھی تیار کرتی ہے! دیکھیں:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -217,7 +227,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)
@ -225,7 +235,7 @@ 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)
@ -236,30 +246,30 @@ 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)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## مدد حاصل کرنا
## مدد حاصل کریں
اگر آپ پھنس جائیں یا AI ایپس بنانے کے حوالے سے کسی قسم کا سوال ہو۔ MCP کے بارے میں مباحثوں میں شریک ہوں جہاں دوسرے سیکھنے والے اور تجربہ کار ڈیولپرز موجود ہیں۔ یہ ایک مددگار کمیونٹی ہے جہاں سوالات خوش آمدید کہے جاتے ہیں اور علم آزادانہ طور پر شیئر کیا جاتا ہے۔
اگر آپ پھنس جائیں یا AI ایپس بنانے کے بارے میں کوئی سوال ہو تو۔ MCP کے بارے میں بحث میں دیگر سیکھنے والوں اور تجربہ کار ڈویلپرز سے شامل ہوں۔ یہ ایک معاون کمیونٹی ہے جہاں سوالات خوش آمدید ہیں اور علم آزادانہ طور پر شیئر کیا جاتا ہے۔
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
اگر آپ کے پاس پروڈکٹ فیڈبیک ہے یا آپ کو کسی مسئلے کا سامنا ہے تو یہ دیکھیں:
اگر آپ کو کسی پروڈکٹ کا فیڈبیک ہو یا تعمیر کے دوران کوئی خرابی ہو تو ملاحظہ کریں:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## لائسنس
یہ ذخیرہ MIT لائسنس کے تحت لائسنس یافتہ ہے۔ مزید معلومات کے لیے [LICENSE](../../LICENSE) فائل دیکھیں۔
یہ ریپوزٹری MIT لائسنس کے تحت ہے۔ مزید معلومات کے لیے [LICENSE](../../LICENSE) فائل دیکھیں۔
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**بیانِ اخطار**:
اس دستاویز کا ترجمہ مصنوعی ذہانت کی ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کے ذریعے کیا گیا ہے۔ اگرچہ ہم درستگی کے لئے کوشاں ہیں، براہ کرم نوٹ کریں کہ خودکار تراجم میں غلطیاں یا عدم درستیاں ہوسکتی ہیں۔ اصل دستاویز کو اس کی مادری زبان میں ہی مستند ذریعہ سمجھا جانا چاہئے۔ اہم معلومات کے لئے پیشہ ورانہ انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمہ کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کی صورت میں ہم ذمہ دار نہیں ہوں گے۔
**دستیابی کی اطلاع**:
یہ دستاویز AI ترجمہ خدمت [Co-op Translator](https://github.com/Azure/co-op-translator) کے ذریعے ترجمہ کی گئی ہے۔ اگرچہ ہم درستگی کی کوشش کرتے ہیں، براہ کرم آگاہ رہیں کہ خودکار ترجموں میں غلطیاں یا کمیاں ہو سکتی ہیں۔ اصل دستاویز اپنی مادری زبان میں مستند ماخذ سمجھی جانی چاہیے۔ اہم معلومات کے لیے پیشہ ورانہ انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمہ کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا تشریح کی ذمہ داری ہم پر نہیں ہوگی۔
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -1,7 +1,7 @@
{
"1-getting-started-lessons/1-intro-to-programming-languages/README.md": {
"original_hash": "d45ddcc54eb9232a76d08328b09d792e",
"translation_date": "2026-01-06T11:58:19+00:00",
"original_hash": "bec5e35642176d9e483552bfc82996d8",
"translation_date": "2026-03-06T16:27:11+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
"language_code": "zh-CN"
},
@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-02-06T16:12:19+00:00",
"translation_date": "2026-03-06T16:30:45+00:00",
"source_file": "AGENTS.md",
"language_code": "zh-CN"
},
@ -516,8 +516,8 @@
"language_code": "zh-CN"
},
"README.md": {
"original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-02-06T16:06:51+00:00",
"original_hash": "a2c9eed480687319517c08a6319e5536",
"translation_date": "2026-03-06T16:23:42+00:00",
"source_file": "README.md",
"language_code": "zh-CN"
},

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

@ -10,170 +10,182 @@
[![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. **克隆仓库** `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**加入 Azure AI Foundry Discord结识专家和其他开发者**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 多语言支持
#### 通过 GitHub Action 支持(自动且始终最新)
#### 通过 GitHub Action 支持(自动且始终保持最新)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](./README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **更喜欢本地克隆?**
> 本仓库包含50多种语言的翻译显著增加下载大小。若需无翻译版本请使用稀疏检出
> **想本地克隆?**
>
> 该仓库包含 50 多种语言的翻译文件,显著增加下载体积。想要不含翻译的克隆版本,可以使用稀疏检出:
>
> **Bash / macOS / Linux:**
> ```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
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> 这将让您更快下载且包含完成课程所需的所有内容。
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**如果您希望支持更多翻译语言,列于[这里](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**如果您希望支持更多语言,请查看[此处](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _你是学生吗_
访问[**学生中心页面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)这里有入门资源、学生包甚至获得免费证书的方式。请收藏此页面并定期查看,因为我们每月都会更换内容
访问[**学生中心页面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)您将找到初学资源、学生包以及获取免费证书优惠券的方式。建议收藏此页,并定期查看,因内容每月更新
### 📣 公告 - 新增 GitHub Copilot Agent 模式挑战!
### 📣 公告 - 新增 GitHub Copilot Agent 模式挑战任务
新挑战已添加,请在大多数章节查找 “GitHub Copilot Agent Challenge 🚀”。这是一个使用 GitHub Copilot 和 Agent 模式完成的新挑战。如果你以前没用过 Agent 模式,它不仅能生成文本,还可以创建和编辑文件、运行命令等。
挑战请在大多数章节查找“GitHub Copilot Agent Challenge 🚀”。这是一个让您使用 GitHub Copilot 和 Agent 模式完成的新挑战。如果您之前没用过 Agent 模式,它不仅能生成文本,还能创建和编辑文件、运行命令等。
### 📣 公告 - _新增使用生成式 AI 构建的项目_
### 📣 公告 - _使用生成式 AI 构建的项目_
新增 AI 助手项目,查看[项目](./9-chat-project/README.md)
新增 AI 助手项目,查看[项目](./9-chat-project/README.md)
### 📣 公告 - _刚发布的 JavaScript 生成式 AI 新课程_
### 📣 公告 - _新发布的 JavaScript 生成式 AI 课程_
不要错过我们的生成式 AI 新课程!
错过我们的生成式 AI 新课程!
访问 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 开始学习!
![Background](../../translated_images/zh-CN/background.148a8d43afde5730.webp)
- 覆盖从基础到 RAG 的课程
- 使用 GenAI 和我们的配套应用与历史人物互动。
- 有趣且引人入胜的叙事,你将进行时空旅行
- 课程涵盖从基础到 RAG
- 通过生成式 AI 和我们的辅助应用与历史人物互动。
- 有趣且引人入胜的故事叙述,带您穿越时空
![character](../../translated_images/zh-CN/character.5c0dd8e067ffd693.webp)
每节课包括作业、知识检测和挑战,帮助你学习如
- 提示及提示工程
- 文和图像应用生成
每节课包含作业、知识测试和挑战,帮助您学习以下主题
- 提示及提示工程
- 文和图像应用生成
- 搜索应用
访问 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 开始!
访问 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 开始学习
## 🌱 入门指南
> **教师们**,我们[提供了一些建议](for-teachers.md)关于如何使用此课程。欢迎在我们的[讨论区](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)反馈意见!
**[学习者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**,每节课先完成课前测验,然后阅读讲义,完成各项活动,并通过课后测验检验理解。
## 🌱 快速开始
为提升学习体验,建议和同学们一起合作完成项目!欢迎在我们的[讨论区](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)发起讨论,我们的版主团队将为你解答问题。
> **教师们**,我们[提供了一些建议](for-teachers.md)指导您如何使用这套课程。欢迎在[讨论区](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)提供反馈!
为进一步学习,强烈推荐探索[Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?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)参与讨论,版主团队会解答您的问题。
本课程已预置开发环境!开始学习时,你可以选择在[Codespace](https://github.com/features/codespaces/)(基于浏览器,无需安装环境)运行课程,或在本地电脑使用如[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)的文本编辑器
扩展学习我们强烈推荐探索 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) 上的额外学习资源
#### 创建你的仓库
为方便保存作业,建议创建本仓库的个人副本。点击页面顶部的 **Use this template** 按钮,即可在你的 GitHub 账户创建一份该课程副本。
### 📋 设置开发环境
步骤如下:
本课程提供即用型开发环境!开始时,您可以选择在 [Codespace](https://github.com/features/codespaces/)(一种基于浏览器、无须安装的环境)中运行课程,也可以在本地电脑使用文本编辑器,如 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 。
#### 创建您的仓库
为了方便保存您的作品,推荐您创建此仓库的副本。点击页面顶部的 **Use this template** 按钮即可在您的 GitHub 账户中创建一个包含本课程内容的新仓库。
操作步骤:
1. **Fork 仓库**点击页面右上角的“Fork”按钮。
2. **克隆仓库** `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
2. **克隆仓库** `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### 在 Codespace 中运行课程
你创建的个人副本中,点击 **Code** 按钮,选择 **Open with Codespaces**。这会为你创建一个新的 Codespace 工作环境。
您创建的仓库副本中,点击 **Code** 按钮,选择 **Open with Codespaces**。将为您创建一个新的 Codespace 工作环境。
![Codespace](../../translated_images/zh-CN/createcodespace.0238bbf4d7a8d955.webp)
#### 在本地电脑运行课程
要在电脑本地运行课程,你需要文本编辑器、浏览器和命令行工具。我们的第一课,[编程语言和开发工具入门](../../1-getting-started-lessons/1-intro-to-programming-languages),将介绍各种工具供你选择
要在本地电脑运行该课程,您需要文本编辑器、浏览器和命令行工具。我们的第一课,[编程语言与工具基础介绍](../../1-getting-started-lessons/1-intro-to-programming-languages),将引导您了解各种工具选择,以便您选择最合适的
推荐使用 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)作为编辑器,它内置[终端](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。可从[这里](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)下载。
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) 中打开 [终端](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon),运行以下命令,将 `<your-repository-url>` 替换成刚才复制的 URL
```bash
git clone <your-repository-url>
```
2. 在 Visual Studio Code 中打开文件夹。你可以通过点击 **文件** > **打开文件夹**,然后选择你刚克隆的文件夹来完成此操作
2. 在 Visual Studio Code 中打开文件夹。你可以点击 **文件** > **打开文件夹** 并选择刚刚克隆的文件夹
> 推荐的 Visual Studio Code 扩展:
>
> * [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` 文件夹中的说明
> **关于测验的说明**:所有测验都包含在 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 | [Terrarium](./3-terrarium/solution/README.md) | HTML 实践 | 构建用于创建在线生态瓶Terrarium的 HTML重点是构建布局 | [HTML 入门](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS 实践 | 构建用于为在线生态瓶设计样式的 CSS重点是 CSS 基础以及页面响应式设计 | [CSS 入门](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript 闭包与 DOM 操作 | 构建 JavaScript 使生态瓶实现拖拽功能,重点是闭包和 DOM 操作 | [JavaScript 闭包与 DOM 操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [打字游戏](./4-typing-game/solution/README.md) | 制作打字游戏 | 学习如何使用键盘事件驱动 JavaScript 应用的逻辑 | [事件驱动编程](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [绿色浏览器扩展](./5-browser-extension/solution/README.md) | 浏览器工作原理 | 了解浏览器的工作原理、发展历史及如何搭建浏览器扩展的基础元素 | [关于浏览器](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [绿色浏览器扩展](./5-browser-extension/solution/README.md) | 构建表单、调用 API 及本地存储变量 | 构建浏览器扩展的 JavaScript 元素,以便使用存储在本地的变量调用 API | [API、表单与本地存储](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [绿色浏览器扩展](./5-browser-extension/solution/README.md) | 浏览器后台进程与网页性能 | 利用浏览器的后台进程管理扩展图标;学习网页性能及优化方法 | [后台任务与性能](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [太空游戏](./6-space-game/solution/README.md) | 进阶游戏开发 继承与模式 | 学习继承(包括类和组合)以及发布/订阅模式,为制作游戏做准备 | [进阶游戏开发介绍](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [太空游戏](./6-space-game/solution/README.md) | 画布绘制 | 学习 Canvas API用于向屏幕绘制元素 | [画布绘制](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [太空游戏](./6-space-game/solution/README.md) | 元素运动 | 探索如何利用笛卡尔坐标和 Canvas API 赋予元素运动 | [移动元素](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [太空游戏](./6-space-game/solution/README.md) | 碰撞检测 | 使元素碰撞并相互响应按键,提供冷却功能确保游戏性能 | [碰撞检测](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [太空游戏](./6-space-game/solution/README.md) | 计分 | 根据游戏状态和表现进行数学计算 | [计分](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [太空游戏](./6-space-game/solution/README.md) | 结束和重启游戏 | 学习如何结束和重启游戏,包括清理资源和重置变量 | [结束条件](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [银行应用](./7-bank-project/solution/README.md) | Web 应用中的 HTML 模板和路由 | 学习如何使用路由和 HTML 模板构建多页面网站的框架 | [HTML 模板和路由](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [银行应用](./7-bank-project/solution/README.md) | 构建登录和注册表单 | 学习表单构建和验证处理流程 | [表单](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [银行应用](./7-bank-project/solution/README.md) | 数据获取和使用 | 学习数据如何流入流出你的应用,如何获取、存储和处理数据 | [数据](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [银行应用](./7-bank-project/solution/README.md) | 状态管理概念 | 学习应用如何保留状态及其编程管理方法 | [状态管理](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [浏览器/VScode 代码](../../8-code-editor) | 使用 VScode | 学习如何使用代码编辑器| [使用 VScode 代码编辑器](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [人工智能助手](./9-chat-project/README.md) | 使用 AI | 学习如何构建自己的 AI 助手 | [AI 助手项目](./9-chat-project/README.md) | Chris |
| | 项目名称 | 授课概念 | 学习目标 | 关联课程 | 作者 |
| :-: | :--------------------------------------------------: | :--------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------: | :-------------------: |
| 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 |
## 🏫 教学法
@ -181,29 +193,29 @@
* 项目驱动学习
* 频繁测验
课程教授 JavaScript、HTML 和 CSS 的基础知识,以及当今网页开发者使用的最新工具和技术。学生将通过制作打字游戏、虚拟生态瓶、环保浏览器扩展、太空入侵游戏和企业银行应用获得实践经验。到课程结束时,学生将具备扎实的网页开发理解
项目教授 JavaScript、HTML 和 CSS 的基础知识,以及当前 Web 开发者使用的最新工具和技术。学生将通过构建打字游戏、虚拟生态瓶、环保浏览器扩展、太空入侵风格游戏和企业银行应用获得实践经验。系列课程结束时,学生将具备扎实的 Web 开发基础
> 🎓 你可以在 Microsoft Learn 上将本课程的前几节作为[学习路径](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)完成
> 🎓 你可以将本课程的前几节课作为 Microsoft Learn 上的 [学习路径](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) 进行学习
通过确保内容与项目对齐,学习过程对学生更具吸引力,并增强概念的记忆。我们还编写了几节 JavaScript 基础入门课程,配合 “[JavaScript 初学者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)” 视频教程集合,其中有些作者也贡献了本课程
通过确保内容与项目对齐,学习过程对学生更具吸引力,概念的掌握度也会提高。我们还编写了几节 JavaScript 基础入门课程,配合来自"[JavaScript 初学者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"合集的视频教程,这些视频的部分作者参与了本课程的编写
此外,课前的低风险测验帮助学生树立学习目标,课后的第二次测验确保知识的进一步巩固。此课程设计灵活有趣,可以全部完成也可以部分学习。项目难度由浅入深,经过 12 周的学习持续递增
此外,课前的低风险测验帮助学生树立学习目标,课后的测验则确保进一步巩固学习内容。本课程设计灵活且富有趣味性支持整套学习或部分学习。项目从简单开始随着12周课程周期逐步变得复杂
虽然我们有意避免引入 JavaScript 框架,以专注于作为网络开发者在使用框架前需掌握的基础技能,但完成本课程的良好后续步骤是通过另一个视频集合学习 Node.js“[Node.js 初学者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)”。
虽然我们特意避免引入 JavaScript 框架,以专注于掌握作为 Web 开发者所需的基础技能,但完成本课程后,学习 Node.js 将是下一步的不错选择,推荐相关视频合集 "[Node.js 初学者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"。
> 请查看我们的[行为准则](CODE_OF_CONDUCT.md)和[贡献指南](CONTRIBUTING.md)。欢迎您提供建设性的反馈!
> 请访问我们的[行为准则](CODE_OF_CONDUCT.md)和[贡献指南](CONTRIBUTING.md)。我们欢迎你的建设性反馈!
## 🧭 离线访问
你可以使用 [Docsify](https://docsify.js.org/#/) 离线运行本文档。将此仓库 Fork 到本地,安装 [Docsify](https://docsify.js.org/#/quickstart),然后在此仓库根目录运行 `docsify serve`。网站将在本地的 3000 端口提供服务,即访问 `localhost:3000`
你可以通过使用 [Docsify](https://docsify.js.org/#/) 来离线运行本文档。Fork 此仓库,在本地安装 [Docsify](https://docsify.js.org/#/quickstart),然后在本仓库根目录下输入 `docsify serve`。网站将在本地主机的3000端口启动`localhost:3000`
## 📘 PDF
所有课程的 PDF 可在[这里](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)找到。
所有课程的 PDF 可以在[这里](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)找到。
## 🎒 其他课程
我们的团队还制作了其他课程!查看:
我们的团队还制作了其他课程!快来看看:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -245,23 +257,23 @@
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## 获帮助
## 获帮助
如果您遇到困难或对构建 AI 应用有任何疑问,加入其他学习者和经验丰富的开发者一起讨论 MCP。这里是一个支持性的社区,欢迎提问并自由分享知识。
如果你遇到困难或对构建 AI 应用有任何疑问,欢迎加入 MCP 的学习者和经验丰富的开发者讨论社区。这是一个支持性的社区,欢迎提问并自由分享知识。
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
如果在构建过程中有产品反馈或遇到错误,请访问:
如果在构建过程中有产品反馈或遇到错误,请访问:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## 许可证
存储库采用 MIT 许可证。详情请参见 [LICENSE](../../LICENSE) 文件。
仓库使用 MIT 许可证。更多信息请参见 [LICENSE](../../LICENSE) 文件。
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免责声明**
本文件使用人工智能翻译服务 [Co-op Translator](https://github.com/Azure/co-op-translator) 进行翻译。虽然我们力求准确,但请注意自动翻译可能存在错误或不准确之处。请将原始语言版本视为权威来源。对于关键信息,建议采用专业人工翻译。我们不对因使用本翻译而产生的任何误解或错误解释承担责任。
**免责声明**
本文件使用 AI 翻译服务 [Co-op Translator](https://github.com/Azure/co-op-translator) 进行翻译。虽然我们力求准确,但请注意,自动翻译可能包含错误或不准确之处。原始语言版本的文件应视为权威来源。对于关键信息,建议采用专业人工翻译。因使用此翻译而产生的任何误解或误释,我们不承担任何责任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
Loading…
Cancel
Save