الرئيسيةمن نحنالدورات التدريبيةالأسئلة الشائعة
Englishmohd@sbeeh.com+962 77 984 65 64
SBEEH Software Academy

تدريب تقني بإشراف مدربين معتمدين من مايكروسوفت (MCT) — في عمّان، الأردن، وفي جميع أنحاء دول الخليج.

استكشف

  • من نحن
  • الدورات التدريبية التقنية
  • التحقق من شهادة
  • الأسئلة الشائعة

تواصل معنا

  • +962-779846564
  • mohd@sbeeh.com
  • عمّان، الأردن

صبيح للبرمجيات تقدّم خدمات تطوير البرمجيات وتنفيذ التقنيات المتقدمة وأتمتة العمليات وخدمات الاستشارات التقنية والتدريب التقني الاحترافي بإشراف مدربين معتمدين من مايكروسوفت (MCT) للمؤسسات في الأردن والسعودية والإمارات وقطر والكويت والبحرين وعُمان.

© صبيح للبرمجيات. جميع الحقوق محفوظة. 2026.

العودة إلى الدورات التدريبية
تطوير الويب الحديث باستخدام HTML5 وCSS3 وJavaScript
تطوير الواجهة الأماميةمبتدئحضوري / عن بُعد

تطوير الويب الحديث باستخدام HTML5 وCSS3 وJavaScript

تطوير الويب الحديث باستخدام HTML5 وCSS3 وJavaScript هي دورة في مبتدئ تطوير الواجهة الأمامية تُقدَّم حضوريًا وعبر الإنترنت من قبل أكاديمية صبيح للبرمجيات في عمّان، الأردن.

5 أيام (40 ساعة)

آخر تحديث ١٦ آب ٢٠٢٦

تُعلّم هذه الدورة المبتدئة التي تستمر 5 أيام التقنيات التأسيسية الثلاث للويب — HTML5 وCSS3 وJavaScript — بدءاً من المبادئ الأولى، وصولاً إلى موقع ويب كامل ومتجاوب وتفاعلي بنهاية الأسبوع. وبدلاً من تعليمها كثلاثة مواضيع منفصلة، تُظهر الدورة كيف تتكامل البنية (HTML) والعرض (CSS) والسلوك (JavaScript) معاً في كل موقع ويب حقيقي.

يكتب المشاركون صياغة HTML5 دلالية، ويصمّمون وينسّقون الصفحات باستخدام CSS الحديث (Flexbox وGrid) بتصميم متجاوب للجوال وسطح المكتب، ويضيفون التفاعلية باستخدام JavaScript الخام — معالجة DOM، والتعامل مع الأحداث، وجلب البيانات من واجهة API — دون الاعتماد على إطار عمل، حتى تُفهم المفاهيم الأساسية بالكامل قبل تقديم الأطر.

تُعد هذه الدورة نقطة البداية المعتمدة لأي شخص بلا خلفية سابقة في تطوير الويب: المتحولون مهنياً، محترفو تقنية المعلومات المتوسعون نحو التطوير، محترفو التسويق أو التصميم الراغبون في فهم وتعديل المواقع مباشرة، والمطورون المبتدئون الذين يحتاجون أساساً متيناً في HTML/CSS/JS قبل الانتقال إلى إطار عمل مثل React (المُغطّى في دورة تطوير تطبيقات الويب الأمامية باستخدام React المنفصلة).

اليوم 1: بنية HTML5 والدلالة

المواضيع الرئيسية:

  • بنية مستند HTML
  • العناصر الدلالية (header، nav، main، article، section)
  • النماذج وأنواع المدخلات
  • أساسيات إمكانية الوصول

مواضيع فرعية تفصيلية:

  • لماذا تهم الصياغة الدلالية لتحسين محركات البحث وإمكانية الوصول
  • بناء نماذج قابلة للوصول بتسميات وسمات ARIA
  • الجداول للبيانات الجدولية (وليس للتخطيط)
  • التحقق من صحة صياغة HTML

