|
|
1 week ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 1 week ago | |
| 2-js-basics | 1 week ago | |
| 3-terrarium | 1 week ago | |
| 4-typing-game | 1 week ago | |
| 5-browser-extension | 1 week ago | |
| 6-space-game | 1 week ago | |
| 7-bank-project | 1 week ago | |
| 8-code-editor/1-using-a-code-editor | 1 week ago | |
| 9-chat-project | 1 week ago | |
| 10-ai-framework-project | 1 week ago | |
| Git-Basics | 1 week ago | |
| docs | 1 week ago | |
| lesson-template | 1 week ago | |
| memory-game | 1 week ago | |
| quiz-app | 1 week ago | |
| .co-op-translator.json | 1 week ago | |
| AGENTS.md | 1 week ago | |
| CODE_OF_CONDUCT.md | 1 week ago | |
| CONTRIBUTING.md | 1 week ago | |
| README.md | 1 week ago | |
| SECURITY.md | 1 week ago | |
| SUPPORT.md | 1 week ago | |
| _404.md | 1 week ago | |
| for-teachers.md | 1 week ago | |
README.md
توسعه وب برای مبتدیها - یک دوره آموزشی
اصول بنیادی توسعه وب را با دوره جامع ۱۲ هفتهای ما توسط مدافعان مایکروسافت کلود بیاموزید. هر یک از ۲۴ درس به صورت عملی به جاوااسکریپت، CSS و HTML میپردازد با پروژههایی مانند تراریومها، افزونههای مرورگر و بازیهای فضایی. در کوییزها، گفتگوها و تمرینهای عملی شرکت کنید. مهارتهای خود را ارتقا دهید و با روش آموزش مبتنی بر پروژه ما، دانش خود را بهینه کنید. سفر کدنویسی خود را امروز آغاز کنید!
به انجمن دیسکورد Azure AI Foundry ملحق شوید
برای شروع استفاده از این منابع، مراحل زیر را دنبال کنید:
- انشعاب (فورک) مخزن: روی
کلیک کنید
- کلون کردن مخزن:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - به دیسکورد Azure AI Foundry بپیوندید و با کارشناسان و توسعهدهندگان همتراز ملاقات کنید
🌐 پشتیبانی چندزبان
پشتیبانی توسط GitHub Action (خودکار و همیشه بهروز)
عربی | بنگالی | بلغاری | برمهای (میانمار) | چینی (سادهشده) | چینی (سنتی، هنگکنگ) | چینی (سنتی، ماکائو) | چینی (سنتی، تایوان) | کرواتی | چک | دانمارکی | هلندی | استونیایی | فنلاندی | فرانسوی | آلمانی | یونانی | عبری | هندی | مجارستانی | اندونزیایی | ایتالیایی | ژاپنی | کانارا | کرهای | لیتوانیایی | مالایی | مالایالام | مراتی | نپالی | پیدجین نیجریهای | نروژی | فارسی | لهستانی | پرتغالی (برزیل) | پرتغالی (پرتغال) | پنجابی (گورموخی) | رومانیایی | روسی | صربی (سیریلیک) | اسلواکی | اسلوونیایی | اسپانیایی | سواحیلی | سوئدی | تاگالوگ (فیلیپینی) | تامیل | تلوگو | تایلندی | ترکی | اوکراینی | اردو | ویتنامی
مایلید به کلون کردن محلی هستید؟
این مخزن شامل بیش از ۵۰ ترجمه زبان است که اندازه دانلود را به طور قابل توجهی افزایش میدهد. برای کلون بدون ترجمهها، از 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'این به شما همه چیز لازم برای تکمیل دوره را با دانلود بسیار سریعتر میدهد.
اگر تمایل به پشتیبانی ترجمه زبانهای بیشتر دارید، زبانهای پشتیبانی شده در اینجا آمده است
🧑🎓 آیا دانشجو هستید؟
از صفحه Student Hub دیدن کنید که منابع مبتدی، پکیجهای دانشجویی و حتی راههایی برای دریافت کوپن رایگان گواهینامه را خواهید یافت. این صفحهای است که باید نشانک کنید و گاه به گاه بررسی کنید چون محتوای آن ماهانه بهروزرسانی میشود.
📣 اطلاعیه - چالشهای حالت GitHub Copilot Agent جدید برای تکمیل!
چالش جدید اضافه شده، به دنبال "GitHub Copilot Agent Challenge 🚀" در اکثر فصلها باشید. این چالش جدیدی است برای شما که با استفاده از 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>، آدرسی را که کپی کردهاید جایگزین کنید:git clone <your-repository-url>
۲. پوشه را در ویژوال استودیو کد باز کنید. این کار را با کلیک روی File > Open Folder و انتخاب پوشهای که تازه کلون کردهاید انجام دهید.
افزونههای پیشنهاد شده ویژوال استودیو کد:
- Live Server - برای پیشنمایش صفحات HTML در داخل ویژوال استودیو کد
- Copilot - برای کمک به نوشتن سریعتر کد
📂 هر درس شامل:
- نقشهکشی اختیاری
- ویدیوی تکمیلی اختیاری
- آزمون گرمکننده پیشدرس
- درس نوشتاری
- برای درسهای مبتنی بر پروژه، راهنماهای گامبهگام نحوه ساخت پروژه
- بررسی دانش
- یک چالش
- مطالعه تکمیلی
- تمرین
- آزمون پس از درس
تذکر درباره آزمونها: تمام آزمونها در پوشه Quiz-app قرار دارند، مجموعاً ۴۸ آزمون با هر کدام شامل سه سوال. آنها اینجا در دسترساند، اپلیکیشن آزمون میتواند به صورت محلی اجرا شود یا روی Azure منتشر گردد؛ دستورالعمل اجرای آن در پوشه
quiz-appموجود است.
🗃️ دروس
| نام پروژه | مفاهیم آموزش داده شده | اهداف آموزشی | درس مرتبط | نویسنده | |
|---|---|---|---|---|---|
| ۰۱ | شروع کار | مقدمهای بر برنامهنویسی و ابزارهای کار | یادگیری اصول پایه در پشت بیشتر زبانهای برنامهنویسی و همچنین نرمافزارهایی که به توسعهدهندگان حرفهای برای انجام کارشان کمک میکنند | مقدمهای بر زبانهای برنامهنویسی و ابزارهای کار | جاسمن |
| ۰۲ | شروع کار | مبانی گیتهاب، شامل همکاری تیمی | چگونگی استفاده از گیتهاب در پروژه، و نحوه همکاری با دیگران روی کد | مقدمهای بر گیتهاب | فلور |
| ۰۳ | شروع کار | دسترسی (Accessibility) | یادگیری اصول پایه درباره دسترسی وب | مبانی دسترسی | کریستوفر |
| ۰۴ | پایههای JS | انواع دادهها در جاوااسکریپت | مفاهیم پایه انواع دادهها در جاوااسکریپت | انواع دادهها | جاسمن |
| ۰۵ | پایههای JS | توابع و متدها | یادگیری توابع و متدها برای مدیریت جریان منطق برنامه | توابع و متدها | جاسمن و کریستوفر |
| ۰۶ | پایههای JS | تصمیمگیری با جاوااسکریپت | نحوه ایجاد شرطها در کد با استفاده از روشهای تصمیمگیری | تصمیمگیری | جاسمن |
| ۰۷ | پایههای JS | آرایهها و حلقهها | کار با دادهها با استفاده از آرایهها و حلقهها در جاوااسکریپت | آرایهها و حلقهها | جاسمن |
| ۰۸ | Terrarium | HTML در عمل | ساخت HTML برای ایجاد یک تراریوم آنلاین، با تمرکز روی ساختار صفحه | مقدمهای بر HTML | جن |
| ۰۹ | Terrarium | CSS در عمل | ساخت CSS برای طراحی تراریوم آنلاین، تمرکز بر اصول CSS از جمله ریسپانسیو کردن صفحه | مقدمهای بر CSS | جن |
| ۱۰ | Terrarium | کلوژرهای جاوااسکریپت، دستکاری DOM | ساخت جاوااسکریپت برای عملکرد تراریوم به صورت واسط کشیدن و رها کردن، با تمرکز بر کلوژرها و دستکاری DOM | کلوژرهای جاوااسکریپت، دستکاری DOM | جن |
| ۱۱ | Typing Game | ساخت بازی تایپینگ | یادگیری استفاده از رویدادهای صفحهکلید برای هدایت منطق اپلیکیشن جاوااسکریپت | برنامهنویسی رویدادمحور | کریستوفر |
| ۱۲ | Green Browser Extension | کار با مرورگرها | یادگیری نحوه کار مرورگرها، تاریخچه آنها، و ساخت المانهای اولیه افزونه مرورگر | درباره مرورگرها | جن |
| ۱۳ | Green Browser Extension | ساخت فرم، فراخوانی API و ذخیره متغیرها در فضای محلی | ساخت المانهای جاوااسکریپت افزونه مرورگر برای فراخوانی API با استفاده از متغیرهای ذخیرهشده در فضای محلی | APIها، فرمها و فضای ذخیره محلی | جن |
| ۱۴ | Green Browser Extension | فرایندهای پسزمینه مرورگر، عملکرد وب | استفاده از فرایندهای پسزمینه مرورگر برای مدیریت آیکون افزونه؛ یادگیری درباره عملکرد وب و بهینهسازیهای مرتبط | کارهای پسزمینه و عملکرد | جن |
| ۱۵ | Space Game | توسعه پیشرفتهتر بازی با جاوااسکریپت | یادگیری وراثت با استفاده از هر دو کلاسها و ترکیب و الگوی Pub/Sub، آمادهسازی برای ساخت بازی | مقدمهای بر توسعه پیشرفته بازی | کریس |
| ۱۶ | Space Game | نقاشی روی بوم | یادگیری API بوم (Canvas) برای ترسیم المانها روی صفحه | نقاشی روی بوم | کریس |
| ۱۷ | Space Game | حرکت دادن المانها در اطراف صفحه | کشف نحوه حرکت المانها با استفاده از مختصات کارتزین و API بوم | حرکت دادن المانها | کریس |
| ۱۸ | Space Game | تشخیص برخورد | ایجاد برخورد بین المانها و واکنش به همدیگر با استفاده از کلیدها و ارائه تابع خنککننده برای تضمین عملکرد بازی | تشخیص برخورد | کریس |
| ۱۹ | Space Game | ثبت امتیاز | انجام محاسبات ریاضی بر اساس وضعیت و عملکرد بازی | ثبت امتیاز | کریس |
| ۲۰ | Space Game | پایان و راهاندازی مجدد بازی | یادگیری درباره خاتمه دادن به بازی و راهاندازی مجدد آن، شامل پاکسازی منابع و تنظیم مجدد مقادیر متغیر | شرط پایان | کریس |
| ۲۱ | Banking App | قالبها و مسیرها (Routes) در یک وب اپ | یادگیری چگونگی ایجاد ساختار سایت چند صفحهای با استفاده از مسیرها و قالبهای HTML | قالبها و مسیرها | یوهان |
| ۲۲ | Banking App | ساخت فرم ورود و ثبتنام | یادگیری ساخت فرمها و مدیریت روالهای اعتبارسنجی | فرمها | یوهان |
| ۲۳ | Banking App | روشهای دریافت و استفاده از دادهها | جریان دادهها در برنامه شما، نحوه دریافت، ذخیره و دفع آنها | دادهها | یوهان |
| ۲۴ | Banking App | مفاهیم مدیریت وضعیت (State) | یادگیری اینکه برنامه چگونه وضعیت خود را حفظ میکند و نحوه مدیریت آن به صورت برنامهنویسی | مدیریت وضعیت | یوهان |
| ۲۵ | کد مرورگر/وی اس کد | کار با وی اس کد | یادگیری نحوه استفاده از یک ویرایشگر کد | استفاده از ویرایشگر کد وی اس کد | کریس |
| ۲۶ | دستیاران هوش مصنوعی | کار با هوش مصنوعی | یادگیری ساخت دستیار هوش مصنوعی خود | پروژه دستیار هوش مصنوعی | کریس |
🏫 روش تدریس
برنامه درسی ما با در نظر گرفتن دو اصل کلیدی آموزشی طراحی شده است:
- یادگیری مبتنی بر پروژه
- آزمونهای مکرر
این برنامه اصول جاوااسکریپت، HTML و CSS را به همراه جدیدترین ابزارها و تکنیکهای مورد استفاده توسعهدهندگان وب امروز آموزش میدهد. دانشآموزان فرصت خواهند داشت با ساخت بازی تایپینگ، تراریوم مجازی، افزونه مرورگر سازگار با محیط زیست، بازی سبک مهاجم فضایی و اپلیکیشن بانکی برای کسبوکارها، تجربه عملی کسب کنند. تا پایان این مجموعه، دانشآموزان درک محکمی از توسعه وب بهدست خواهند آورد.
🎓 شما میتوانید چند درس اول این برنامه درسی را بهعنوان مسیر یادگیری در مایکروسافت لرن دنبال کنید!
با اطمینان از همسویی محتوا با پروژهها، فرایند برای دانشآموزان جذابتر شده و یادگیری مفاهیم بهتر حفظ میشود. همچنین، چند درس شروعکننده در پایههای جاوااسکریپت نوشتهایم تا مفاهیم را معرفی کنیم، به همراه ویدیویی از مجموعه آموزشی "سری مبتدیان به: جاوااسکریپت" برخی نویسندگان آن در این برنامه مشارکت داشتهاند.
علاوه بر این، یک آزمون کمفشار پیش از کلاس، هدفگذاری دانشآموزان را برای یادگیری موضوع تنظیم میکند و آزمون دوم پس از کلاس باعث حفظ بیشتر مطلب میشود. این برنامه درسی به گونهای طراحی شده که انعطافپذیر و سرگرمکننده باشد و میتوان آن را بهطور کامل یا بخشی از آن را گذراند. پروژهها از سطح ساده آغاز شده و در انتهای دوره ۱۲ هفتهای به مرور پیچیدهتر میشوند.
در حالی که آگاهانه از معرفی فریمورکهای جاوااسکریپت اجتناب کردهایم تا بر مهارتهای پایهای لازم برای توسعهدهنده وب تمرکز کنیم قبل از پذیرش یک فریمورک، گام بعدی مناسب برای تکمیل این برنامه یادگیری Node.js از طریق مجموعه ویدیوهای دیگر است: "سری مبتدیان به: Node.js".
از کد رفتار و راهنمای مشارکت ما دیدن کنید. بازخورد سازنده شما را خوشامد میگوییم!
🧭 دسترسی آفلاین
شما میتوانید این مستندات را به صورت آفلاین با استفاده از Docsify اجرا کنید. این مخزن را فورک کنید، Docsify را نصب کنید روی دستگاه محلی خود، و سپس در پوشه ریشه این مخزن دستور docsify serve را وارد نمایید. وبسایت روی پورت ۳۰۰۰ در لوکالهاست شما قابل دسترس خواهد بود: localhost:3000.
یک فایل PDF از تمام دروس را میتوانید در اینجا بیابید.
🎒 دورههای دیگر
تیم ما دورههای دیگری هم تولید میکند! نگاهی بیندازید به:
LangChain
Azure / Edge / MCP / Agents
سری هوش مصنوعی مولد
آموزش پایهای
سری کوپایلوت
دریافت کمک
اگر گیر کردید یا سوالی درباره ساخت برنامههای هوش مصنوعی داشتید، به دیگر یادگیرندگان و توسعهدهندگان باتجربه در بحثهای مربوط به MCP بپیوندید. این یک جامعه حمایتی است که در آن سوالات پذیرفته شده و دانش به صورت آزاد به اشتراک گذاشته میشود.
اگر بازخورد محصول یا خطایی هنگام ساخت دارید، مراجعه کنید به:
مجوز
این مخزن تحت مجوز MIT است. برای اطلاعات بیشتر به فایل LICENSE مراجعه کنید.
توضیح مهم:
این سند با استفاده از خدمات ترجمه هوش مصنوعی Co-op Translator ترجمه شده است. در حالی که ما برای دقت تلاش میکنیم، لطفاً توجه داشته باشید که ترجمههای خودکار ممکن است شامل خطاها یا نادرستیهایی باشند. سند اصلی به زبان بومی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حیاتی، ترجمه حرفهای انسانی توصیه میشود. ما مسئول هیچ گونه سوتفاهم یا تفسیر اشتباه ناشی از استفاده از این ترجمه نیستیم.


