32 KiB
برای شروع استفاده از این منابع، مراحل زیر را دنبال کنید:
- فورک کردن مخزن: روی
کلیک کنید. - کلون کردن مخزن:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - به دیسکورد Azure AI Foundry بپیوندید و با کارشناسان و توسعه‌دهندگان دیگر آشنا شوید
توسعه وب برای مبتدیان - یک برنامه درسی
اصول توسعه وب را با دوره جامع ۱۲ هفته‌ای ما از 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 جدید برای شما ایجاد می‌کند تا در آن کار کنید.
!Codespace./images/createcodespace.png)
اجرای برنامه درسی به صورت محلی روی رایانه شما
برای اجرای این برنامه درسی به صورت محلی روی رایانه خود، به یک ویرایشگر متن، یک مرورگر و یک ابزار خط فرمان نیاز دارید. اولین درس ما، مقدمه‌ای بر زبان‌های برنامه‌نویسی و ابزارهای مورد استفاده، شما را با گزینه‌های مختلف برای هر یک از این ابزارها آشنا می‌کند تا بتوانید آنچه برای شما بهترین است را انتخاب کنید.
توصیه ما این است که از 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 | اصول JS | انواع داده جاوااسکریپت | اصول اولیه انواع داده جاوااسکریپت | انواع داده | Jasmine |
| 05 | اصول JS | توابع و متدها | یادگیری درباره توابع و متدها برای مدیریت جریان منطقی یک اپلیکیشن | توابع و متدها | Jasmine and Christopher |
| 06 | اصول JS | تصمیم‌گیری با JS | یادگیری نحوه ایجاد شرایط در کد خود با استفاده از روش‌های تصمیم‌گیری | تصمیم‌گیری | Jasmine |
| 07 | اصول JS | آرایه‌ها و حلقه‌ها | کار با داده‌ها با استفاده از آرایه‌ها و حلقه‌ها در جاوااسکریپت | آرایه‌ها و حلقه‌ها | Jasmine |
| 08 | تراریوم | HTML در عمل | ساخت HTML برای ایجاد یک تراریوم آنلاین، با تمرکز بر ساخت یک چیدمان | مقدمه‌ای بر HTML | Jen |
| 09 | تراریوم | CSS در عمل | ساخت CSS برای استایل‌دهی به تراریوم آنلاین، با تمرکز بر اصول اولیه CSS از جمله واکنش‌گرا کردن صفحه | مقدمه‌ای بر CSS | Jen |
| 10 | Terrarium | Closureهای جاوااسکریپت، دستکاری DOM | جاوااسکریپت را برای عملکرد تراریوم به‌عنوان یک رابط کشیدن و رها کردن بسازید، با تمرکز بر Closureها و دستکاری DOM | Closureهای جاوااسکریپت، دستکاری DOM | Jen |
| 11 | Typing Game | ساخت یک بازی تایپ | یاد بگیرید چگونه از رویدادهای صفحه‌کلید برای هدایت منطق برنامه جاوااسکریپت خود استفاده کنید | برنامه‌نویسی مبتنی بر رویداد | Christopher |
| 12 | Green Browser Extension | کار با مرورگرها | یاد بگیرید مرورگرها چگونه کار می‌کنند، تاریخچه آن‌ها و نحوه ایجاد اولین عناصر یک افزونه مرورگر | درباره مرورگرها | Jen |
| 13 | Green Browser Extension | ساخت فرم، فراخوانی API و ذخیره متغیرها در حافظه محلی | عناصر جاوااسکریپت افزونه مرورگر خود را بسازید تا یک API را با استفاده از متغیرهای ذخیره‌شده در حافظه محلی فراخوانی کنید | APIها، فرم‌ها و حافظه محلی | Jen |
| 14 | Green Browser Extension | فرآیندهای پس‌زمینه در مرورگر، عملکرد وب | از فرآیندهای پس‌زمینه مرورگر برای مدیریت آیکون افزونه استفاده کنید؛ درباره عملکرد وب و برخی بهینه‌سازی‌ها یاد بگیرید | وظایف پس‌زمینه و عملکرد | Jen |
| 15 | Space Game | توسعه بازی پیشرفته‌تر با جاوااسکریپت | درباره وراثت با استفاده از کلاس‌ها و ترکیب و الگوی Pub/Sub یاد بگیرید، به‌عنوان آماده‌سازی برای ساخت یک بازی | مقدمه‌ای بر توسعه بازی پیشرفته | Chris |
| 16 | Space Game | رسم روی Canvas | درباره API Canvas یاد بگیرید، که برای رسم عناصر روی صفحه استفاده می‌شود | رسم روی Canvas | Chris |
| 17 | Space Game | حرکت دادن عناصر روی صفحه | کشف کنید چگونه عناصر می‌توانند با استفاده از مختصات کارتزین و API Canvas حرکت کنند | حرکت دادن عناصر | Chris |
| 18 | Space Game | تشخیص برخورد | عناصر را به‌گونه‌ای بسازید که با یکدیگر برخورد کنند و واکنش نشان دهند، با استفاده از کلیدهای فشرده‌شده و ارائه یک تابع خنک‌کننده برای اطمینان از عملکرد بازی | تشخیص برخورد | Chris |
| 19 | Space Game | ثبت امتیاز | محاسبات ریاضی را بر اساس وضعیت و عملکرد بازی انجام دهید | ثبت امتیاز | Chris |
| 20 | Space Game | پایان دادن و شروع مجدد بازی | درباره پایان دادن و شروع مجدد بازی، از جمله پاکسازی دارایی‌ها و تنظیم مجدد مقادیر متغیرها یاد بگیرید | شرایط پایان | Chris |
| 21 | Banking App | قالب‌های HTML و مسیرها در یک برنامه وب | یاد بگیرید چگونه ساختار یک وب‌سایت چندصفحه‌ای را با استفاده از مسیرها و قالب‌های HTML ایجاد کنید | قالب‌های HTML و مسیرها | Yohan |
| 22 | Banking App | ساخت فرم ورود و ثبت‌نام | درباره ساخت فرم‌ها و مدیریت روال‌های اعتبارسنجی یاد بگیرید | فرم‌ها | Yohan |
| 23 | Banking App | روش‌های دریافت و استفاده از داده‌ها | جریان داده‌ها در داخل و خارج از برنامه شما، نحوه دریافت، ذخیره و حذف آن‌ها را یاد بگیرید | داده‌ها | Yohan |
| 24 | Banking App | مفاهیم مدیریت وضعیت | یاد بگیرید برنامه شما چگونه وضعیت را حفظ می‌کند و چگونه آن را به‌صورت برنامه‌نویسی مدیریت کنید | مدیریت وضعیت | Yohan |
🏫 اصول آموزشی
برنامه درسی ما با دو اصل کلیدی آموزشی طراحی شده است:
- یادگیری مبتنی بر پروژه
- آزمون‌های مکرر
این برنامه اصول اولیه جاوااسکریپت، HTML و CSS را آموزش می‌دهد، همچنین جدیدترین ابزارها و تکنیک‌هایی که توسط توسعه‌دهندگان وب امروزی استفاده می‌شود. دانش‌آموزان فرصت خواهند داشت تجربه عملی کسب کنند با ساخت یک بازی تایپ، تراریوم مجازی، افزونه مرورگر سازگار با محیط زیست، بازی سبک مهاجم فضایی، و یک اپلیکیشن بانکی برای کسب‌وکارها. تا پایان این دوره، دانش‌آموزان درک جامعی از توسعه وب به دست خواهند آورد.
🎓 شما می‌توانید چند درس اول این برنامه درسی را به‌عنوان یک مسیر یادگیری در Microsoft Learn بگذرانید!
با اطمینان از اینکه محتوا با پروژه‌ها هماهنگ است، فرآیند برای دانش‌آموزان جذاب‌تر می‌شود و حفظ مفاهیم تقویت خواهد شد. همچنین چند درس مقدماتی در اصول جاوااسکریپت همراه با یک ویدیو از مجموعه "سری مبتدیان: جاوااسکریپت" نوشته‌ایم که برخی از نویسندگان آن در تهیه این برنامه درسی مشارکت داشته‌اند.
علاوه بر این، یک آزمون کم‌فشار قبل از کلاس، توجه دانش‌آموز را به یادگیری یک موضوع جلب می‌کند، در حالی که یک آزمون دوم بعد از کلاس، حفظ بیشتر را تضمین می‌کند. این برنامه درسی به‌گونه‌ای طراحی شده است که انعطاف‌پذیر و سرگرم‌کننده باشد و می‌توان آن را به‌طور کامل یا جزئی گذراند. پروژه‌ها کوچک شروع می‌شوند و تا پایان چرخه ۱۲ هفته‌ای به‌طور فزاینده‌ای پیچیده می‌شوند.
در حالی که ما عمداً از معرفی فریم‌ورک‌های جاوااسکریپت اجتناب کرده‌ایم تا بر مهارت‌های پایه‌ای مورد نیاز به‌عنوان یک توسعه‌دهنده وب قبل از پذیرش یک فریم‌ورک تمرکز کنیم، یک گام خوب بعد از تکمیل این برنامه درسی یادگیری درباره Node.js از طریق مجموعه دیگری از ویدیوها خواهد بود: "سری مبتدیان: Node.js".
به قوانین رفتاری و دستورالعمل‌های مشارکت ما مراجعه کنید. ما از بازخورد سازنده شما استقبال می‌کنیم!
🧭 دسترسی آفلاین
شما می‌توانید این مستندات را به‌صورت آفلاین با استفاده از Docsify اجرا کنید. این مخزن را Fork کنید، Docsify را نصب کنید روی دستگاه محلی خود، و سپس در پوشه اصلی این مخزن، دستور docsify serve را تایپ کنید. وب‌سایت روی پورت 3000 در localhost شما اجرا خواهد شد: localhost:3000.
یک فایل PDF از تمام درس‌ها را می‌توانید اینجا پیدا کنید.
🎒 دوره‌های دیگر
تیم ما دوره‌های دیگری تولید می‌کند! بررسی کنید:
- هوش مصنوعی مولد برای مبتدیان
- هوش مصنوعی مولد برای مبتدیان .NET
- هوش مصنوعی مولد با جاوااسکریپت
- هوش مصنوعی مولد با جاوا
- هوش مصنوعی برای مبتدیان
- علم داده برای مبتدیان
- یادگیری ماشین برای مبتدیان
- امنیت سایبری برای مبتدیان
- توسعه وب برای مبتدیان
- اینترنت اشیا برای مبتدیان
- توسعه XR برای مبتدیان
- تسلط بر GitHub Copilot برای استفاده عاملانه
- تسلط بر GitHub Copilot برای توسعه‌دهندگان C#/.NET
- ماجراجویی خود را با Copilot انتخاب کنید
مجوز
این مخزن تحت مجوز MIT منتشر شده است. برای اطلاعات بیشتر به فایل LICENSE مراجعه کنید.
سلب مسئولیت:
این سند با استفاده از سرویس ترجمه هوش مصنوعی Co-op Translator ترجمه شده است. در حالی که ما تلاش می‌کنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است شامل خطاها یا نادرستی‌ها باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، توصیه می‌شود از ترجمه حرفه‌ای انسانی استفاده کنید. ما مسئولیتی در قبال سوء تفاهم‌ها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.