--- title: دروس slug: Web/Tutorials tags: - CSS - HTML - MDN - أساسيات الويب - تدريب - تصميم الويب - تعليمات برمجية - جافاسكربت JavaScript - دليل - مبتدئين translation_of: Web/Tutorials ---

تقودك الروابط في هذه الصفحة إلى دروس ومواد تدريبيّة متنوعة. سواءً كنت في بداياتك، أو تتعلم الأساسيات، أو كنت مطوراً مُخضرماً، فستجد في هذه الصفحة مصادر مفيدة لأفضل الممارسات البرمجيّة. هذه المصادر مُنشئَة من قبل شركات رائدة ومطورين ويب مِمَن تبنوا معايير المصادر المفتوحة والممارسات التطويريّة الفُضلى، كما توفِر أو تسمح بإنشاء ترجمات من خلال رخص مفتوحة مثل المشاع الإبداعي (Creative Commons).

للجدد على الويب

البدء مع الويب

البدء مع الويب هي سلسلة موجزة تُعرِّفُك على عملية تطوير الويب. سوف نبدأ معك من إعداد الأدوات التي ستحتاجها لبناء صفحة ويب بسيطة وصولاً لعمليّة نشرها.

دروس عن لغة ترميز النص الفائق (HTML)

مستوى مُبتدئ

مقدمة إلى لغة ترميز النص الفائق (HTML)
تُعَد هذه الوحدة تمهيداً للطريق حيث تُهيِئُك لتعلم الصيغة الكتابيّة والمفاهيم الأساسيّة في اللغة، مغطيةً مواضيع مثل التعامل مع النصوص، إنشاء روابط تشعيبيّة (hyperlinks)، وكيفيّة استخدام اللغة لهيكلة صفحة ويب.
مرجع MDN لعناصر لغة ترميز النص الفائق HTML
مرجع شامل لعناصر لغة ترميز النص الفائق، ودعم المتصفحات المختلفة لكلٍ منها.
إنشاء صفحة بسيطة باستخدام لغة ترميز النص الفائق HTML (موقع The Blog Starter)
دليل لغة ترميز النص الفائق للمبتدئين يتضمن شروحات للوسوم الشائعة، ولوسوم الإصدار الخامس من اللغة. يتضمن هذا المرجع أيضاً دليل تدريجي لبناء صفحة ويب بسيطة.
تحديات في لغة ترميز النص الفائق HTML (موقع Wikiversity)
استخدم هذه التحديات لتشحذ مهاراتك (على سبيل المثال، "هل يجب أن استخدم العنصر <h2> أم العنصر <strong>؟")، ولتُركِز على مهارة التنسيق الدقيق (استخدام العنصر الصحيح في الوقت الصحيح وبالشكل الصحيح).

مستوى متوسط

الوسائط المتعددة (Multimedia) و التضمين (Embedding)
نستكشف في هذه الوحدة كيفيّة استخدام لغة ترميز النص الفائق لتضمين الوسائط المتعددة (multimedia) المختلفة في مواقع الويب، كما ونغطي الطرق المُختلفة التي يمكن استخدامها لتضمين الصور، وإضافة ملفات الفيديو والصوت، أو حتى تضمين موقع آخر بأكمله.
الجداول في لغة ترميز النص الفائق HTML
يُشكِل تقديم البيانات المجدولة في الموقع بشكل مفهوم، ومُتاح (accessible) تحدياً. تغطي هذه الوحدة مبادئ هيكلة الجداول، كما تغطي مزايا أكثر تعقيداً مثل التعليقات (captions) والخلاصات (summaries) الجدوليّة.

مستوى متقدم

الاستمارات (Forms) في لغة ترميز النص الفائق HTML
الاستمارات (Forms) هي جزء مهم جداً من الويب، فهي توفر آليّة للتفاعل مع المواقع (على سبيل المثال، التسجيل وتسجيل الدخول، وإرسال التعليقات، وشراء المنتجات، وغيرها من الأمور). تُهيئك هذه الوحدة على إنشاء أجزاء الاستمارات المتعلقة بجهة العميل (client-side).
نصائح لكتابة صفحات HTML سريعة التحميل
تعطي المقالة نصائح لكتابة صفحات ويب توفِر استجابة أكبر للزوار وتُقلل من الحمل على خادم والويب وإتصال الإنترنت.

دروس عن تقنيّة صفحات الأنماط الانسيابية (CSS)

مستوى مبتدئ