تمرين عملي: بناء البنية الدلالية لـHTML لموقع بورتفوليو شخصي متعدد الأقسام، بما في ذلك نموذج تواصل بمدخلات مُسمّاة بشكل صحيح.

سيناريو من واقع العمل: يحتاج محترف مستقل إلى موقع شخصي بسيط بقسم "نبذة عني" ومعرض بورتفوليو ونموذج تواصل.

نتيجة التعلم: يصبح المشاركون قادرين على كتابة صياغة HTML5 نظيفة ودلالية وقابلة للوصول لصفحة حقيقية متعددة الأقسام.

اليوم 2: أساسيات تنسيق CSS3 والتخطيط

المواضيع الرئيسية:

  • نموذج الصندوق (box model) ومُحدِّدات CSS
  • الطباعة والألوان
  • Flexbox للتخطيط أحادي البُعد
  • CSS Grid للتخطيط ثنائي البُعد

مواضيع فرعية تفصيلية:

  • الخصوصية (specificity) والتتالي (cascade)
  • بناء شريط تنقل باستخدام Flexbox
  • بناء تخطيط معرض/بطاقات باستخدام Grid
  • استخدام خصائص CSS المخصصة (المتغيرات)

تمرين عملي: تنسيق موقع البورتفوليو من اليوم الأول: شريط تنقل بـFlexbox، معرض بورتفوليو قائم على Grid، وطباعة متسقة باستخدام متغيرات CSS.

سيناريو من واقع العمل: يحتاج موقع البورتفوليو بصياغة HTML الخام إلى مظهر احترافي ومنظّم بصرياً قبل عرضه على عملاء محتملين.

نتيجة التعلم: يصبح المشاركون قادرين على تخطيط صفحة حقيقية باستخدام CSS الحديث (Flexbox وGrid) دون الاعتماد على إطار عمل.

اليوم 3: التصميم المتجاوب

المواضيع الرئيسية:

  • مبادئ التصميم أولاً للجوال (mobile-first)
  • استعلامات الوسائط ونقاط التوقف (breakpoints)
  • الصور المتجاوبة
  • الاختبار عبر أحجام الأجهزة

مواضيع فرعية تفصيلية:

  • الوحدات المرنة (%، rem، vw/vh) مقابل الوحدات الثابتة
  • تصميم نمط تنقل يتكيف مع الجوال (مثل قائمة الهامبرغر)
  • srcset وتحميل الصور المتجاوب
  • استخدام أدوات مطوّري المتصفح لاختبار الاستجابة

تمرين عملي: جعل موقع البورتفوليو متجاوباً بالكامل عبر نقاط توقف الجوال واللوحي وسطح المكتب، بما في ذلك نمط تنقل للجوال.

سيناريو من واقع العمل: تُظهر التحليلات أن أكثر من نصف زوّار الموقع على أجهزة جوالة، لكن التخطيط الحالي يتعطّل تحت عرض 768 بكسل.

نتيجة التعلم: يصبح المشاركون قادرين على تصميم وتنفيذ تخطيط متجاوب يعمل بشكل صحيح عبر أحجام الأجهزة الشائعة.

اليوم 4: أساسيات JavaScript وDOM

المواضيع الرئيسية:

  • صياغة JavaScript والمتغيرات والدوال
  • نموذج كائن المستند (DOM)
  • معالجة الأحداث
  • تعديل محتوى الصفحة ديناميكياً

مواضيع فرعية تفصيلية:

  • let/const مقابل var والنطاق
  • اختيار وتعديل عناصر DOM
  • مستمعو الأحداث وتفويض الأحداث
  • التحقق من صحة النماذج باستخدام JavaScript

