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

تتضمن دوراتنا ملخصًا في نهاية كل فصل، يمكنك من خلاله تحميل ملف PDF وطباعته.

أكثر من 2 مليون طالب حول العالم

موجودة في أكثر من 180 دولة

شهادة معتمدة في بلدك

الصفحة الرئيسية

...

دورة HTML و CSS و JavaScript

جميع الدورات

الهندسة والبناء والتكنولوجيا

التكنولوجيا

دورة HTML و CSS و JavaScript

لكافة المستويات

دورة HTML و CSS و JavaScript

4.5

تعلم HTML وCSS وJavaScript من الأساسيات وقم ببناء تطبيقات ويب قابلة للنشر. يأخذك هذا المقرر من إعداد بيئة التطوير الأولى الخاصة بك إلى شحن مشروع واجهة أمامية جاهز للمحفظة المهنية. يتم تطبيق كل مفهوم من خلال البرمجة العملية بحيث تكتسب مهارات يمكن لأصحاب العمل رؤيتها فعليًا.

Dedika للأعمال

ماذا ستتعلم:

ستتعلم كيفية هيكلة صفحات الويب باستخدام HTML الدلالي وتنسيقها باستخدام CSS الحديث بما في ذلك Flexbox والشبكة (Grid) وإضفاء الحيوية عليها باستخدام JavaScript. يغطي المقرر مفاهيم البرمجة الأساسية مثل الدوال والمصفوفات والكائنات وتدفق التحكم ثم ينتقل إلى معالجة DOM والبرمجة غير المتزامنة باستخدام Fetch API. ستعمل أيضًا مع Git للتحكم في الإصدارات وتستخدم DevTools في المتصفح لتنقيح الأخطاء وتتبع معايير الوصول ومعايير الويب طوال الوقت. في النهاية ستكون قد بنيت ونشرت تطبيق واجهة أمامية كامل باستخدام REST API عام.

كيف تدرس بشكل عملي دورة HTML و CSS و JavaScript

كيف تتدرب دورة HTML و CSS و JavaScript

لك أنت كشركة وتريد تدريب فريقك

في Dedika للشركات، يأتي الدورة مع تمارين وأمثلة من عملك نفسه وبالطريقة التي تحتاجها شركتك.

اضغط هنا

محتوى الدورة

8 فصول • 39 دروسالمدة بين 4 و 360 ساعة (أنت تقرر)

الفصل 1عرض التفاصيل

أساسيات تطوير الويب وإعداد بيئة العمل

الدرس 1 • إعداد بيئة التطوير الخاصة بك
تثبيت وتهيئة محرر الشيفرة وأدوات مطوري المتصفح وهيكل الملفات المحلي. تضمن حصول كل طالب على مساحة عمل متطابقة وعاملة.
الدرس 2 • التحكم في الإصدارات باستخدام أساسيات Git
تعليم سير العمل بـ init و commit و push لتتبع كل مشروع من اليوم الأول. تأسيس عادات مهنية قبل زيادة تعقيد الشيفرة.
الدرس 3 • كيف يعمل الويب
تغطية اتصال العميل بالخادم وطلبات HTTP وخطوط أنابيب عرض المتصفح. تأسيس جميع قرارات البرمجة اللاحقة على سلوك المتصفح الفعلي.
الدرس 4 • تشريح مستند HTML
تقديم عناصر DOCTYPE والرأس (head) والجسم (body) كهيكل عظمي لكل صفحة ويب. ربط هيكل الملف بما يحلله المتصفح فعليًا.

الفصل 2عرض التفاصيل

هيكل HTML الأساسي والدلالي

الدرس 1 • القوائم والروابط والتنقل
بناء قوائم مرتبة وغير مرتبة وقوائم وصفية بالإضافة إلى عناصر الربط مع الخصائص. تشكل هذه الأنماط العمود الفقري لهيكل التنقل في كل موقع.
الدرس 2 • عناصر النص والعناوين
تغطية العناوين h1–h6 والفقرات p و strong و em والاقتباس blockquote لتسلسل المحتوى. يؤثر ترتيب العناوين الصحيح مباشرة على SEO وتنقل قارئ الشاشة.
الدرس 3 • الصور والوسائط والعناصر التوضيحية
تضمين الصور والصوت والفيديو بخصائص صحيحة للوصولية والأداء. يُعتبر النص البديل والتسميات التوضيحية أمرًا مطلوبًا وليس اختياريًا.
الدرس 4 • عناصر التخطيط الدلالية
استبدال divs العامة بـ header و main و section و article و aside و footer. تحسّن الوسوم الدلالية قابلية قراءة الآلة ودرجات الوصولية.
الدرس 5 • نماذج HTML وأنواع الإدخال
إنشاء نماذج تحتوي على تسميات وحقول إدخال وقوائم اختيار ومناطق نصية باستخدام أنماط الربط الصحيحة. تُعد وسوم النموذج الصحيحة شرطًا أساسيًا لـ CSS وتنسيق النمط والتحقق من الصحة في JS.

الفصل 3عرض التفاصيل

أساسيات CSS ونموذج الصندوق (Box Model)