أساسيات صفحات الأنماط الانسيابية CSS
تُستخدم هذه التقنيّة (CSS) لتصميم مظهر صفحتك. تبدأ معك هذه المقالة من ما ستحتاجه لتبدأ العمل. سنجيب عن أسئلة مثل: كيف يمكنني جعل لون نصي أسود أو أحمر؟ كيف يمكنني جعل محتواي يظهر في المكان الفلاني على الشاشة؟ كيف أُزخرِف صفحتي بصورة أو بلون في الخلفيّة؟
مقدمة في صفحات الأنماط الانسيابية CSS
تبدأ هذه الوحدة معك بأساسيات عمل هذه التقنيّة، متضمنةً معلومات عن المحددات (selectors) والخواص (properties)، وكتابة التعليمات، وتطبيق التنسيقات المجراة على صفحة لغة ترميز النص الفائق، وكيفيّة تحديد الطول واللون وأمور أخرى، والتتالي (cascade)، والوراثة (inheritance)، وأساسيات نموذج الصندوق (box model)، والتنقيح (debugging).
صناديق التصميم
سنأخذ في هذه الوحدة نظرة على صناديق التصميم (styling boxes)، والتي تعد واحدة من الخطوات الأساسيّة نحو تنظيم صفحة الويب. في هذه المقالة سنلخص نموذج الصندوق (box model)، وبعدها سنأخذ نظرة حول التحكم بنماذج الصندوق عن طريق إعداد الحشو (margin)، والحواف (border)، والهوامش (padding)، وإعداد لون خلفية مخصصة، والصور وغيرها من الميزات. كما تشرح المقالة ميزات زخرفيّة، مثل استخدام الظلال (shadows) والمرشحات (filters) على الصناديق.
تنسيق النصوص
تحتوي هذه المقالة على شرح لأساسيات تنسيق النصوص. تتضمن المقالة أيضاً معلومات عن كيفيّة إعداد الخطوط الغامقة والمائلة، والمسافات بين الحروف والسطور، والظلال، وغيرها من خواص النصوص. ننهي المقالة بشرح كيفيّة إضافة خطوط مخصصة لصفحتك، وتنسيق القوائم والروابط.
الأسئلة الشائعة حول تقنيّة CSS
الأسئلة الشائعة المطروحة من المبتدئين حول اللغة وأجوبتها.

مستوى متوسط

نظام الترتيب للـ CSS
في هذه المرحلة سنكون قد أخذنا نظرة حول أساسيات صفحات الأنماط الانسيابية، بدءً من كيفيّة تنسيق النصوص، إلى تنسيق والتلاعب بالصناديق التي يوجد بها محتواك. الآن حان الوقت لأخذ نظرة حول كيفيّة وضع صناديقك في المكان المناسب. قد غطينا في هذه المقالة المتطلبات الضروريّة اللازمة حتّى تتمكن من الغوص في عالم النمذجة (layout)، وتتمكن من تعلم إعدادات العرض المختلفة، وطرق النمذجة التقليديّة والتي تنطوي على التعويم (float)، والتعيين (positioning)، وأدوات التخطيط الجديدة مثل الصندوق المرن (flexbox).
مرجع صفحات الأنماط الانسيابية CSS
مرجع شامل للتقنيّة، مع تفاصيل دعم خواصها من مُتصفح فايرفوكس وغيره من المتصفحات.
شبكات التخطيط السلسة (Fluid Grids) (موقع A List Apart)
تصميم نماذج تتحجم بسلاسة مع نافذة المتصفح باستخدام الشبكة الطباعيّة (typographic grid).
تحديات في صفحات الأنماط الانسيابية CSS (موقع Wikiversity)
اشحذ مهاراتك، واكتشف نقاط الضعف لديك لتتمرن أكثر مع هذه التمرينات العمليّة.

مستوى متقدم

استخدام التحويلات الهندسيّة في صفحات الأنماط الانسيابية CSS
تطبيق التدوير (rotation)، والميلان (skewing)، والتحجيم (scaling)، والإزاحة (translation) باستخدام صفحات الأنماط الانسيابية.
تقنيّة الانتقالات (المقطع الانتقالي) في CSS
توفر تقنيّة الانتقالات (أو المقطع الانتقالي - transitions)، التي تعد جزءً من مسودة الإصدار الثالث من صفحات الأنماط الانسيابية، وسيلة لإحياء (animate) التغييرات في خصائص اللغة، بدلاً من تنفيذها فورياً.
الدليل السريع لاستخدام الخطوط (Fonts) باستخدام الخاصية font-face@ (موقع HTML5 Rocks)
تتيح لك الخاصيّة font-face@ في الإصدار الثالث من صفحات الأنماط الانسيابية استخدام الخطوط المُخصصة في مواقع الويب بطريقة سهلة الوصول إليها، سهلة الاستخدام، وقابلة للتوسع.
دورة كانفاس (Canvas)
تعلم طريقة رسم الرسومات برمجياً باستخدام عنصر الكانفاس (canvas).