تمرين عملي: إضافة تفاعلية JavaScript إلى موقع البورتفوليو: مبدّل قائمة جوال، تحقق من صحة نموذج التواصل من جانب العميل، ومعرض بورتفوليو قابل للتصفية ديناميكياً.

سيناريو من واقع العمل: يسمح نموذج التواصل حالياً بالتقديم ببريد إلكتروني فارغ أو غير صحيح، ويحتاج معرض البورتفوليو إلى فلتر تصنيف يعمل.

نتيجة التعلم: يصبح المشاركون قادرين على استخدام JavaScript الخام لمعالجة DOM والاستجابة لتفاعل المستخدم بشكل صحيح.

اليوم 5: العمل مع واجهات API وإكمال المشروع

المواضيع الرئيسية:

  • Fetch API وJavaScript غير المتزامن (promises/async-await)
  • استهلاك واجهة REST API عامة
  • معالجة الأخطاء لطلبات الشبكة
  • المشروع الختامي: إنهاء ونشر الموقع

مواضيع فرعية تفصيلية:

  • فهم الشيفرة غير المتزامنة وحلقة الأحداث على مستوى المبتدئين
  • عرض بيانات JSON المجلوبة في DOM
  • معالجة حالات التحميل والخطأ
  • النشر الأساسي إلى خدمة استضافة ثابتة

تمرين عملي: إضافة قسم ديناميكي إلى موقع البورتفوليو يجلب ويعرض بيانات حية من واجهة API عامة (مثل الطقس أو مستودعات GitHub)، مع حالات تحميل وخطأ سليمة، ثم نشر الموقع النهائي.

سيناريو من واقع العمل: سيستفيد البورتفوليو من قسم حي "أقرأ حالياً" أو "أحدث مشاريعي" مسحوب تلقائياً من خدمة خارجية بدلاً من التحديث اليدوي.

نتيجة التعلم: يغادر المشاركون بموقع ويب كامل ومتجاوب وتفاعلي — مبنيّ ومنشور بالكامل باستخدام HTML5 وCSS3 وJavaScript الخام — والأساس اللازم للانتقال إلى إطار عمل مثل React.

الأسئلة الشائعة

ملاحظات إضافية


لمن هذه الدورة؟

هذه الدورة نقطة البداية المعتمدة لأي شخص بلا خلفية سابقة في تطوير الويب يريد بناء مواقع ويب حقيقية من الصفر.

  • المبتدئون تماماً والمتحولون مهنياً الداخلون إلى تطوير الويب
  • محترفو تقنية المعلومات أو المصممون أو المسوّقون الراغبون في فهم وتعديل المواقع مباشرة
  • الطلاب المستعدون لدراسة أعمق لأطر الواجهة الأمامية
  • المطورون المبتدئون المحتاجون أساساً متيناً في HTML/CSS/JS قبل تعلّم React أو Angular

المتطلبات المسبقة

لا حاجة لخبرة سابقة في تطوير الويب أو البرمجة.

  • لا حاجة لخبرة سابقة في HTML أو CSS أو JavaScript
  • إلمام أساسي بالحاسوب (إدارة الملفات، استخدام متصفح ويب)
  • لا حاجة لخبرة برمجية سابقة — تُدرَّس منطق البرمجة من المبادئ الأولى في اليوم الرابع
  • حاسوب محمول بمتصفح حديث ومحرر شيفرة (سيتم توفير/توجيه VS Code) للتمارين

ما الشهادة التي أحصل عليها بعد هذه الدورة؟

عند إتمام التدريب بنجاح، سيحصل المشاركون على شهادة إتمام رسمية.


شهادة إتمام
معرض الصور

لحظات من هذا التدريب

نظرة على دورتنا التدريبية — جلسات تدريب عملية مع محترفين من الأردن ودول الخليج.

مهتم بهذا التدريب؟

تواصل معنا وسنساعدك في تخطيط التدريب المناسب لفريقك.

العودة إلى جميع الدورات