[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)

[![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)

# توسعه وب برای مبتدیان - یک برنامه درسی

آژوره کلود آدوکتس در مایکروسافت از ارائه یک برنامه درسی 12 هفته ای 24 درس در مورد مبانی جاوا اسکریپت، سی اس اس و اچ تی ام ال خوشحالند. هر درس شامل آزمون های قبل و بعد از درس، دستورالعمل های مکتوب برای تکمیل درس، یک راه حل، یک تکلیف و موارد دیگر است. آموزش مبتنی بر پروژه ما به شما امکان می دهد در حین ساختن یاد بگیرید، راهی ثابت شده برای "چسبیدن" مهارت های جدید.

از نویسندگانمان جن لوپر، کریس نورینگ، کریستوفر هریسون، جاسمین گریناوی، یوهان لاسورسا، فلور دریس، و تومومی ایمورا، نویسندگان ما صمیمانه تشکر می‌کنیم!

**از نویسندگانمان، جن لوپر، کریس نورینگ، کریستوفر هریسون، جاسمین گریناوی، یوهان لاسورسا، فلور دریس و تومومی ایمورا، نویسندگان ما صمیمانه تشکر می‌کنیم!**

# شما دانش آموز هستید؟

با منابع زیر شروع کنید:

- [Student Hub page](https://docs.microsoft.com/en-gb/learn/student-hub?WT.mc_id=academic-13441-cxa) در این صفحه، منابع مبتدی، بسته های دانشجویی و حتی راه های دریافت کوپن گواهی رایگان را خواهید یافت. این صفحه‌ای است که می‌خواهید هر چند وقت یک‌بار به عنوان نشانه‌گذاری و بررسی کنید، زیرا ما حداقل ماهانه محتوا را تغییر می‌دهیم
- [Microsoft Student Learn ambassadors](https://studentambassadors.microsoft.com?WT.mc_id=academic-13441-cxa) به یک جامعه جهانی از سفیران دانشجو بپیوندید، این می تواند راه شما برای ورود به مایکروسافت باشد


# شروع شدن

> **معلمان** [شامل چند پیشنهاد](for-teachers.md) داریم در مورد نحوه استفاده از این برنامه درسی.  [در انجمن بحث ما](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!

> **[دانش آموزان](https://aka.ms/student-page)**, برای استفاده از این برنامه درسی به تنهایی، کل مخزن را چنگال کنید و تمرینات را به تنهایی کامل کنید، با یک مسابقه قبل از سخنرانی شروع کنید، سپس سخنرانی را بخوانید و بقیه فعالیت ها را تکمیل کنید. سعی کنید پروژه ها را با درک درس ها به جای کپی کردن کد راه حل ایجاد کنید. با این حال، این کد در پوشه های /solutions در هر درس پروژه محور موجود است. ایده دیگر این است که یک گروه مطالعه با دوستان تشکیل دهید و مطالب را با هم مرور کنید. برای مطالعه بیشتر توصیه می کنیم [مايكروسافت لرن](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) و با تماشای فیلم های ذکر شده در زیر.

[![Promo video](images/web.gif)](https://youtube.com/watch?v=R1wrdtmBSII)

گیف توسط [موهیت جیسال](https://linkedin.com/in/mohitjaisal)

> 🎥 برای دریافت ویدیویی در مورد پروژه و افرادی که آن را ایجاد کرده اند، روی تصویر بالا کلیک کنید!

## آموزش و پرورش

ما در هنگام ساختن این برنامه درسی دو اصل آموزشی را انتخاب کرده ایم: اطمینان از پروژه محور بودن آن و اینکه شامل آزمون های مکرر است. تا پایان این مجموعه، دانش‌آموزان یک بازی تایپ، یک تراریوم مجازی، یک افزونه مرورگر سبز، یک بازی از نوع مهاجمان فضایی و یک برنامه بانکی از نوع کسب‌وکار خواهند ساخت و اصول جاوا اسکریپت را یاد خواهند گرفت. ، اچ تی ام ال و سی اس اس به همراه زنجیره ابزار مدرن توسعه دهندگان وب امروزی.
> 🎓 شما می توانید چند درس اول این برنامه درسی را در مایکروسافت لرن به عنوان یک [مسیر یادگیری](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa)
 بخوانید.
 
با حصول اطمینان از همسویی محتوا با پروژه ها، این فرآیند برای دانش آموزان جذاب تر می شود و حفظ مفاهیم تقویت می شود. ما همچنین چندین درس ابتدایی در مبانی جاوا اسکریپت نوشتیم تا مفاهیم را معرفی کنیم، همراه با ویدئو از "[سری مبتدیان به: جاوا اسکریپت](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)" مجموعه ای از آموزش های ویدئویی که برخی از نویسندگان آن در این برنامه درسی مشارکت داشته اند.

علاوه بر این، یک مسابقه کم هزینه قبل از کلاس، قصد دانش آموز را برای یادگیری یک موضوع تعیین می کند، در حالی که آزمون دوم بعد از کلاس، حفظ بیشتر را تضمین می کند. این برنامه درسی به گونه ای طراحی شده است که انعطاف پذیر و سرگرم کننده باشد و می تواند به طور کامل یا جزئی انجام شود. پروژه ها کوچک شروع می شوند و در پایان چرخه 12 هفته ای به طور فزاینده ای پیچیده می شوند.

در حالی که ما عمداً از معرفی فریمورک‌های جاوا اسکریپت خودداری کرده‌ایم تا بر مهارت‌های اساسی مورد نیاز به‌عنوان یک توسعه‌دهنده وب قبل از اتخاذ یک چارچوب تمرکز کنیم، گام بعدی خوب برای تکمیل این برنامه درسی، یادگیری در مورد Node.js از طریق مجموعه‌ای دیگر از ویدیوها است : "[سری مبتدی به: نود جی اس](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)".

> ما را پیدا کنید [کد رفتار](CODE_OF_CONDUCT.md), [کمک کردن](CONTRIBUTING.md), و [ترجمه](TRANSLATIONS.md) دستورالعمل ها. ما از بازخورد سازنده شما استقبال می کنیم!

## هر درس شامل:

- طرحی اختیاری
- ویدیوی تکمیلی اختیاری
- مسابقه گرم کردن قبل از درس
- درس نوشتاری
- برای درس های پروژه محور، راهنمای گام به گام نحوه ساخت پروژه
- بررسی دانش
- یک چالش
- خواندن تکمیلی
- وظیفه
- مسابقه بعد از درس

> ** نکته ای در مورد آزمون ها **: همه آزمون ها [در این برنامه](https://ashy-river-0debb7803.1.azurestaticapps.net/?loc=fa) موجود است, برای 48 آزمون مجموع سه سوال هر کدام. آنها از داخل درس ها پیوند داده شده اند، اما برنامه مسابقه می تواند به صورت محلی اجرا شود. دستورالعمل موجود در پوشه «کویز-برنامه» را دنبال کنید. آنها به تدریج در حال بومی سازی هستند.

## درس ها

|     |                       نام پروژه                      |                            مفاهیم تدریس شده                             | اهداف یادگیری                                                                                                                 |                                                         درس مرتبط                                                          |        نویسنده          |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01  |                     شروع شدن                     |           مقدمه ای بر برنامه نویسی و ابزارهای تجارت           | زیربنای اساسی بیشتر زبان های برنامه نویسی و نرم افزاری را بیاموزید که به توسعه دهندگان حرفه ای کمک می کند کارهای خود را انجام دهند | [مقدمه ای بر زبان های برنامه نویسی و ابزارهای تجارت](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         جزمین         |
| 02  |                     شروع شدن                      |             اصول گیت هاب شامل کار با یک تیم است             | نحوه استفاده از گیت هاب در پروژه خود، نحوه همکاری با دیگران بر اساس کد                                                    |                            [معرفی گیت هاب](/1-getting-started-lessons/2-github-basics/README.md)                             |          فلور          |
| 03  |                     شروع شدن                      |                             دسترسی                              | اصول دسترسی به وب را بیاموزید                                                                                               |                       [مبانی دسترسی](/1-getting-started-lessons/3-accessibility/README.md)                       |       کریستفر       |
| 04  |                        اصول جی اس                         |                         انواع داده جاوا اسکریپت                          | اصول اولیه انواع داده جاوا اسکریپت                                                                                                 |                                       [انواع داده ها](/2-js-basics/1-data-types/README.md)                                        |         جزمین         |
| 05  |                        اصول جی اس                         |                         توابع و روش ها                          | با توابع و روش های مدیریت جریان منطقی برنامه آشنا شوید                                                             |                              [توابع و روش ها](/2-js-basics/2-functions-methods/README.md)                               | جزمین و کریستوفر |
| 06  |                        اصول جی اس                         |                        تصمیم گیری با جی اس                        | بیاموزید که چگونه با استفاده از روش های تصمیم گیری در کد خود شرایط ایجاد کنید                                                           |                                 [تصمیم گیری](/2-js-basics/3-making-decisions/README.md)                                  |         جزمین         |
| 07  |                        اصول جی اس                         |                            آرایه ها و حلقه ها                            | با داده ها با استفاده از آرایه ها و حلقه ها در جاوا اسکریپت کار کنید                                                                                 |                                   [آرایه ها و حلقه ها](/2-js-basics/4-arrays-loops/README.md)                                    |         جزمین         |
| 08  |       [تراریوم](/3-terrarium/solution/README.md)       |                            اچ تی ام ال در عمل                            | کد اچ تی ام ال را به صورت آنلاین بسازید، با تمرکز بر روی ایجاد یک صفحه بزرگ                                                         |                                 [مقدمه ای بر اچ تی ام ال](/3-terrarium/1-intro-to-html/README.md)                                 |           جن           |
| 09  |       [تراریوم](/3-terrarium/solution/README.md)       |                            سی اس اس در عمل                             | ساخت سی اس اس برای سبک تراریوم آنلاین، با تمرکز بر اصول اولیه سی اس اس از جمله پاسخگو بودن صفحه                     |                                  [مقدمه ای بر سی اس اس](/3-terrarium/2-intro-to-css/README.md)                                  |           جن           || 10  |            [تراریوم](/3-terrarium/solution/README.md)            |                 بسته شدن جاوا اسکریپت، دستکاری دام                  | جاوا اسکریپت را بسازید تا تراریوم به عنوان یک رابط کشیدن و رها کردن، با تمرکز بر بسته شدن و دستکاری دام عمل کند.             |                  [بسته شدن جاوا اسکریپت، دستکاری دام](/3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           جن           |
| 11  |          [بازی تایپ](/4-typing-game/solution/README.md)          |                          یک بازی تایپ بسازید                           | با نحوه استفاده از رویدادهای صفحه کلید برای هدایت منطق برنامه جاوا اسکریپت خود آشنا شوید                                                          |                                [برنامه نویسی رویداد محور](/4-typing-game/typing-game/README.md)                                |       کریستوفر       |
| 12  | [پسوند مرورگر سبز](/5-browser-extension/solution/README.md) |                         کار با مرورگرها                          | با نحوه کار مرورگرها، تاریخچه آنها و نحوه ایجاد داربست در اولین عناصر یک برنامه افزودنی مرورگر آشنا شوید                               |                               [درباره مرورگرها](/5-browser-extension/1-about-browsers/README.md)                                |           جن           |
| 13  | [پسوند مرورگر سبز](/5-browser-extension/solution/README.md) | ساخت فرم، فراخوانی ای پی ای و ذخیره متغیرها در حافظه محلی | عناصر جاوا اسکریپت افزونه مرورگر خود را برای فراخوانی یک ای پی ای با استفاده از متغیرهای ذخیره شده در حافظه محلی بسازید                      |                [ای پی ای، فرم‌ها و فضای ذخیره‌سازی محلی](/5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           جن           |
| 14  | [پسوند مرورگر سبز](/5-browser-extension/solution/README.md) |          فرآیندهای پس زمینه در مرورگر، عملکرد وب          | از فرآیندهای پس‌زمینه مرورگر برای مدیریت نماد برنامه افزودنی استفاده کنید. در مورد عملکرد وب و برخی بهینه سازی هایی که باید انجام دهید بیاموزید   |             [وظایف و عملکرد پس زمینه](/5-browser-extension/3-background-tasks-and-performance/README.md)              |           جن           |
| 15  |           [بازی فضایی](/6-space-game/solution/README.md)           |             توسعه بازی پیشرفته تر با جاوا اسکریپت             | با استفاده از کلاس‌ها و ترکیب و الگوی پاب/ساب، در آماده‌سازی برای ساختن یک بازی، درباره وراثت بیاموزید.              |                      [مقدمه ای بر توسعه بازی پیشرفته](/6-space-game/1-introduction/README.md)                       |          کریس          |
| 16  |           [بازی فضایی](/6-space-game/solution/README.md)           |                           طراحی روی بوم                            | درباره کانواز ای پی ای که برای کشیدن عناصر به صفحه استفاده می شود، بیاموزید                                                                       |                                [طراحی روی بوم](/6-space-game/2-drawing-to-canvas/README.md)                                |          کریس          |
| 17  |           [بازی فضایی](/6-space-game/solution/README.md)           |                   حرکت عناصر در اطراف صفحه نمایش                    | کشف کنید که چگونه عناصر می توانند با استفاده از مختصات دکارتی و کانواز ای پی ای حرکت کنند                                            |                           [حرکت عناصر در اطراف](/6-space-game/3-moving-elements-around/README.md)                           |          کریس          |
| 18  |           [بازی فضایی](/6-space-game/solution/README.md)           |                          تشخیص برخورد                           | با استفاده از کلیدهای کلیدی، عناصر را با هم برخورد کرده و به یکدیگر واکنش نشان دهند و یک عملکرد خنک کننده برای اطمینان از عملکرد بازی ارائه دهید.    |                              [تشخیص برخورد](/6-space-game/4-collision-detection/README.md)                              |          کریس          |
| 19  |           [بازی فضایی](/6-space-game/solution/README.md)           |                             حفظ امتیاز                              | محاسبات ریاضی را بر اساس وضعیت و عملکرد بازی انجام دهید                                                                |                                    [حفظ امتیاز](/6-space-game/5-keeping-score/README.md)                                    |          کریس          |
| 20  |           [بازی فضایی](/6-space-game/solution/README.md)           |                     پایان و شروع مجدد بازی                     | درباره پایان و شروع مجدد بازی، از جمله پاکسازی دارایی ها و بازنشانی مقادیر متغیر، اطلاعات کسب کنید                              |                                [شرط پایان](/6-space-game/6-end-condition/README.md)                                 |          کریس          |
| 21  |         [اپلیکیشن بانکداری](/7-bank-project/solution/README.md)          |                 الگوها و مسیرهای اچ تی ام ال در یک برنامه وب                 | نحوه ایجاد داربست معماری یک وب سایت چند صفحه ای با استفاده از مسیریابی و قالب های اچ تی ام ال را بیاموزید                             |                            [الگوها و مسیرهای اچ تی ام ال](/7-bank-project/1-template-route/README.md)                             |          یوهان          |
| 22  |         [اپلیکیشن بانکداری](/7-bank-project/solution/README.md)          |                  یک فرم ورود و ثبت نام بسازید                   | در مورد ساخت فرم ها و روال های اعتبار سنجی ارائه اطلاعات کسب کنید                                                                          |                                           [فرم](/7-bank-project/2-forms/README.md)                                           |          یوهان          |
| 23  |         [اپلیکیشن بانکداری](/7-bank-project/solution/README.md)          |                   روش های واکشی و استفاده از داده ها                   | چگونه داده ها به داخل و خارج از برنامه شما جریان می یابد، چگونه آن را واکشی کنید، ذخیره کنید، و از بین ببرید                                                 |                                            [داده ها](/7-bank-project/3-data/README.md)                                            |          یوهان          |
| 24  |         [اپلیکیشن بانکداری](/7-bank-project/solution/README.md)          |                      مفاهیم مدیریت دولتی                      | بیاموزید که چگونه برنامه شما حالت خود را حفظ می کند و چگونه آن را به صورت برنامه ریزی مدیریت کنید                                                              |                                [مدیریت ستیت](/7-bank-project/4-state-management/README.md)                                |          یوهان          |
## دسترسی آفلاین

با استفاده از [Docsify](https://docsify.js.org/#/) می توانید این اسناد را به صورت آفلاین اجرا کنید. این مخزن را در دستگاه محلی خود [نصب کنید Docsify](https://docsify.js.org/#/quickstart) و سپس در پوشه اصلی این مخزن، «docsify serve» را تایپ کنید. این وب سایت در پورت 3000 در لوکال هاست شما ارائه می شود: «localhost:3000».
## پی دی اف

پی دی اف تمام دروس را می توان یافت [اینجا](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)

## سایر برنامه های درسی

تیم ما برنامه های درسی دیگری تولید می کند! وارسی:

- [یادگیری ماشینی برای مبتدیان](https://aka.ms/ml-beginners)
- [اینترنت اشیا برای مبتدیان](https://aka.ms/iot-beginners)
- [علم داده برای مبتدیان](https://aka.ms/datascience-beginners)
- [هوش مصنوعی برای مبتدیان](https://aka.ms/ai-beginners)
