|
|
4 weeks ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 1 month ago | |
| 2-js-basics | 1 month ago | |
| 3-terrarium | 1 month ago | |
| 4-typing-game | 1 month ago | |
| 5-browser-extension | 1 month ago | |
| 6-space-game | 1 month ago | |
| 7-bank-project | 1 month ago | |
| 8-code-editor/1-using-a-code-editor | 1 month ago | |
| 9-chat-project | 1 month ago | |
| 10-ai-framework-project | 1 month ago | |
| Git-Basics | 1 month ago | |
| docs | 1 month ago | |
| lesson-template | 1 month ago | |
| memory-game | 1 month ago | |
| quiz-app | 1 month ago | |
| .co-op-translator.json | 4 weeks ago | |
| AGENTS.md | 4 weeks ago | |
| CODE_OF_CONDUCT.md | 1 month ago | |
| CONTRIBUTING.md | 1 month ago | |
| README.md | 4 weeks ago | |
| SECURITY.md | 1 month ago | |
| SUPPORT.md | 1 month ago | |
| _404.md | 1 month ago | |
| for-teachers.md | 1 month ago | |
README.md
توسعه وب برای مبتدیان - یک برنامه درسی
اصول توسعه وب را با دوره جامع ۱۲ هفتهای ما توسط مدافعان ابر مایکروسافت بیاموزید. هر یک از ۲۴ درس به صورت عملی به آموزش جاوااسکریپت، CSS و HTML میپردازد، از جمله پروژههایی مثل تراریومها، افزونههای مرورگر و بازیهای فضایی. در فعالیتهایی مثل آزمونها، بحثها و تکالیف عملی شرکت کنید. مهارتهای خود را افزایش دهید و با روش مبتنی بر پروژه ما، حفظ دانش خود را بهینه کنید. سفر برنامهنویسی خود را امروز شروع کنید!
به جامعه Discord آزور AI Foundry بپیوندید
برای شروع استفاده از این منابع مراحل زیر را دنبال کنید:
- فورک مخزن: کلیک کنید
- کلون مخزن:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - به Discord آزور AI Foundry بپیوندید و با متخصصان و توسعهدهندگان همردیف آشنا شوید
🌐 پشتیبانی چندزبانه
پشتیبانی شده از طریق GitHub Action (خودکار و همواره بهروز)
عربی | بنگالی | بلغاری | برمهای (میانمار) | چینی (سادهسازی شده) | چینی (سنتی، هنگکنگ) | چینی (سنتی، ماکائو) | چینی (سنتی، تایوان) | کرواسیایی | چکی | دانمارکی | هلندی | استونیایی | فنلاندی | فرانسوی | آلمانی | یونانی | عبری | هندی | مجارستانی | اندونزیایی | ایتالیایی | ژاپنی | کانادا | کرهای | لیتوانیایی | مالایی | مالایالام | مراتی | نپالی | پیجین نیجریهای | نروژی | فارسی (Farsi) | لهستانی | پرتغالی (برزیل) | پرتغالی (پرتغال) | پنجابی (گورموخی) | رومانیایی | روسی | صربی (سیریلیک) | اسلواکی | اسلوونیایی | اسپانیایی | سواحلی | سوئدی | تاگالوگ (فیلیپینی) | تامیلی | تلوگو | تایلندی | ترکی | اوکراینی | اردو | ویتنامی
ترجیح میدهید به صورت محلی کلون کنید؟
این مخزن شامل بیش از ۵۰ ترجمه زبان است که به طور قابل توجهی حجم دانلود را افزایش میدهد. برای کلون کردن بدون ترجمهها از sparse checkout استفاده کنید:
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'این به شما همه چیز لازم برای تکمیل دوره با دانلود بسیار سریعتر را میدهد.
اگر میخواهید زبانهای ترجمه بیشتری اضافه شوند، موارد پشتیبانی شده در اینجا فهرست شدهاند here
🧑🎓 دانشجو هستید؟
به صفحه Student Hub مراجعه کنید که منابع مبتدی، بستههای دانشجویی و حتی راههایی برای دریافت رایگان کد گواهینامه را پیدا خواهید کرد. این صفحهای است که باید نشانهگذاری کنید و گهگاه آن را بررسی کنید چون ماهانه محتوای جدید جایگزین میشود.
📣 اطلاعیه - چالشهای جدید حالت GitHub Copilot Agent برای تکمیل!
چالش جدید اضافه شده، به دنبال "چالش GitHub Copilot Agent 🚀" در بیشتر فصلها باشید. این چالشی جدید برای شماست که با استفاده از GitHub Copilot و حالت Agent آن را تکمیل کنید. اگر قبلا حالت Agent را استفاده نکردهاید، این حالت فقط متن تولید نمیکند بلکه فایلها را ایجاد و ویرایش میکند، فرمان اجرا میکند و بیشتر.
📣 اطلاعیه - پروژه جدید برای ساخت با استفاده از هوش مصنوعی مولد
پروژه جدید دستیار هوش مصنوعی به تازگی اضافه شده، آن را بررسی کنید project
📣 اطلاعیه - برنامه درسی جدید درباره هوش مصنوعی مولد برای جاوااسکریپت تازه منتشر شده است
برنامه درسی جدید هوش مصنوعی مولد ما را از دست ندهید!
برای شروع مراجعه کنید https://aka.ms/genai-js-course
- درسهایی که همه چیز، از اصول پایه تا RAG را پوشش میدهند.
- با شخصیتهای تاریخی با استفاده از GenAI و برنامه همراه ما تعامل کنید.
- روایت جذاب و سرگرمکننده، شما در حال سفر در زمان خواهید بود!
هر درس شامل یک تکلیف برای تکمیل، یک آزمون دانش و یک چالش برای راهنمایی در یادگیری موضوعاتی مانند:
- پرامپتدهی و مهندسی پرامپت
- تولید برنامههای متنی و تصویری
- برنامههای جستجو
برای شروع به https://aka.ms/genai-js-course مراجعه کنید!
🌱 شروع به کار
معلمان، ما چند پیشنهاد درباره نحوه استفاده از این برنامه درسی ارائه دادهایم. ما مشتاق دریافت بازخورد شما در فروم گفتگوی ما هستیم!
دانشآموزان، برای هر درس، با آزمون پیشدرس شروع کنید و با خواندن محتوای درس، انجام فعالیتهای مختلف و آزمون پسدرس پیش بروید.
برای بهبود تجربه یادگیری خود، با همکلاسیهایتان برای کار روی پروژهها همکاری کنید! بحثها در فروم گفتگوی ما تشویق میشوند و تیم مودراتورهای ما آماده پاسخگویی به سوالات شما هستند.
برای ادامه تحصیل، به شدت توصیه میکنیم Microsoft Learn را برای منابع مطالعاتی اضافی بررسی کنید.
📋 راهاندازی محیط کاری شما
این برنامه درسی دارای محیط توسعه آماده است! هنگام شروع میتوانید انتخاب کنید که برنامه را در Codespace (محیطی مبتنی بر مرورگر و بدون نیاز به نصب) اجرا کنید یا به صورت محلی روی رایانه خود با ویرایشگر متنی مانند Visual Studio Code کار کنید.
ساخت مخزن خود
برای راحتی ذخیرهسازی کارهای خود، توصیه میشود کپی خود را از این مخزن ایجاد کنید. این کار را با کلیک روی دکمه Use this template در بالای صفحه انجام دهید. این یک مخزن جدید در حساب GitHub شما با نسخهای از برنامه درسی ایجاد خواهد کرد.
مراحل زیر را دنبال کنید:
- فورک مخزن: روی دکمه "Fork" در گوشه بالا-راست این صفحه کلیک کنید.
- کلون مخزن:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
اجرای برنامه درسی در Codespace
در نسخه خود از این مخزن که ساختهاید، روی دکمه Code کلیک کرده و Open with Codespaces را انتخاب کنید. این یک Codespace جدید برای کار شما ایجاد خواهد کرد.
اجرای برنامه درسی به صورت محلی روی رایانه شما
برای اجرای این برنامه درسی به صورت محلی روی رایانه خود، به یک ویرایشگر متنی، یک مرورگر و یک ابزار خط فرمان نیاز دارید. اولین درس ما، مقدمهای بر زبانها و ابزارهای برنامهنویسی، گزینههای مختلفی برای هر یک از این ابزارها را برای شما توضیح میدهد تا بهترین گزینه را انتخاب کنید.
توصیه ما استفاده از Visual Studio Code به عنوان ویرایشگر است که همچنین دارای ترمینال داخلی است. میتوانید Visual Studio Code را از اینجا دانلود کنید.
-
مخزن خود را روی رایانهتان کلون کنید. این کار را با کلیک روی دکمه Code و کپی آدرس URL انجام دهید:
CodeSpace سپس، ترمینال را درون ویژوال استودیو کد باز کنید و دستور زیر را اجرا کنید، به طوری که
<your-repository-url>را با URL که همین الان کپی کردهاید جایگزین کنید:git clone <your-repository-url>
۲. پوشه را در ویژوال استودیو کد باز کنید. میتوانید این کار را با کلیک روی File > Open Folder و انتخاب پوشهای که تازه کلون کردهاید انجام دهید.
افزونههای پیشنهادی ویژوال استودیو کد:
- Live Server - برای پیشنمایش صفحات HTML داخل ویژوال استودیو کد
- Copilot - برای کمک به شما در نوشتن سریعتر کد
📂 هر درس شامل:
- اسکچنوت اختیاری
- ویدیوی تکمیلی اختیاری
- آزمون گرمکننده پیش از درس
- درس نوشته شده
- برای درسهای مبتنی بر پروژه، راهنماهای گام به گام ساخت پروژه
- بررسی دانش
- یک چالش
- مطالعه تکمیلی
- تمرین
- آزمون پس از درس
توجهی درباره آزمونها: همه آزمونها در پوشه Quiz-app قرار دارند، در مجموع ۴۸ آزمون که هرکدام ۳ سوال دارند. آنها در اینجا موجود هستند و اپلیکیشن آزمون میتواند به صورت محلی اجرا شود یا در Azure مستقر شود؛ دستورالعملها را در پوشه
quiz-appدنبال کنید.
🗃️ درسها
| نام پروژه | مفاهیم آموزش داده شده | اهداف یادگیری | درس مرتبط | نویسنده | |
|---|---|---|---|---|---|
| ۰۱ | شروع به کار | مقدمهای بر برنامهنویسی و ابزارهای حرفهای | یادگیری مبانی اصلی اکثر زبانهای برنامهنویسی و نرمافزاری که به توسعهدهندگان حرفهای در انجام کارشان کمک میکند | مقدمه برنامهنویسی و ابزارها | جاسمین |
| ۰۲ | شروع به کار | مبانی گیتهاب، شامل کار گروهی | چگونگی استفاده از گیتهاب در پروژه و همکاری با دیگران بر روی یک کد بیس | مقدمهای بر گیتهاب | فلور |
| ۰۳ | شروع به کار | دسترسپذیری | یادگیری اصول دسترسپذیری وب | اصول دسترسپذیری | کریستوفر |
| ۰۴ | مبانی JS | انواع داده در جاوااسکریپت | مبانی انواع داده در جاوااسکریپت | انواع داده | جاسمین |
| ۰۵ | مبانی JS | توابع و متدها | یادگیری درباره توابع و متدها برای مدیریت جریان منطق برنامه | توابع و متدها | جاسمین و کریستوفر |
| ۰۶ | مبانی JS | ایجاد تصمیم با JS | یادگیری چگونگی ایجاد شرطها در کد با استفاده از روشهای تصمیمگیری | تصمیمگیری | جاسمین |
| ۰۷ | مبانی JS | آرایهها و حلقهها | کار با دادهها با استفاده از آرایهها و حلقهها در جاوااسکریپت | آرایهها و حلقهها | جاسمین |
| ۰۸ | ثبتنام تراریوم | HTML در عمل | ساخت HTML برای ایجاد یک تراریوم آنلاین، تمرکز بر ایجاد یک طرح | مقدمهای بر HTML | جن |
| ۰۹ | ثبتنام تراریوم | CSS در عمل | ساخت CSS برای استایلدهی به تراریوم آنلاین، تمرکز بر اصول اولیه CSS شامل واکنشگرایی صفحه | مقدمهای بر CSS | جن |
| ۱۰ | ثبتنام تراریوم | Closureهای جاوااسکریپت و کار با DOM | ساخت جاوااسکریپت برای ایجاد عملکرد در تراریوم به صورت رابط کشیدن و رها کردن، تمرکز بر Closureها و کار با DOM | Closureهای JS و کار با DOM | جن |
| ۱۱ | بازی تایپ | ساخت بازی تایپ | یادگیری نحوه استفاده از رویدادهای کیبورد برای کنترل منطق برنامه جاوااسکریپت | برنامهنویسی رویدادمحور | کریستوفر |
| ۱۲ | افزونه سبز مرورگر | کار با مرورگرها | یادگیری نحوه عملکرد مرورگرها، تاریخچه آنها و ساخت اولین عناصر افزونه مرورگر | درباره مرورگرها | جن |
| ۱۳ | افزونه سبز مرورگر | ساخت فرم، فراخوانی API و ذخیره متغیرها در ذخیره محلی | ساخت عناصر جاوااسکریپت افزونه مرورگر جهت فراخوانی API با استفاده از متغیرهای ذخیره شده در ذخیره محلی | APIها، فرمها و ذخیره محلی | جن |
| ۱۴ | افزونه سبز مرورگر | پردازشهای پسزمینه در مرورگر، عملکرد وب | استفاده از پردازشهای پسزمینه مرورگر برای مدیریت آیکون افزونه؛ یادگیری درباره عملکرد وب و بهینهسازیها برای بهبود | کارهای پسزمینه و عملکرد | جن |
| ۱۵ | بازی فضا | توسعه بازی پیشرفتهتر با جاوااسکریپت | یادگیری درباره وراثت با استفاده از کلاسها و ترکیب و الگوی Pub/Sub، در آمادهسازی برای ساخت بازی | مقدمهای بر توسعه بازی پیشرفته | کریس |
| ۱۶ | بازی فضا | ترسیم روی بوم | یادگیری درباره API بوم (Canvas) که برای رسم عناصر روی صفحه استفاده میشود | رسم روی بوم | کریس |
| ۱۷ | بازی فضا | حرکت دادن عناصر در صفحه | کشف چگونگی حرکت گرفتن عناصر با استفاده از مختصات کارتزین و API بوم | حرکت دادن عناصر | کریس |
| ۱۸ | بازی فضا | تشخیص برخورد | ایجاد برخورد و واکنش عناصر به هم با استفاده از کلیدهای صفحه کلید و ارائه تابع خنککننده برای اطمینان از عملکرد بازی | تشخیص برخورد | کریس |
| ۱۹ | بازی فضا | نگه داشتن امتیاز | انجام محاسبات ریاضی بر اساس وضعیت و عملکرد بازی | نگهداری امتیاز | کریس |
| ۲۰ | بازی فضا | پایان و راهاندازی مجدد بازی | یادگیری درباره پایان دادن و شروع مجدد بازی، شامل پاکسازی منابع و تنظیم مجدد مقادیر متغیرها | شرط پایان | کریس |
| ۲۱ | اپلیکیشن بانکی | قالبهای HTML و مسیرها در اپ وب | یادگیری نحوه خلق اسکلت معماری یک وبسایت چندصفحهای با استفاده از مسیرها و قالبهای HTML | قالبها و مسیرها | یوهان |
| ۲۲ | اپلیکیشن بانکی | ساخت فرم ورود و ثبتنام | یادگیری ساخت فرمها و مدیریت روالهای اعتبارسنجی | فرمها | یوهان |
| ۲۳ | اپلیکیشن بانکی | روشهای دریافت و استفاده از دادهها | چگونگی جریان دادهها در برنامه، نحوه دریافت، ذخیره و دور انداختن آنها | داده | یوهان |
| ۲۴ | اپلیکیشن بانکی | مفاهیم مدیریت وضعیت | یادگیری چگونگی نگهداری وضعیت برنامه و مدیریت آن به صورت برنامهنویسی | مدیریت وضعیت | یوهان |
| ۲۵ | کد مرورگر / ویاسکد | کار با ویاس کد | یادگیری استفاده از ویرایشگر کد | استفاده از ویرایشگر کد ویاسکد | کریس |
| ۲۶ | دستیارهای هوش مصنوعی | کار با هوش مصنوعی | یادگیری ساخت دستیار هوشمند شخصی | پروژه دستیار هوش مصنوعی | کریس |
🏫 روش آموزش
برنامه درسی ما بر اساس دو اصل کلیدی آموزشی طراحی شده است:
- یادگیری مبتنی بر پروژه
- آزمونهای مکرر
این برنامه اصول جاوااسکریپت، HTML و CSS، همچنین جدیدترین ابزارها و تکنیکهایی که توسعهدهندگان وب امروزی استفاده میکنند را آموزش میدهد. دانشآموزان فرصت کسب تجربه عملی با ساخت بازی تایپ، تراریوم مجازی، افزونه مرورگر دوستدار محیط زیست، بازی سبک Space Invader و اپلیکیشن بانکی برای کسبوکارها را خواهند داشت. تا پایان این مجموعه، دانشآموزان درک محکمی از توسعه وب خواهند داشت.
🎓 میتوانید چند درس اول این برنامه درسی را به عنوان مسیر یادگیری در Microsoft Learn طی کنید!
با تضمین همراستایی محتوا با پروژهها، فرآیند برای دانشآموزان جذابتر میشود و حفظ مفاهیم افزایش مییابد. ما همچنین چند درس آغازین در مبانی جاوااسکریپت نوشتیم تا مفاهیم را معرفی کنیم، همراه با ویدیویی از مجموعه "مجموعه مبتدیان به: جاوااسکریپت" که بعضی از نویسندگان آن در این برنامه مشارکت داشتهاند.
علاوه بر این، یک آزمون ساده پیش از کلاس، قصد دانشآموز برای یادگیری موضوع را تعیین میکند، در حالی که آزمون دوم پس از کلاس، حفظ بیشتر مطلب را تضمین میکند. این برنامه به شکلی طراحی شده است که انعطافپذیر و سرگرمکننده باشد و میتوان آن را به طور کامل یا بخشی اجرا کرد. پروژهها از کوچک شروع شده و تا پایان چرخه ۱۲ هفتهای به تدریج پیچیدهتر میشوند.
در حالی که ما عمداً از معرفی چارچوبهای جاوااسکریپت اجتناب کردهایم تا روی مهارتهای پایهای لازم برای توسعهدهنده وب تمرکز کنیم، گام بعدی خوب برای تکمیل این برنامه، یادگیری Node.js از طریق مجموعه ویدیوهای دیگر است: "مجموعه مبتدیان به: Node.js".
به قانون رفتاری و راهنمای مشارکت ما مراجعه کنید. ما بازخورد سازنده شما را استقبال میکنیم!
🧭 دسترسی آفلاین
شما میتوانید این مستندات را به صورت آفلاین با استفاده از Docsify اجرا کنید. این مخزن را فورک کنید، Docsify را نصب کنید روی ماشین محلی خود، و سپس در پوشه اصلی این مخزن، فرمان docsify serve را اجرا کنید. وبسایت روی پورت ۳۰۰۰ در لوکالهاست شما عرضه خواهد شد: localhost:3000.
📘 پیدیاف
یک فایل PDF از تمام درسها را میتوانید اینجا پیدا کنید.
🎒 دورههای دیگر
تیم ما دورههای دیگری نیز تولید میکند! مشاهده کنید:
LangChain
Azure / Edge / MCP / Agents
Generative AI Series
Core Learning
Copilot Series
دریافت کمک
اگر در ساخت برنامههای هوش مصنوعی به مشکل خوردید یا سوالی داشتید، به جمع یادگیرندگان و توسعهدهندگان با تجربه در بحثهای MCP بپیوندید. این یک جامعه حمایتکننده است که سوالات خوشآمد گفته میشوند و دانش بهصورت رایگان به اشتراک گذاشته میشود.
اگر بازخورد محصول یا خطایی هنگام ساخت داشتید، به اینجا مراجعه کنید:
مجوز
این مخزن تحت مجوز MIT است. برای اطلاعات بیشتر فایل LICENSE را ببینید.
توضیح مهم:
این سند با استفاده از سرویس ترجمه هوش مصنوعی Co-op Translator ترجمه شده است. در حالی که ما تلاش میکنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمههای خودکار ممکن است شامل خطاها یا نواقصی باشد. سند اصلی به زبان اصلی خود باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حیاتی، ترجمه انسانی حرفهای توصیه میشود. ما مسئول هیچ گونه سوتفاهم یا برداشت نادرست ناشی از استفاده از این ترجمه نیستیم.


