[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) [![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) [![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) [![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) [![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) [![](https://dcbadge.vercel.app/api/server/ByRwuEEgH4)](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott) [![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) [![Microsoft Azure AI Foundry Discord](https://dcbadge.limes.pink/api/server/ByRwuEEgH4)](https://discord.com/invite/ByRwuEEgH4) اتبع الخطوات التالية للبدء باستخدام هذه الموارد: 1. **قم بعمل Fork للمستودع**: انقر على [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) 2. **انسخ المستودع**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 3. [**انضم إلى Discord الخاص بـ Azure AI Foundry وتواصل مع الخبراء والمطورين الآخرين**](https://discord.com/invite/ByRwuEEgH4) # تطوير الويب للمبتدئين - منهج دراسي تعلم أساسيات تطوير الويب من خلال دورة شاملة لمدة 12 أسبوعًا مقدمة من Microsoft Cloud Advocates. تحتوي كل واحدة من الدروس الـ 24 على مشاريع عملية مثل بناء حدائق افتراضية، وإضافات للمتصفح، وألعاب فضائية باستخدام JavaScript وCSS وHTML. استمتع بالاختبارات، والنقاشات، والواجبات العملية. عزز مهاراتك واحتفظ بالمعرفة من خلال منهجنا القائم على المشاريع. ابدأ رحلتك البرمجية اليوم! #### 🧑‍🎓 _هل أنت طالب؟_ قم بزيارة [**صفحة مركز الطلاب**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) حيث ستجد موارد للمبتدئين، وحزم للطلاب، وحتى طرق للحصول على قسيمة شهادة مجانية. هذه الصفحة تستحق الإشارة المرجعية والعودة إليها من وقت لآخر حيث يتم تحديث المحتوى شهريًا. ### 📣 إعلان - _منهج جديد_ حول الذكاء الاصطناعي التوليدي لـ JavaScript تم إطلاقه للتو لا تفوت منهجنا الجديد حول الذكاء الاصطناعي التوليدي! قم بزيارة [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) للبدء!
- دروس تغطي كل شيء من الأساسيات إلى RAG. - تفاعل مع شخصيات تاريخية باستخدام GenAI وتطبيقنا المرافق. - سرد ممتع وجذاب، ستسافر عبر الزمن!
تتضمن كل درس مهمة لإكمالها، واختبار معرفة، وتحديًا لتعلم موضوعات مثل: - التوجيه وهندسة التوجيه - إنشاء تطبيقات نصوص وصور - تطبيقات البحث قم بزيارة [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) للبدء! ## 🌱 البدء > **المعلمين**، لقد قمنا [بتضمين بعض الاقتراحات](for-teachers.md) حول كيفية استخدام هذا المنهج. نود سماع ملاحظاتكم [في منتدى النقاش الخاص بنا](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! **[المتعلمين](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**، لكل درس، ابدأ باختبار تمهيدي قبل المحاضرة، ثم تابع قراءة المادة التعليمية، وأكمل الأنشطة المختلفة، وتحقق من فهمك من خلال اختبار ما بعد المحاضرة. لتحسين تجربتك التعليمية، تواصل مع زملائك للعمل على المشاريع معًا! يتم تشجيع النقاشات في [منتدى النقاش الخاص بنا](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) حيث سيكون فريقنا من المشرفين متاحًا للإجابة على أسئلتك. لتوسيع تعليمك، نوصي بشدة باستكشاف [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) للحصول على مواد دراسية إضافية. ### 📋 إعداد بيئتك هذا المنهج يحتوي على بيئة تطوير جاهزة للاستخدام! عند البدء، يمكنك اختيار تشغيل المنهج في [Codespace](https://github.com/features/codespaces/) (_بيئة مستندة إلى المتصفح، لا حاجة للتثبيت_)، أو محليًا على جهاز الكمبيوتر الخاص بك باستخدام محرر نصوص مثل [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). #### إنشاء مستودعك الخاص لحفظ عملك بسهولة، يُوصى بإنشاء نسخة خاصة بك من هذا المستودع. يمكنك القيام بذلك بالنقر على زر **Use this template** في أعلى الصفحة. سيؤدي ذلك إلى إنشاء مستودع جديد في حساب GitHub الخاص بك يحتوي على نسخة من المنهج. اتبع هذه الخطوات: 1. **قم بعمل Fork للمستودع**: انقر على زر "Fork" في الزاوية العلوية اليمنى من هذه الصفحة. 2. **انسخ المستودع**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` #### تشغيل المنهج في Codespace في نسختك من هذا المستودع التي أنشأتها، انقر على زر **Code** وحدد **Open with Codespaces**. سيؤدي ذلك إلى إنشاء Codespace جديد للعمل فيه. Create codespace #### تشغيل المنهج محليًا على جهاز الكمبيوتر الخاص بك لتشغيل هذا المنهج محليًا على جهاز الكمبيوتر الخاص بك، ستحتاج إلى محرر نصوص، ومتصفح، وأداة سطر أوامر. سيرشدك درسنا الأول، [مقدمة إلى لغات البرمجة والأدوات](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages)، إلى الخيارات المختلفة لكل من هذه الأدوات لتختار ما يناسبك. توصيتنا هي استخدام [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) كمحرر، والذي يحتوي أيضًا على [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) مدمج. يمكنك تنزيل Visual Studio Code [من هنا](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). 1. انسخ مستودعك إلى جهاز الكمبيوتر الخاص بك. يمكنك القيام بذلك بالنقر على زر **Code** ونسخ الرابط: Copy your repository URL ثم افتح [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) داخل [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) وقم بتشغيل الأمر التالي، مع استبدال `` بالرابط الذي نسخته للتو: ```bash git clone ``` 2. افتح المجلد في Visual Studio Code. يمكنك القيام بذلك بالنقر على **File** > **Open Folder** وتحديد المجلد الذي قمت بنسخه للتو. > الإضافات الموصى بها لـ Visual Studio Code: > > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - لمعاينة صفحات HTML داخل Visual Studio Code > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - لمساعدتك في كتابة الكود بشكل أسرع ## 📂 كل درس يتضمن: - رسم تخطيطي اختياري - فيديو تكميلي اختياري - اختبار تمهيدي قبل الدرس - درس مكتوب - بالنسبة للدروس القائمة على المشاريع، إرشادات خطوة بخطوة حول كيفية بناء المشروع - اختبارات المعرفة - تحدي - قراءة إضافية - واجب - [اختبار ما بعد الدرس](https://ff-quizzes.netlify.app/) > **ملاحظة حول الاختبارات**: جميع الاختبارات موجودة في مجلد Quiz-app، بإجمالي 48 اختبارًا يحتوي كل منها على ثلاثة أسئلة. وهي متاحة [هنا](https://ff-quizzes.netlify.app/) ويمكن تشغيل تطبيق الاختبارات محليًا أو نشره على Azure؛ اتبع التعليمات في مجلد `quiz-app`. ## 🗃️ الدروس | | اسم المشروع | المفاهيم التي يتم تدريسها | الأهداف التعليمية | رابط الدرس | المؤلف | | :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | | 01 | البداية | مقدمة إلى البرمجة وأدوات العمل | تعلم الأساسيات التي تقوم عليها معظم لغات البرمجة والأدوات التي تساعد المطورين المحترفين في أداء وظائفهم | [مقدمة إلى لغات البرمجة وأدوات العمل](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | | 02 | البداية | أساسيات GitHub، بما في ذلك العمل مع فريق | كيفية استخدام GitHub في مشروعك، وكيفية التعاون مع الآخرين على قاعدة الكود | [مقدمة إلى GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor | | 03 | البداية | الوصولية | تعلم أساسيات الوصولية في الويب | [أساسيات الوصولية](/1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 04 | أساسيات JS | أنواع البيانات في JavaScript | أساسيات أنواع البيانات في JavaScript | [أنواع البيانات](/2-js-basics/1-data-types/README.md) | Jasmine | | 05 | أساسيات JS | الدوال والطرق | تعلم كيفية استخدام الدوال والطرق لإدارة تدفق منطق التطبيق | [الدوال والطرق](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | | 06 | أساسيات JS | اتخاذ القرارات باستخدام JS | تعلم كيفية إنشاء شروط في الكود باستخدام طرق اتخاذ القرار | [اتخاذ القرارات](/2-js-basics/3-making-decisions/README.md) | Jasmine | | 07 | أساسيات JS | المصفوفات والحلقات | العمل مع البيانات باستخدام المصفوفات والحلقات في JavaScript | [المصفوفات والحلقات](/2-js-basics/4-arrays-loops/README.md) | Jasmine | | 08 | [الحديقة الافتراضية](/3-terrarium/solution/README.md) | HTML في الممارسة | بناء HTML لإنشاء حديقة افتراضية على الإنترنت، مع التركيز على بناء التخطيط | [مقدمة إلى HTML](/3-terrarium/1-intro-to-html/README.md) | Jen | | 09 | [الحديقة الافتراضية](/3-terrarium/solution/README.md) | CSS في الممارسة | بناء CSS لتنسيق الحديقة الافتراضية على الإنترنت، مع التركيز على أساسيات CSS بما في ذلك جعل الصفحة متجاوبة | [مقدمة إلى CSS](/3-terrarium/2-intro-to-css/README.md) | Jen | | 10 | [Terrarium](/3-terrarium/solution/README.md) | إغلاق JavaScript، التلاعب بـ DOM | قم ببناء JavaScript لجعل التيراريوم يعمل كواجهة سحب وإفلات، مع التركيز على الإغلاق والتلاعب بـ DOM | [إغلاق JavaScript، التلاعب بـ DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | | 11 | [Typing Game](/4-typing-game/solution/README.md) | بناء لعبة كتابة | تعلم كيفية استخدام أحداث لوحة المفاتيح لتوجيه منطق تطبيق JavaScript الخاص بك | [البرمجة القائمة على الأحداث](/4-typing-game/typing-game/README.md) | Christopher | | 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | العمل مع المتصفحات | تعرف على كيفية عمل المتصفحات، تاريخها، وكيفية إنشاء العناصر الأولى لإضافة متصفح | [حول المتصفحات](/5-browser-extension/1-about-browsers/README.md) | Jen | | 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | بناء نموذج، استدعاء API وتخزين المتغيرات في التخزين المحلي | قم ببناء عناصر JavaScript لإضافة المتصفح لاستدعاء API باستخدام المتغيرات المخزنة في التخزين المحلي | [APIs، النماذج، والتخزين المحلي](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | | 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | العمليات الخلفية في المتصفح، أداء الويب | استخدم العمليات الخلفية للمتصفح لإدارة أيقونة الإضافة؛ تعرف على أداء الويب وبعض التحسينات لتحسينه | [المهام الخلفية والأداء](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | | 15 | [Space Game](/6-space-game/solution/README.md) | تطوير ألعاب أكثر تقدمًا باستخدام JavaScript | تعرف على الوراثة باستخدام كل من الفئات والتكوين ونمط Pub/Sub، كتحضير لبناء لعبة | [مقدمة لتطوير الألعاب المتقدمة](/6-space-game/1-introduction/README.md) | Chris | | 16 | [Space Game](/6-space-game/solution/README.md) | الرسم على اللوحة | تعرف على واجهة Canvas API، المستخدمة لرسم العناصر على الشاشة | [الرسم على اللوحة](/6-space-game/2-drawing-to-canvas/README.md) | Chris | | 17 | [Space Game](/6-space-game/solution/README.md) | تحريك العناصر على الشاشة | اكتشف كيف يمكن للعناصر أن تتحرك باستخدام الإحداثيات الكارتيزية وواجهة Canvas API | [تحريك العناصر](/6-space-game/3-moving-elements-around/README.md) | Chris | | 18 | [Space Game](/6-space-game/solution/README.md) | اكتشاف التصادم | اجعل العناصر تتصادم وتتفاعل مع بعضها البعض باستخدام ضغطات المفاتيح وقدم وظيفة تبريد لضمان أداء اللعبة | [اكتشاف التصادم](/6-space-game/4-collision-detection/README.md) | Chris | | 19 | [Space Game](/6-space-game/solution/README.md) | تسجيل النقاط | قم بإجراء حسابات رياضية بناءً على حالة اللعبة وأدائها | [تسجيل النقاط](/6-space-game/5-keeping-score/README.md) | Chris | | 20 | [Space Game](/6-space-game/solution/README.md) | إنهاء اللعبة وإعادة تشغيلها | تعرف على كيفية إنهاء اللعبة وإعادة تشغيلها، بما في ذلك تنظيف الأصول وإعادة تعيين قيم المتغيرات | [شرط النهاية](/6-space-game/6-end-condition/README.md) | Chris | | 21 | [Banking App](/7-bank-project/solution/README.md) | قوالب HTML والمسارات في تطبيق ويب | تعرف على كيفية إنشاء هيكل موقع ويب متعدد الصفحات باستخدام التوجيه وقوالب HTML | [قوالب HTML والمسارات](/7-bank-project/1-template-route/README.md) | Yohan | | 22 | [Banking App](/7-bank-project/solution/README.md) | بناء نموذج تسجيل الدخول والتسجيل | تعرف على بناء النماذج والتعامل مع إجراءات التحقق | [النماذج](/7-bank-project/2-forms/README.md) | Yohan | | 23 | [Banking App](/7-bank-project/solution/README.md) | طرق جلب البيانات واستخدامها | كيفية تدفق البيانات داخل وخارج التطبيق الخاص بك، وكيفية جلبها، تخزينها، والتخلص منها | [البيانات](/7-bank-project/3-data/README.md) | Yohan | | 24 | [Banking App](/7-bank-project/solution/README.md) | مفاهيم إدارة الحالة | تعرف على كيفية احتفاظ تطبيقك بالحالة وكيفية إدارتها برمجيًا | [إدارة الحالة](/7-bank-project/4-state-management/README.md) | Yohan | ## 🏫 التعليم تم تصميم منهجنا بمبدأين رئيسيين في التعليم: * التعلم القائم على المشاريع * الاختبارات المتكررة يعلم البرنامج أساسيات JavaScript وHTML وCSS، بالإضافة إلى أحدث الأدوات والتقنيات التي يستخدمها مطورو الويب اليوم. سيحصل الطلاب على فرصة لتطوير خبرة عملية من خلال بناء لعبة كتابة، تيراريوم افتراضي، إضافة متصفح صديقة للبيئة، لعبة بأسلوب Space Invader، وتطبيق مصرفي للشركات. بحلول نهاية السلسلة، سيكون لدى الطلاب فهم قوي لتطوير الويب. > 🎓 يمكنك أخذ الدروس الأولى في هذا المنهج كـ [مسار تعلم](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) على Microsoft Learn! من خلال ضمان توافق المحتوى مع المشاريع، تصبح العملية أكثر جاذبية للطلاب ويتم تعزيز الاحتفاظ بالمفاهيم. كما كتبنا عدة دروس تمهيدية في أساسيات JavaScript لتقديم المفاهيم، مقترنة بفيديو من مجموعة "[سلسلة المبتدئين: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" من دروس الفيديو، التي ساهم بعض مؤلفيها في هذا المنهج. بالإضافة إلى ذلك، يحدد اختبار منخفض المخاطر قبل الفصل نية الطالب نحو تعلم موضوع معين، بينما يضمن اختبار ثانٍ بعد الفصل مزيدًا من الاحتفاظ. تم تصميم هذا المنهج ليكون مرنًا وممتعًا ويمكن أخذه بالكامل أو جزئيًا. تبدأ المشاريع صغيرة وتصبح أكثر تعقيدًا بحلول نهاية الدورة التي تستمر 12 أسبوعًا. بينما تجنبنا عمدًا تقديم أطر عمل JavaScript للتركيز على المهارات الأساسية المطلوبة كمطور ويب قبل تبني إطار عمل، فإن الخطوة التالية الجيدة لإكمال هذا المنهج ستكون تعلم Node.js عبر مجموعة أخرى من الفيديوهات: "[سلسلة المبتدئين: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". > قم بزيارة [مدونة قواعد السلوك](CODE_OF_CONDUCT.md) و[إرشادات المساهمة](CONTRIBUTING.md). نرحب بملاحظاتك البناءة! ## 🧭 الوصول دون اتصال يمكنك تشغيل هذا التوثيق دون اتصال باستخدام [Docsify](https://docsify.js.org/#/). قم بعمل Fork لهذا المستودع، [قم بتثبيت Docsify](https://docsify.js.org/#/quickstart) على جهازك المحلي، ثم في المجلد الجذري لهذا المستودع، اكتب `docsify serve`. سيتم تقديم الموقع على المنفذ 3000 على localhost الخاص بك: `localhost:3000`. ## 📘 PDF يمكن العثور على ملف PDF لجميع الدروس [هنا](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). ## 🎒 دورات أخرى فريقنا ينتج دورات أخرى! تحقق من: - [الذكاء الاصطناعي التوليدي للمبتدئين](https://aka.ms/genai-beginners) - [الذكاء الاصطناعي التوليدي للمبتدئين .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet) - [الذكاء الاصطناعي التوليدي باستخدام JavaScript](https://github.com/microsoft/generative-ai-with-javascript) - [الذكاء الاصطناعي التوليدي باستخدام Java](https://github.com/microsoft/Generative-AI-for-beginners-java) - [الذكاء الاصطناعي للمبتدئين](https://aka.ms/ai-beginners) - [علم البيانات للمبتدئين](https://aka.ms/datascience-beginners) - [تعلم الآلة للمبتدئين](https://aka.ms/ml-beginners) - [الأمن السيبراني للمبتدئين](https://github.com/microsoft/Security-101) - [تطوير الويب للمبتدئين](https://aka.ms/webdev-beginners) - [إنترنت الأشياء للمبتدئين](https://aka.ms/iot-beginners) - [تطوير XR للمبتدئين](https://github.com/microsoft/xr-development-for-beginners) - [إتقان GitHub Copilot للاستخدام التعاوني](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming) - [إتقان GitHub Copilot لمطوري C#/.NET](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers) - [اختر مغامرتك مع Copilot](https://github.com/microsoft/CopilotAdventures) ## الترخيص هذا المستودع مرخص بموجب ترخيص MIT. راجع ملف [LICENSE](../../LICENSE) لمزيد من المعلومات. --- **إخلاء المسؤولية**: تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.