36 KiB
توسعه وب برای مبتدیان - یک برنامه آموزشی
اصول توسعه وب را با دوره جامع ۱۲ هفتهای ما که توسط Microsoft Cloud Advocates ارائه شده است، بیاموزید. هر یک از ۲۴ درس به صورت عملی به جاوااسکریپت، 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 ترجمه شده است. در حالی که ما تلاش میکنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمههای خودکار ممکن است شامل خطاها یا نادرستیها باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، توصیه میشود از ترجمه حرفهای انسانی استفاده کنید. ما هیچ مسئولیتی در قبال سوء تفاهمها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.