الدرس 1 • شرح نموذج الصندوق (Box Model)
تعليم المحتوى والحشوة (padding) والحدود (border) والهامش (margin) كالطبقات الأربع لكل عنصر. يمنع إتقان box-sizing حدوث أخطاء في التخطيط طوال المقرر.
الدرس 2 • متغيرات CSS والخصائص المخصصة
تعريف وإعادة استخدام رموز التصميم عبر خصائص CSS المخصصة لصفحات أنماط قابلة للصيانة. تقلل المتغيرات التكرار وتتيح تبديل السمات في المشاريع اللاحقة.
الدرس 3 • الطباعة والألوان
ضبط عائلات الخطوط وأحجامها وأوزانها وارتفاع الأسطر وقيم الألوان باستخدام وحدات CSS الحديثة. تشكل مقاييس الألوان والطباعة المتناسقة أساس أنظمة التصميم المرئي.
الدرس 4 • محددات CSS وقواعد الخصوصية (Specificity)
تغطية محددات العنصر والكلاس والمعرف والخاصية والفئة الزائفة مع حساب الخصوصية. يمنع فهم الخصوصية حدوث تعارضات في التتالي في صفحات الأنماط الأكبر.
الدرس 5 • خاصية display وتحديد المواقع وسير المستند
شرح قيم block و inline و inline-block و position التي تتحكم في سير المستند. هذه المفاهيم مطلوبة قبل تعلم Flexbox و Grid.

الفصل 4عرض التفاصيل

تخطيطات CSS: Flexbox و Grid

الدرس 1 • وضع العناصر في Grid والمناطق المسماة
وضع العناصر باستخدام أرقام الأسطر وكلمة span ومناطق القالب المسماة. تجعل المناطق المسماة التخطيطات المعقدة قابلة للقراءة وسهلة إعادة الهيكلة.
الدرس 2 • خصائص حاوية Flexbox
التحكم في flex-direction و justify-content و align-items و flex-wrap على العنصر الأب. تحكم هذه الخصائص في توزيع العناصر الفرعية على كلا المحورين.
الدرس 3 • التصميم المتجاوب باستخدام Media Queries
تطبيق نقاط التوقف وإستراتيجية الهاتف المحمول أولاً لتكييف التخطيطات عبر أحجام الشاشات. الجمع بين Flexbox و Grid مع Media Queries للاستجابة الجاهزة للإنتاج.
الدرس 4 • أساسيات CSS Grid
تعريف grid-template-columns و grid-template-rows و grid-gap للتخطيطات ثنائية الأبعاد. يحل Grid مشاكل التخطيط التي يعالجها Flexbox بشكل صعب.
الدرس 5 • خصائص عناصر Flexbox
تطبيق flex-grow و flex-shrink و flex-basis و align-self على العناصر الفرعية الفردية. يتيح التحكم على مستوى العنصر عرض أعمدة غير متساوية وعناصر محاذية ذاتيًا.

الفصل 5عرض التفاصيل

أساسيات JavaScript

الدرس 1 • المتغيرات وأنواع البيانات والعوامل
إعلان المتغيرات باستخدام let و const و var وتحديد أنواع البيانات البدائية. تتم معالجة أسبقية العوامل وتحويل النوع لمنع الأخطاء الشائعة.
الدرس 2 • الدوال والنطاق (Functions and Scope)
تعريف الدوال باستخدام الإعلانات والتعبيرات وصيغة الأسهم مع شرح سلاسل النطاق. يُمنع إتقان النطاق تسرب المتغيرات وأخطاء الإغلاق (closure).
الدرس 3 • الكائنات وطرق الكائنات
بناء كائنات بالخصائص والطرق والوصول إليها باستخدام تدوين النقطة والأقواس. تمثل الكائنات هياكل بيانات من العالم الحقيقي تُستخدم في كل تطبيق JS.
الدرس 4 • المصفوفات وطرق المصفوفات
إنشاء المصفوفات والتعامل معها باستخدام push و pop و map و filter و reduce. تُستخدم طرق المصفوفات الوظيفية في جميع أعمال DOM ومعالجة API.
الدرس 5 • التحكم في التدفق: الجمل الشرطية والحلقات
تنفيذ if/else و switch و for و while و do-while لتوجيه تنفيذ البرنامج. يُعد التحكم في التدفق شرطًا أساسيًا لكل التفكير الخوارزمي في الفصول اللاحقة.

الفصل 6عرض التفاصيل

التعامل مع DOM والأحداث

