این یک مخزن محتوای آموزشی برای آموزش اصول توسعه وب به مبتدیان است. این دوره آموزشی جامع، یک دوره 12 هفتهای است که توسط مایکروسافت کلود ادوکیتس توسعه یافته و شامل 24 درس عملی در زمینه جاوااسکریپت، CSS و HTML میباشد.
این یک مخزن آموزشی برای آموزش مبانی توسعه وب به مبتدیان است. این دوره آموزشی جامع شامل ۱۲ هفته است که توسط تیم Microsoft Cloud Advocates توسعه یافته و شامل ۲۴ درس عملی درباره JavaScript، CSS و HTML میباشد.
### اجزای اصلی
### اجزای کلیدی
- **محتوای آموزشی**: 24 درس ساختاریافته سازمانیافته در ماژولهای مبتنی بر پروژه
- **پروژههای عملی**: تریریم، بازی تایپینگ، افزونه مرورگر، بازی فضایی، برنامه بانکداری، ویرایشگر کد و دستیار چت هوش مصنوعی
- **آزمونهای تعاملی**: 48 آزمون با 3 سوال هر کدام (ارزیابی قبل/بعد از درس)
- **پشتیبانی چندزبانه**: ترجمه خودکار برای بیش از 50 زبان از طریق اکشنهای گیتهاب
اگرچه این یک 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) ترجمه شده است. در حالی که ما در تلاش برای دقت هستیم، لطفاً توجه داشته باشید که ترجمههای خودکار ممکن است حاوی خطاها یا نادقتیهایی باشند. سند اصلی به زبان بومی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حیاتی، ترجمه حرفهای انسانی توصیه میشود. ما مسئول هیچ گونه سو تفاهم یا برداشت نادرستی که ناشی از استفاده از این ترجمه باشد، نیستیم.
اصول توسعه وب را با دوره جامع ۱۲ هفتهای ما توسط مایکروسافت کلود ادوکیتس بیاموزید. هر یک از ۲۴ درس به صورت عملی به جاوااسکریپت، CSS و HTML میپردازد از طریق پروژههای عملی مانند تراریومها، افزونههای مرورگر و بازیهای فضایی. با آزمونها، بحثها و تکالیف عملی درگیر شوید. مهارتهای خود را تقویت کنید و با روش آموزش مبتنی بر پروژه مؤثر، دانش خود را بهینه کنید. سفر برنامهنویسی خود را امروز آغاز کنید!
اصول پایه توسعه وب را با دوره جامع ۱۲ هفتهای ما توسط مدافعان مایکروسافت کلود بیاموزید. هر یک از ۲۴ درس به صورت عملی به جاوااسکریپت، CSS و HTML میپردازد، با پروژههای کاربردی مانند تراریومها، افزونههای مرورگر و بازیهای فضایی. در آزمونها، بحثها و وظایف عملی شرکت کنید. مهارتهای خود را افزایش دهید و حفظ دانش خود را با روش تدریس پروژهمحور مؤثر ما بهینهسازی کنید. سفر کدنویسی خود را امروز آغاز کنید!
برای شروع استفاده از این منابع، این مراحل را دنبال کنید:
1. **فورک کردن مخزن**: کلیک کنید بر روی [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
برای شروع استفاده از این منابع، مراحل زیر را دنبال کنید:
1. **فورک کردن مخزن**: کلیک کنید بر [](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 (خودکار و همیشه بهروز)
> 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)**
[](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) مراجعه کنید!
هر درس شامل یک تکلیف برای کامل کردن، یک آزمون دانش و یک چالش برای راهنمایی شما در یادگیری موضوعاتی مانند:
- درخواست و مهندسی درخواستها
- تولید اپلیکیشنهای متنی و تصویری
- اپلیکیشنهای جستجو
هر درس شامل یک تکلیف برای تکمیل، یک تست دانش و یک چالش برای راهنمایی شما در یادگیری موضوعاتی مانند:
- پرامپت و مهندسی پرامپت
- تولید برنامههای متن و تصویر
- برنامههای جستجو
برای شروع به [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 جدید ایجاد میکند.
برای اجرای این برنامه روی کامپیوترتان به یک ویرایشگر متن، یک مرورگر و یک ابزار خط فرمان نیاز دارید. اولین درس ما، [مقدمهای بر زبانهای برنامهنویسی و ابزارهای کار](../../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
### سری هوش مصنوعی مولد
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-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
### آموزشهای پایهای
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -240,29 +252,29 @@
---
### Copilot Series
### سری CoPilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
اگر گیر افتادید یا سوالی درباره ساخت برنامههای هوش مصنوعی دارید، به بحثها در مورد MCP با یادگیرندگان و توسعهدهندگان با تجربه بپیوندید. این یک جامعه حمایتی است که سوالات استقبال میشود و دانش به صورت آزادانه به اشتراک گذاشته میشود.
اگر گیر کردید یا سوالی درباره ساخت اپلیکیشنهای هوش مصنوعی دارید، به جمع یادگیرندگان و توسعهدهندگان با تجربه در بحثهای MCP بپیوندید. این یک جامعه حمایتگر است که سوالات پذیرفته شده و دانش به صورت آزاد به اشتراک گذاشته میشود.
این مخزن تحت مجوز 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) ترجمه شده است. در حالی که ما تلاش میکنیم دقت را حفظ کنیم، لطفاً آگاه باشید که ترجمههای خودکار ممکن است شامل اشتباهات یا نواقصی باشند. سند اصلی به زبان بومی خود باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حیاتی، ترجمه حرفهای انسانی توصیه میشود. ما مسئول هیچ گونه سوءتفاهم یا برداشت نادرست ناشی از استفاده از این ترجمه نیستیم.
یہ ویب ڈویلپمنٹ کے بنیادی اصولوں کو ابتدائی افراد کو سکھانے کے لیے ایک تعلیمی نصاب کا ذخیرہ ہے۔ نصاب ایک جامع 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+ زبانوں میں خودکار تراجم
- `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) استعمال کرتے ہوئے کیا گیا ہے۔ ہم درستگی کے لیے کوشاں ہیں، لیکن براہِ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا عدم صحت ہوسکتی ہیں۔ اصل دستاویز کو اس کی مادری زبان میں مستند ماخذ سمجھا جانا چاہیے۔ اہم معلومات کے لیے پیشہ ورانہ انسانی ترجمہ تجویز کیا جاتا ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کی ذمہ داری ہم پر نہیں ہوگی۔
مائیکروسافٹ کلاؤڈ ایڈووکیٹس کے ذریعہ ہمارے 12 ہفتوں کے جامع کورس کے ساتھ ویب ڈویلپمنٹ کی بنیادی باتیں سیکھیں۔ 24 اسباق میں سے ہر ایک جاوا اسکرپٹ، CSS، اور HTML کو عملی منصوبوں جیسے ٹیریریمز، براؤزر ایکسٹینشنز، اور خلائی کھیلوں کے ذریعے جانچتا ہے۔ کوئزز، مباحثوں، اور عملی اسائنمنٹس کے ساتھ مشغول ہوں۔ ہماری مؤثر پروجیکٹ پر مبنی تعلیم کے ساتھ اپنی مہارتوں کو بہتر بنائیں اور اپنے علم کو برقرار رکھنے کو بہتر بنائیں۔ آج ہی اپنے کوڈنگ کے سفر کا آغاز کریں!
Microsoft Cloud Advocates کی طرف سے ہمارا 12 ہفتوں کا جامع کورس کے ساتھ ویب ڈیولپمنٹ کی بنیادیں سیکھیں۔ 24 اسباق میں سے ہر ایک JavaScript، CSS، اور HTML میں ہاتھ سے تجرباتی پروجیکٹس جیسے کہ ٹیریریمز، براؤزر ایکسٹینشنز، اور اسپیس گیمز کے ذریعے وارد ہوتا ہے۔ کوئزز، مباحثے، اور عملی اسائنمنٹس میں حصہ لیں۔ اپنی مہارتیں بڑھائیں اور ہمارے مؤثر پروجیکٹ پر مبنی پیڈاگوگی کے ساتھ اپنے علم کو بہتر بنائیں۔ آج ہی اپنی کوڈنگ سفر شروع کریں!
> اس ریپوزٹری میں 50+ زبانوں کے ترجمے شامل ہیں جو کہ ڈاؤن لوڈ کے سائز کو نمایاں طور پر بڑھاتے ہیں۔ ترجموں کے بغیر کلون کرنے کے لیے sparse checkout استعمال کریں:
> **مقامی طور پر کلون کرنا پسند کریں؟**
>
> یہ رفوسٹری 50+ زبانوں کے تراجم شامل کرتی ہے جس سے ڈاؤن لوڈ کا سائز بہت بڑھ جاتا ہے۔ بغیر تراجم کی کلوننگ کے لیے sparse checkout استعمال کریں:
> 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)**
[](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)
ہر سبق میں ایک اسائنمنٹ شامل ہے، ایک نالج چیک اور ایک چیلنج تاکہ آپ کو درج ذیل موضوعات پر رہنمائی کر سکے:
- پرومپٹنگ اور پرومپٹ انجینئرنگ
- متن اور تصویر کی ایپ جنریشن
ہر سبق میں ایک اسائنمنٹ، ایک نالج چیک، اور چیلنج شامل ہے جو آپ کو درج ذیل موضوعات سیکھنے میں رہنمائی کرے گا:
- پرامپٹنگ اور پرامپٹ انجینئرنگ
- ٹیکسٹ اور امیج ایپ جنریشن
- سرچ ایپس
شروع کرنے کے لیے وزٹ کریں [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" بٹن پر کلک کریں۔
اپنی بنائی گئی ریپوزٹری میں،**Code** بٹن پر کلک کریں اور **Open with Codespaces** منتخب کریں۔ یہ آپ کے لیے ایک نیا Codespace بنائے گا جس میں آپ کام کر سکتے ہیں۔
اپنی بنائی ہوئی رفوسٹری میں**Code** بٹن پر کلک کریں اور **Open with Codespaces** منتخب کریں۔ یہ آپ کے لئے نیا Codespace تیار کرے گا جس میں آپ کام کر سکیں گے۔
اپنے کمپیوٹر پر یہ نصاب چلانے کے لیے، آپ کو ایک ٹیکسٹ ایڈیٹر، ایک براؤزر اور ایک کمانڈ لائن ٹول کی ضرورت ہوگی۔ ہمارا پہلا سبق، [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 کمیونٹی میں شامل ہوں
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Generative AI Series
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-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 کمیونٹی میں شامل ہوں
[-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
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
@ -236,30 +246,30 @@ Azure AI Foundry Discord کمیونٹی میں شامل ہوں
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Copilot Series
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
اگر آپ پھنس جائیں یا AI ایپس بنانے کے حوالے سے کسی قسم کا سوال ہو۔ MCP کے بارے میں مباحثوں میں شریک ہوں جہاں دوسرے سیکھنے والے اور تجربہ کار ڈیولپرز موجود ہیں۔ یہ ایک مددگار کمیونٹی ہے جہاں سوالات خوش آمدید کہے جاتے ہیں اور علم آزادانہ طور پر شیئر کیا جاتا ہے۔
اگر آپ پھنس جائیں یا AI ایپس بنانے کے بارے میں کوئی سوال ہو تو۔ MCP کے بارے میں بحث میں دیگر سیکھنے والوں اور تجربہ کار ڈویلپرز سے شامل ہوں۔ یہ ایک معاون کمیونٹی ہے جہاں سوالات خوش آمدید ہیں اور علم آزادانہ طور پر شیئر کیا جاتا ہے۔
یہ ذخیرہ 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) کے ذریعے ترجمہ کی گئی ہے۔ اگرچہ ہم درستگی کی کوشش کرتے ہیں، براہ کرم آگاہ رہیں کہ خودکار ترجموں میں غلطیاں یا کمیاں ہو سکتی ہیں۔ اصل دستاویز اپنی مادری زبان میں مستند ماخذ سمجھی جانی چاہیے۔ اہم معلومات کے لیے پیشہ ورانہ انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمہ کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا تشریح کی ذمہ داری ہم پر نہیں ہوگی۔
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
本课程已预置开发环境!开始学习时,你可以选择在[Codespace](https://github.com/features/codespaces/)(基于浏览器,无需安装环境)运行课程,或在本地电脑使用如[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)的文本编辑器。
推荐使用 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)作为编辑器,它内置[终端](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。可从[这里](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)下载。
1. 将你的仓库克隆到电脑。点击 **Code** 按钮,复制 URL:
推荐使用 [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 页面