leestott
f002467d3f
|
2 months ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 2 months ago | |
| 2-js-basics | 2 months ago | |
| 3-terrarium | 2 months ago | |
| 4-typing-game | 3 months ago | |
| 5-browser-extension | 2 months ago | |
| 6-space-game | 3 months ago | |
| 7-bank-project | 2 months ago | |
| 8-code-editor/1-using-a-code-editor | 2 months ago | |
| 9-chat-project | 3 months ago | |
| 10-ai-framework-project | 2 months ago | |
| Git-Basics | 2 months ago | |
| docs | ||
| lesson-template | ||
| memory-game | 2 months ago | |
| quiz-app | ||
| AGENTS.md | 2 months ago | |
| CODE_OF_CONDUCT.md | ||
| CONTRIBUTING.md | ||
| README.md | 2 months ago | |
| SECURITY.md | ||
| SUPPORT.md | ||
| _404.md | ||
| for-teachers.md | 2 months ago | |
README.md
توسعه وب برای مبتدیان - یک برنامه آموزشی
اصول توسعه وب را با دوره جامع ۱۲ هفتهای ما از Microsoft Cloud Advocates بیاموزید. هر یک از ۲۴ درس به صورت عملی به JavaScript، CSS و HTML میپردازد و پروژههایی مانند تراریومها، افزونههای مرورگر و بازیهای فضایی را شامل میشود. با آزمونها، بحثها و تکالیف عملی درگیر شوید. مهارتهای خود را تقویت کنید و دانش خود را با روش آموزشی مبتنی بر پروژه ما بهینه کنید. امروز سفر کدنویسی خود را آغاز کنید!
به جامعه دیسکورد Azure AI Foundry بپیوندید
برای شروع استفاده از این منابع، مراحل زیر را دنبال کنید:
- انشعاب مخزن: کلیک کنید
- کلون کردن مخزن:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - به دیسکورد Azure AI Foundry بپیوندید و با کارشناسان و توسعهدهندگان دیگر ملاقات کنید
🌐 پشتیبانی چندزبانه
پشتیبانی شده از طریق GitHub Action (خودکار و همیشه بهروز)
عربی | بنگالی | بلغاری | برمهای (میانمار) | چینی (سادهشده) | چینی (سنتی، هنگکنگ) | چینی (سنتی، ماکائو) | چینی (سنتی، تایوان) | کرواتی | چکی | دانمارکی | هلندی | استونیایی | فنلاندی | فرانسوی | آلمانی | یونانی | عبری | هندی | مجاری | اندونزیایی | ایتالیایی | ژاپنی | کرهای | لیتوانیایی | مالایی | مراتی | نپالی | نروژی | فارسی | لهستانی | پرتغالی (برزیل) | پرتغالی (پرتغال) | پنجابی (گورموخی) | رومانیایی | روسی | صربی (سیریلیک) | اسلواکی | اسلوونیایی | اسپانیایی | سواحیلی | سوئدی | تاگالوگ (فیلیپینی) | تامیلی | تایلندی | ترکی | اوکراینی | اردو | ویتنامی
اگر میخواهید زبانهای ترجمه اضافی پشتیبانی شوند، لیست زبانها اینجا موجود است
🧑🎓 آیا شما دانشجو هستید؟
به صفحه مرکز دانشجویی مراجعه کنید، جایی که منابع مبتدی، بستههای دانشجویی و حتی راههایی برای دریافت یک گواهی رایگان را پیدا خواهید کرد. این صفحهای است که باید نشانک کنید و هر از گاهی بررسی کنید، زیرا ما محتوای آن را ماهانه تغییر میدهیم.
📣 اطلاعیه - پروژه جدید برای ساخت با استفاده از هوش مصنوعی تولیدی
پروژه دستیار هوش مصنوعی جدید به تازگی اضافه شده است، آن را بررسی کنید پروژه
📣 اطلاعیه - برنامه آموزشی جدید در مورد هوش مصنوعی تولیدی برای جاوااسکریپت به تازگی منتشر شده است
برنامه آموزشی جدید هوش مصنوعی تولیدی ما را از دست ندهید!
به 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 انجام دهید:
سپس، ترمینال را در Visual Studio Code باز کنید و دستور زیر را اجرا کنید، جایگزین کردن
<your-repository-url>با URL که به تازگی کپی کردهاید:git clone <your-repository-url> -
پوشه را در Visual Studio Code باز کنید. میتوانید این کار را با کلیک بر روی File > Open Folder و انتخاب پوشهای که به تازگی کلون کردهاید انجام دهید.
افزونههای توصیهشده برای Visual Studio Code:
- Live Server - برای پیشنمایش صفحات HTML در داخل Visual Studio Code
- Copilot - برای کمک به نوشتن سریعتر کد
📂 هر درس شامل:
- اسکچنوت اختیاری
- ویدئوی تکمیلی اختیاری
- آزمون گرم کردن پیش از درس
- درس نوشته شده
- برای درسهای مبتنی بر پروژه، راهنماهای گامبهگام برای ساخت پروژه
- بررسی دانش
- یک چالش
- مطالعه تکمیلی
- تکلیف
- آزمون پس از درس
نکتهای درباره آزمونها: تمام آزمونها در پوشه Quiz-app قرار دارند، شامل ۴۸ آزمون با سه سؤال در هر آزمون. این آزمونها اینجا در دسترس هستند. اپلیکیشن آزمون میتواند به صورت محلی اجرا شود یا در Azure مستقر شود؛ دستورالعملها را در پوشه
quiz-appدنبال کنید.
🗃️ درسها
| نام پروژه | مفاهیم آموزش داده شده | اهداف یادگیری | درس مرتبط | نویسنده | |
|---|---|---|---|---|---|
| 01 | شروع کار | مقدمهای بر برنامهنویسی و ابزارهای مورد استفاده | یادگیری اصول اولیه اکثر زبانهای برنامهنویسی و نرمافزارهایی که به توسعهدهندگان حرفهای کمک میکنند کارشان را انجام دهند | مقدمهای بر زبانهای برنامهنویسی و ابزارهای مورد استفاده | Jasmine |
| 02 | شروع کار | اصول اولیه GitHub، شامل کار با تیم | نحوه استفاده از GitHub در پروژه، نحوه همکاری با دیگران در یک کدبیس | مقدمهای بر GitHub | Floor |
| 03 | شروع کار | دسترسیپذیری | یادگیری اصول اولیه دسترسیپذیری وب | اصول دسترسیپذیری | Christopher |
| 04 | اصول جاوااسکریپت | انواع داده جاوااسکریپت | اصول اولیه انواع داده جاوااسکریپت | انواع داده | Jasmine |
| 05 | اصول جاوااسکریپت | توابع و متدها | یادگیری درباره توابع و متدها برای مدیریت جریان منطقی یک اپلیکیشن | توابع و متدها | Jasmine و Christopher |
| 06 | اصول جاوااسکریپت | تصمیمگیری با جاوااسکریپت | یادگیری نحوه ایجاد شرایط در کد با استفاده از روشهای تصمیمگیری | تصمیمگیری | Jasmine |
| 07 | اصول جاوااسکریپت | آرایهها و حلقهها | کار با دادهها با استفاده از آرایهها و حلقهها در جاوااسکریپت | آرایهها و حلقهها | Jasmine |
| 08 | تراریوم | HTML در عمل | ساخت HTML برای ایجاد یک تراریوم آنلاین، با تمرکز بر ساخت یک چیدمان | مقدمهای بر HTML | Jen |
| 09 | تراریوم | CSS در عمل | ساخت CSS برای استایلدهی به تراریوم آنلاین، با تمرکز بر اصول اولیه CSS شامل واکنشپذیر کردن صفحه | مقدمهای بر CSS | Jen |
| 10 | تراریوم | Closureهای جاوااسکریپت، دستکاری DOM | ساخت جاوااسکریپت برای عملکرد تراریوم به عنوان یک رابط کشیدن/رها کردن، با تمرکز بر Closureها و دستکاری DOM | Closureهای جاوااسکریپت، دستکاری DOM | Jen |
| 11 | بازی تایپ | ساخت یک بازی تایپ | یادگیری نحوه استفاده از رویدادهای صفحهکلید برای هدایت منطق اپلیکیشن جاوااسکریپت | برنامهنویسی مبتنی بر رویداد | Christopher |
| 12 | افزونه مرورگر سبز | کار با مرورگرها | یادگیری نحوه عملکرد مرورگرها، تاریخچه آنها، و نحوه ایجاد اولین عناصر یک افزونه مرورگر | درباره مرورگرها | Jen |
| 13 | افزونه مرورگر سبز | ساخت فرم، فراخوانی API و ذخیره متغیرها در حافظه محلی | ساخت عناصر جاوااسکریپت افزونه مرورگر برای فراخوانی API با استفاده از متغیرهای ذخیرهشده در حافظه محلی | APIها، فرمها، و حافظه محلی | Jen |
| 14 | افزونه مرورگر سبز | فرآیندهای پسزمینه در مرورگر، عملکرد وب | استفاده از فرآیندهای پسزمینه مرورگر برای مدیریت آیکون افزونه؛ یادگیری درباره عملکرد وب و برخی بهینهسازیها | وظایف پسزمینه و عملکرد | Jen |
| 15 | بازی فضایی | توسعه بازی پیشرفتهتر با جاوااسکریپت | یادگیری درباره وراثت با استفاده از کلاسها و ترکیب و الگوی Pub/Sub، به عنوان مقدمهای برای ساخت بازی | مقدمهای بر توسعه بازی پیشرفته | Chris |
| 16 | بازی فضایی | رسم روی Canvas | یادگیری درباره API Canvas، که برای رسم عناصر روی صفحه استفاده میشود | رسم روی Canvas | Chris |
| 17 | بازی فضایی | حرکت دادن عناصر روی صفحه | کشف نحوه حرکت دادن عناصر با استفاده از مختصات کارتزین و API Canvas | حرکت دادن عناصر | Chris |
| 18 | بازی فضایی | تشخیص برخورد | ایجاد برخورد و واکنش عناصر به یکدیگر با استفاده از کلیدهای فشردهشده و ارائه یک تابع خنککننده برای اطمینان از عملکرد بازی | تشخیص برخورد | Chris |
| 19 | بازی فضایی | ثبت امتیاز | انجام محاسبات ریاضی بر اساس وضعیت و عملکرد بازی | ثبت امتیاز | Chris |
| 20 | بازی فضایی | پایان دادن و شروع مجدد بازی | یادگیری درباره پایان دادن و شروع مجدد بازی، شامل پاکسازی داراییها و بازنشانی مقادیر متغیرها | شرایط پایان | Chris |
| 21 | اپلیکیشن بانکی | قالبهای HTML و مسیرها در یک اپلیکیشن وب | یادگیری نحوه ایجاد ساختار معماری یک وبسایت چندصفحهای با استفاده از مسیرها و قالبهای HTML | قالبهای HTML و مسیرها | Yohan |
| 22 | اپلیکیشن بانکی | ساخت فرم ورود و ثبتنام | یادگیری درباره ساخت فرمها و مدیریت روالهای اعتبارسنجی | فرمها | Yohan |
| 23 | اپلیکیشن بانکی | روشهای دریافت و استفاده از داده | نحوه جریان دادهها در داخل و خارج از اپلیکیشن، نحوه دریافت، ذخیرهسازی، و حذف آن | دادهها | Yohan |
| 24 | اپلیکیشن بانکی | مفاهیم مدیریت وضعیت | یادگیری نحوه حفظ وضعیت اپلیکیشن و نحوه مدیریت آن به صورت برنامهنویسی | مدیریت وضعیت | Yohan |
| 25 | ویرایشگر کد مرورگر/VScode | کار با VScode | یادگیری نحوه استفاده از یک ویرایشگر کد | استفاده از ویرایشگر کد VScode | Chris |
| 26 | دستیارهای هوش مصنوعی | کار با هوش مصنوعی | یادگیری نحوه ساخت دستیار هوش مصنوعی خود | پروژه دستیار هوش مصنوعی | Chris |
🏫 اصول آموزشی
برنامه درسی ما با دو اصل کلیدی آموزشی طراحی شده است:
- یادگیری مبتنی بر پروژه
- آزمونهای مکرر
این برنامه اصول اولیه جاوااسکریپت، HTML، و CSS، و همچنین ابزارها و تکنیکهای جدیدی که توسط توسعهدهندگان وب امروزی استفاده میشود را آموزش میدهد. دانشآموزان فرصت خواهند داشت تا تجربه عملی کسب کنند و بازی تایپ، تراریوم مجازی، افزونه مرورگر سازگار با محیط زیست، بازی سبک مهاجم فضایی، و اپلیکیشن بانکی برای کسبوکارها بسازند. تا پایان این مجموعه، دانشآموزان درک جامعی از توسعه وب کسب خواهند کرد.
🎓 شما میتوانید چند درس اول این برنامه درسی را به عنوان یک مسیر یادگیری در Microsoft Learn بگذرانید!
با اطمینان از اینکه محتوا با پروژهها هماهنگ است، فرآیند برای دانشآموزان جذابتر میشود و حفظ مفاهیم تقویت خواهد شد. همچنین، چند درس مقدماتی در اصول جاوااسکریپت برای معرفی مفاهیم نوشتهایم که با یک ویدیو از مجموعه "سری مبتدیان: جاوااسکریپت" از آموزشهای ویدیویی همراه شده است، که برخی از نویسندگان آن در تهیه این برنامه درسی مشارکت داشتهاند.
علاوه بر این، یک آزمون کمفشار قبل از کلاس، قصد دانشآموز را به سمت یادگیری یک موضوع هدایت میکند، در حالی که یک آزمون دوم پس از کلاس، حفظ بیشتر را تضمین میکند. این برنامه درسی به گونهای طراحی شده است که انعطافپذیر و سرگرمکننده باشد و میتوان آن را به صورت کامل یا جزئی گذراند. پروژهها کوچک شروع میشوند و تا پایان چرخه ۱۲ هفتهای به طور فزایندهای پیچیده میشوند.
در حالی که ما عمداً از معرفی فریمورکهای جاوااسکریپت اجتناب کردهایم تا بر مهارتهای پایهای مورد نیاز به عنوان یک توسعهدهنده وب قبل از پذیرش یک فریمورک تمرکز کنیم، یک گام بعدی خوب پس از تکمیل این برنامه درسی میتواند یادگیری درباره Node.js از طریق مجموعه دیگری از ویدیوها باشد: "سری مبتدیان: Node.js".
به قوانین رفتاری و دستورالعملهای مشارکت ما مراجعه کنید. ما از بازخورد سازنده شما استقبال میکنیم!
🧭 دسترسی آفلاین
شما میتوانید این مستندات را به صورت آفلاین با استفاده از Docsify اجرا کنید. این مخزن را Fork کنید، Docsify را نصب کنید روی دستگاه محلی خود، و سپس در پوشه ریشه این مخزن، دستور docsify serve را تایپ کنید. وبسایت روی پورت ۳۰۰۰ در localhost شما اجرا خواهد شد: localhost:3000.
یک فایل PDF از تمام درسها اینجا قابل دسترسی است.
🎒 دورههای دیگر
تیم ما دورههای دیگری تولید میکند! بررسی کنید:
- MCP برای مبتدیان
- هوش مصنوعی Edge برای مبتدیان
- عاملهای هوش مصنوعی برای مبتدیان
- هوش مصنوعی مولد برای مبتدیان .NET
- هوش مصنوعی مولد با جاوااسکریپت
- هوش مصنوعی مولد با جاوا
- هوش مصنوعی برای مبتدیان
- علم داده برای مبتدیان
- یادگیری ماشین برای مبتدیان
- امنیت سایبری برای مبتدیان
- توسعه وب برای مبتدیان
- اینترنت اشیا برای مبتدیان
- توسعه XR برای مبتدیان
- استفاده حرفهای از GitHub Copilot برای برنامهنویسی مشارکتی
- استفاده حرفهای از GitHub Copilot برای توسعهدهندگان C#/.NET
- ماجراجویی خود را با Copilot انتخاب کنید
دریافت کمک
اگر در ساخت اپلیکیشنهای هوش مصنوعی به مشکل برخوردید یا سوالی دارید، به اینجا بپیوندید:
اگر بازخوردی درباره محصول دارید یا در هنگام ساخت به خطا برخوردید، به اینجا مراجعه کنید:
مجوز
این مخزن تحت مجوز MIT منتشر شده است. برای اطلاعات بیشتر به فایل LICENSE مراجعه کنید.
سلب مسئولیت:
این سند با استفاده از سرویس ترجمه هوش مصنوعی Co-op Translator ترجمه شده است. در حالی که ما تلاش میکنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمههای خودکار ممکن است شامل خطاها یا نادرستیها باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، توصیه میشود از ترجمه انسانی حرفهای استفاده کنید. ما مسئولیتی در قبال سوء تفاهمها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.