الدرس 1 • تعديل العناصر والأنماط
تغيير textContent و innerHTML والخصائص و classList لتحديث الصفحة دون إعادة تحميل. تُشغّل هذه التقنيات تحديثات واجهة المستخدم المباشرة في تطبيقات الصفحة الواحدة.
الدرس 2 • إنشاء وإزالة عُقد DOM
بناء عناصر جديدة باستخدام createElement وإضافتها وإزالة العقد القديمة. يتيح إنشاء العقد الديناميكي عرض القوائم وأنماط المكونات.
الدرس 3 • تفويض الأحداث وانتشارها (Event Delegation and Bubbling)
استغلال انتشار الحدث (event bubbling) لإرفاق مستمع واحد للحاويات الأب للعناصر الديناميكية. يقلل التفويض استخدام الذاكرة ويتعامل مع العناصر المُنشأة وقت التشغيل.
الدرس 4 • اختيار عناصر DOM والتجول فيها
استخدام querySelector و getElementById وخصائص التجول لتحديد العناصر بدقة. يُعد الاختيار الدقيق أساس كل سلوك ديناميكي للصفحة.
الدرس 5 • مستمعات الأحداث وكائن الحدث (Event Object)
إرفاق أحداث click و input و submit و keyboard باستخدام addEventListener. يوفر كائن الحدث target و type وطرق المنع للتحكم الكامل.

الفصل 7عرض التفاصيل

JavaScript غير المتزامن و APIs

الدرس 1 • صيغة Async/Await
إعادة كتابة سلاسل الوعود باستخدام دوال async وتعبيرات await لشيفرة قابلة للقراءة. يُعد Async/await المعيار الحديث لجميع سير العمل القائم على fetch.
الدرس 2 • الوعود (Promises) وتسلسلها (Promise Chaining)
إنشاء واستهلاك الوعود باستخدام .then() و .catch() و .finally() لشيفرة غير متزامنة أنظف. يستبدل تسلسل الوعود الاسترجاعات المتداخلة في العمليات غير المتزامنة المتسلسلة.
الدرس 3 • عرض بيانات API في DOM
تحويل مصفوفات JSON المجلوبة إلى عناصر HTML ومعالجة حالات التحميل والخطأ بشكل مرئي. يربط استرجاع البيانات غير المتزامن بالتعامل مع DOM من الفصل السابق.
الدرس 4 • جلب البيانات باستخدام Fetch API
إرسال طلبات GET و POST باستخدام fetch() وتحليل استجابات JSON ومعالجة الأخطاء. يُعد Fetch الأداة المتصفحية الأصلية لجميع اتصالات REST API.
الدرس 5 • المفاهيم غير المتزامنة والاسترجاعات (Callbacks)
شرح مكدس الاستدعاءات وحلقة الأحداث ونمط الاسترجاع للتنفيذ المؤجل. يمنع فهم حلقة الأحداث حظر واجهة المستخدم وأخطاء جحيم الاسترجاعات (callback hell).

الفصل 8عرض التفاصيل

مشروع الختام: تطبيق واجهة أمامية كامل المكدس

الدرس 1 • النشر ومراجعة الشيفرة
نشر المشروع على منصة استضافة ثابتة وإجراء مراجعة منظمة للشيفرة مع زميل. يحاكي النشر والمراجعة معايير التسليم المهنية الفعلية.
الدرس 2 • التنسيق باستخدام CSS والتخطيط المتجاوب
تطبيق نظام تصميم باستخدام متغيرات CSS و Flexbox و Grid مع استجابة كاملة. يُظهر التصميم المرئي المتناسق إتقان الفصلين 3 و 4.
الدرس 3 • تخطيط المشروع ومعماريته
تعريف قصص المستخدمين والرسوم التخطيطية وتقسيم المكونات قبل كتابة الشيفرة. يمنع التخطيط زحف النطاق ويؤسس سير عمل تطوير مهني.
الدرس 4 • منطق JavaScript ودمج API
تنفيذ استدعاءات fetch وعرض DOM ومعالجة الأحداث وإدارة الحالة في JS الأصلي. دمج جميع مهارات JS من الفصول 5 و 6 و 7 في قاعدة شيفرة واحدة.
الدرس 5 • بناء هيكل HTML
بناء هيكل HTML دلالي لجميع طرق عرض التطبيق باستخدام أنماط من الفصلين 2 و 3. يضمن الهيكل الصحيح دمج طبقات CSS و JS دون إعادة هيكلة.

الشهادة

شهادة إتمام معتمدة

هذا الدورة مخصصة لك:

محترفون يغيرون مسارهم المهني: يسعون لدخول المجال التقني دون شهادة في علوم الحاسب.
محترفو التسويق: الراغبون في التوقف عن الاعتماد على المطورين لإجراء تعديلات بسيطة على الموقع.
المستقلون: مستعدون لإضافة خدمات تطوير الويب إلى عروض العملاء الحالية لديهم.
طلاب الجامعات: بناء مجموعة من المهارات التقنية لتعزيز طلبات التوظيف الخاصة بهم.
أصحاب المشاريع الصغيرة: المصممون على بناء وإدارة حضورهم الرقمي بأنفسهم بشكل مستقل.
الهواة: المتحمسون لتحويل أفكارهم الإبداعية إلى مواقع ويب حقيقية وقابلة للمشاركة من الصفر.

ماذا يقول طلابنا

دروسكم مثالية. اشتريت باقة السنة الواحدة وأخيرًا أصبحت لدي الفرصة لمتابعة مواضيع متنوعة تهمني دون الحاجة لتغيير المنصة... أشكركم على كل ما تقدمونه، وقد أوصيت بكم بالفعل لأشخاص آخرين...