leestott
9823536d1d
|
4 months ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 4 months ago | |
| 2-js-basics | 4 months ago | |
| 3-terrarium | 4 months ago | |
| 4-typing-game | 4 months ago | |
| 5-browser-extension | 4 months ago | |
| 6-space-game | 4 months ago | |
| 7-bank-project | 4 months ago | |
| 8-code-editor/1-using-a-code-editor | 4 months ago | |
| docs | 4 months ago | |
| lesson-template | 4 months ago | |
| quiz-app | 4 months ago | |
| CODE_OF_CONDUCT.md | 4 months ago | |
| CONTRIBUTING.md | 4 months ago | |
| README.md | 4 months ago | |
| SECURITY.md | 4 months ago | |
| SUPPORT.md | 4 months ago | |
| _404.md | 4 months ago | |
| for-teachers.md | 4 months ago | |
README.md
آموزش توسعه وب برای مبتدیان - یک برنامه آموزشی
اصول توسعه وب را با دوره جامع ۱۲ هفتهای ما که توسط Microsoft Cloud Advocates طراحی شده است، بیاموزید. هر یک از ۲۴ درس شامل پروژههای عملی مانند تراریومها، افزونههای مرورگر و بازیهای فضایی است که به شما کمک میکند جاوااسکریپت، CSS و HTML را یاد بگیرید. با آزمونها، بحثها و تکالیف عملی درگیر شوید. مهارتهای خود را تقویت کنید و دانش خود را با روش آموزشی مبتنی بر پروژه بهینه کنید. امروز سفر کدنویسی خود را آغاز کنید!
🧑🎓 دانشجو هستید؟
به صفحه مرکز دانشجویان مراجعه کنید، جایی که منابع مبتدی، بستههای دانشجویی و حتی راههایی برای دریافت گواهی رایگان را پیدا خواهید کرد. این صفحهای است که باید نشانکگذاری کنید و هر از گاهی بررسی کنید، زیرا محتوای آن ماهانه تغییر میکند.
📣 اطلاعیه - برنامه آموزشی جدید در مورد هوش مصنوعی مولد برای جاوااسکریپت منتشر شد
برنامه آموزشی جدید هوش مصنوعی مولد ما را از دست ندهید!
به 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 and Christopher |
| 06 | اصول جاوااسکریپت | تصمیمگیری با جاوااسکریپت | یادگیری نحوه ایجاد شرایط در کد با استفاده از روشهای تصمیمگیری | تصمیمگیری | Jasmine |
| 07 | اصول جاوااسکریپت | آرایهها و حلقهها | کار با دادهها با استفاده از آرایهها و حلقهها در جاوااسکریپت | آرایهها و حلقهها | Jasmine |
| 08 | تراریوم | HTML در عمل | ساخت HTML برای ایجاد یک تراریوم آنلاین، با تمرکز بر ساخت یک طرحبندی | معرفی HTML | Jen |
| 09 | تراریوم | CSS در عمل | ساخت CSS برای استایلدهی به تراریوم آنلاین، با تمرکز بر اصول اولیه CSS از جمله پاسخگو کردن صفحه | معرفی CSS | Jen |
| 10 | تراریوم | بستههای جاوااسکریپت، دستکاری DOM | ساخت جاوااسکریپت برای عملکرد تراریوم به عنوان یک رابط کشیدن و رها کردن، با تمرکز بر بستهها و دستکاری DOM | بستههای جاوااسکریپت، دستکاری DOM | Jen |
| 11 | بازی تایپ | ساخت یک بازی تایپ | یادگیری نحوه استفاده از رویدادهای صفحه کلید برای هدایت منطق اپلیکیشن جاوااسکریپت | برنامهنویسی مبتنی بر رویداد | Christopher |
| 12 | افزونه مرورگر سبز | کار با مرورگرها | یاد بگیرید مرورگرها چگونه کار میکنند، تاریخچه آنها و چگونه اولین عناصر یک افزونه مرورگر را ایجاد کنید | درباره مرورگرها | جن |
| 13 | افزونه مرورگر سبز | ساخت فرم، فراخوانی API و ذخیره متغیرها در حافظه محلی | عناصر جاوااسکریپت افزونه مرورگر خود را برای فراخوانی یک API با استفاده از متغیرهای ذخیرهشده در حافظه محلی بسازید | APIها، فرمها و حافظه محلی | جن |
| 14 | افزونه مرورگر سبز | فرآیندهای پسزمینه در مرورگر، عملکرد وب | از فرآیندهای پسزمینه مرورگر برای مدیریت آیکون افزونه استفاده کنید؛ درباره عملکرد وب و برخی بهینهسازیها برای بهبود یاد بگیرید | وظایف پسزمینه و عملکرد | جن |
| 15 | بازی فضایی | توسعه پیشرفتهتر بازی با جاوااسکریپت | درباره وراثت با استفاده از کلاسها و ترکیب و الگوی Pub/Sub یاد بگیرید، بهعنوان مقدمهای برای ساخت یک بازی | مقدمهای بر توسعه پیشرفته بازی | کریس |
| 16 | بازی فضایی | رسم روی بوم | درباره API بوم یاد بگیرید که برای رسم عناصر روی صفحه استفاده میشود | رسم روی بوم | کریس |
| 17 | بازی فضایی | حرکت دادن عناصر روی صفحه | کشف کنید که چگونه عناصر میتوانند با استفاده از مختصات دکارتی و API بوم حرکت کنند | حرکت دادن عناصر | کریس |
| 18 | بازی فضایی | تشخیص برخورد | عناصر را به هم برخورد دهید و با استفاده از کلیدهای فشردهشده واکنش نشان دهید و یک تابع خنککننده برای اطمینان از عملکرد بازی ارائه دهید | تشخیص برخورد | کریس |
| 19 | بازی فضایی | ثبت امتیاز | محاسبات ریاضی را بر اساس وضعیت و عملکرد بازی انجام دهید | ثبت امتیاز | کریس |
| 20 | بازی فضایی | پایان دادن و شروع مجدد بازی | درباره پایان دادن و شروع مجدد بازی، از جمله پاکسازی منابع و بازنشانی مقادیر متغیرها یاد بگیرید | شرایط پایان | کریس |
| 21 | اپلیکیشن بانکی | قالبهای HTML و مسیرها در یک اپ وب | یاد بگیرید چگونه ساختار یک وبسایت چندصفحهای را با استفاده از مسیریابی و قالبهای HTML ایجاد کنید | قالبهای HTML و مسیرها | یوهان |
| 22 | اپلیکیشن بانکی | ساخت فرم ورود و ثبتنام | درباره ساخت فرمها و مدیریت روالهای اعتبارسنجی یاد بگیرید | فرمها | یوهان |
| 23 | اپلیکیشن بانکی | روشهای دریافت و استفاده از دادهها | جریان دادهها درون و بیرون اپلیکیشن شما، نحوه دریافت، ذخیره و حذف آنها را یاد بگیرید | دادهها | یوهان |
| 24 | اپلیکیشن بانکی | مفاهیم مدیریت وضعیت | یاد بگیرید اپلیکیشن شما چگونه وضعیت را حفظ میکند و چگونه آن را بهصورت برنامهنویسی مدیریت کنید | مدیریت وضعیت | یوهان |
🏫 آموزش
برنامه درسی ما با دو اصل کلیدی آموزشی طراحی شده است:
- یادگیری مبتنی بر پروژه
- آزمونهای مکرر
این برنامه اصول اولیه جاوااسکریپت، HTML و CSS را آموزش میدهد، همچنین ابزارها و تکنیکهای جدیدی که توسعهدهندگان وب امروزی استفاده میکنند. دانشآموزان فرصت خواهند داشت تا تجربه عملی کسب کنند با ساخت یک بازی تایپ، تراریوم مجازی، افزونه مرورگر سازگار با محیط زیست، بازی به سبک مهاجمان فضایی و یک اپلیکیشن بانکی برای کسبوکارها. تا پایان این دوره، دانشآموزان درک جامعی از توسعه وب به دست خواهند آورد.
🎓 میتوانید چند درس اول این برنامه درسی را بهعنوان مسیر یادگیری در Microsoft Learn بگذرانید!
با اطمینان از اینکه محتوا با پروژهها هماهنگ است، فرآیند برای دانشآموزان جذابتر میشود و حفظ مفاهیم تقویت خواهد شد. ما همچنین چند درس مقدماتی در اصول جاوااسکریپت نوشتیم تا مفاهیم را معرفی کنیم، همراه با ویدئویی از مجموعه "سری مبتدیان: جاوااسکریپت" که برخی از نویسندگان آن در این برنامه درسی مشارکت داشتند.
علاوه بر این، یک آزمون کمفشار قبل از کلاس، نیت دانشآموز را به سمت یادگیری یک موضوع هدایت میکند، در حالی که یک آزمون دوم بعد از کلاس، حفظ بیشتر را تضمین میکند. این برنامه درسی بهگونهای طراحی شده است که انعطافپذیر و سرگرمکننده باشد و میتوان آن را بهطور کامل یا جزئی گذراند. پروژهها کوچک شروع میشوند و تا پایان چرخه ۱۲ هفتهای بهطور فزایندهای پیچیده میشوند.
در حالی که ما عمداً از معرفی فریمورکهای جاوااسکریپت اجتناب کردیم تا بر مهارتهای اساسی مورد نیاز بهعنوان یک توسعهدهنده وب قبل از استفاده از یک فریمورک تمرکز کنیم، یک گام بعدی خوب پس از تکمیل این برنامه درسی، یادگیری درباره Node.js از طریق مجموعه دیگری از ویدئوها است: "سری مبتدیان: Node.js".
به قوانین رفتاری و دستورالعملهای مشارکت ما مراجعه کنید. ما از بازخورد سازنده شما استقبال میکنیم!
🧭 دسترسی آفلاین
میتوانید این مستندات را بهصورت آفلاین با استفاده از Docsify اجرا کنید. این مخزن را فورک کنید، Docsify را نصب کنید روی دستگاه محلی خود، و سپس در پوشه اصلی این مخزن، دستور docsify serve را تایپ کنید. وبسایت روی پورت ۳۰۰۰ در localhost شما ارائه خواهد شد: localhost:3000.
یک فایل PDF از تمام درسها را میتوانید اینجا پیدا کنید.
🎒 دورههای دیگر
تیم ما دورههای دیگری نیز تولید میکند! بررسی کنید:
- هوش مصنوعی مولد برای مبتدیان
- هوش مصنوعی مولد برای مبتدیان .NET
- هوش مصنوعی مولد با جاوااسکریپت
- هوش مصنوعی مولد با جاوا
- هوش مصنوعی برای مبتدیان
- علم داده برای مبتدیان
- یادگیری ماشین برای مبتدیان
- امنیت سایبری برای مبتدیان
- توسعه وب برای مبتدیان
- اینترنت اشیا برای مبتدیان
- توسعه XR برای مبتدیان
- تسلط بر GitHub Copilot برای استفاده عاملمحور
- تسلط بر GitHub Copilot برای توسعهدهندگان C#/.NET
- ماجراجویی خود را با Copilot انتخاب کنید
مجوز
این مخزن تحت مجوز MIT منتشر شده است. برای اطلاعات بیشتر به فایل LICENSE مراجعه کنید.
سلب مسئولیت:
این سند با استفاده از سرویس ترجمه هوش مصنوعی Co-op Translator ترجمه شده است. در حالی که ما تلاش میکنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمههای خودکار ممکن است حاوی خطاها یا نادرستیهایی باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، ترجمه حرفهای انسانی توصیه میشود. ما هیچ مسئولیتی در قبال سوءتفاهمها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.