دروس عن لغة الجافاسكربت JavaScript

مستوى مبتدئ

الخطوات الأولى مع الجافاسكربت
تجيب هذه المقالة عن بعض الأسئلة الأساسيّة، مثل "ما هي الجافاسكربت؟"، "كيف تبدو هذه اللغة؟"، "ماذا بإمكانها أن تفعل؟"، بالإضافة إلى مناقشة بعض الميزات الأساسيّة للغة مثل المتغيّرات، والسلاسل النصية، والأرقام، والمصفوفات.
العناصر الأساسية للغة الجافاسكربت
نكمل رحلتنا في تغطيّة المفاهيم الأساسية في لغة الجافاسكربت، ففي هذه المقالة قمنا بالتركيز على البنى الكتليّة الشائعة في اللغة مثل الجمل الشرطيّة، والحلقات، والدوال، والأحداث.
البدء مع لغة الجافاسكربت
ما هي لغة الجافاسكربت وكيف يمكن أن تساعدك؟
موقع Codecademy
موقع سهل لتعليم كيفيّة البرمجة باستخدام لغة الجافاسكربت. يوفِر لك الموقع منصة تفاعليّة، كما يمكنك استخدامه أيضاً للتعلم مع أصدقاءك.

مستوى متوسط

مقدمة إلى الكائنات في الجافاسكربت
من المهم فهم البرمجة الشيئيّة في اللغة إذا أردت زيادة معرفتك والتمكن من كتابة شيفرة برمجيّة أكثر فعاليّة، من أجل ذلك قمنا بتوفير هذه الوحدة لك.
واجهات التصميم البرمجيّة (APIs) لجهة المستخدم (Client-side)
لن تستطيع العمل جيداً عند تطوير جهة المستخدم (client-side) باستخدام الجافاسكربت من دون تعلمك للواجهات البرمجيّة المتخصصة، فهي واجهات للتلاعب بأجزاء مختلفة من المُتصفِح ونظام التشغيل الذي يعمل عليه الموقع، أو حتى التلاعب بحقول بيانات مواقع أو خدمات أخرى. في هذه الوحدة سنستكشف ماهيّة هذه الواجهات، وكيف تستخدم بعض من أكثر تلك الواجهات شيوعاً والتي ستحتاجها غالباً في عملك.
إعادة تقديم لغة الجافاسكربت
ملخص للغة الجافاسكربت يستهدف المطورين متوسطي الخبرة.
الجافاسكربت الفصيح (Eloquent JavaScript)
دليل شامل للمنهجيات (methodologies) المتقدمة والمتوسطة للغة الجافاسكربت .

مستوى متقدم

دليل لغة الجافاسكربت
دليل شامل ومُحدَث باستمرار للغة الجافاسكربت لجميع المستويات من المبتدئ إلى المحترف.
أنت لا تعرف لغة الجافاسكربت (Kyle Simpson)
سلسلة من الكِتُب تتعمق في آليات لغة الجافاسكربت الجوهريّة.
كيف تعمل المتصفحات
مقالة بحثيّة تفصيليّة تشرح المتصفحات الحديثة المختلفة ومحركاتها وآلية عرضها للصفحات ...إلخ.
فيديوهات عن لغة الجافاسكربت (جيتهاب)
مجموعة من الفيديوهات عن لغة الجافاسكربت.

تطوير إضافات المتصفح

تقنيّة WebExtensions
نظام عابر للمتصفحات (cross-browser) لتطوير الإضافات. يتوافق النظام إلى حدٍ كبير مع واجهة الإضافات البرمجيّة المدعومة بواسطة متصفخ جوجل وكروم وأوبرا، كما يتوافق مع مسودة W3C المجتمعيّة. الإضافات المكتوبة لتلك المتصفحات ستعمل على فايرفوكس ومايكروسوفت أيدج في معظم الحالات بتغييرات طفيفة. الواجهة البرمجيّة متوافقة أيضاً مع فايرفوكس متعدد العمليات (multiprocess firefox).