دورة HTML و CSS و JavaScript
تعلم HTML وCSS وJavaScript من البداية وابنِ تطبيقات ويب حقيقية قابلة للنشر. يأخذك هذا الكورس من إعداد بيئة التطوير الأولى الخاصة بك إلى تسليم مشروع واجهة أمامية جاهز للمحفظة المهنية. يتم تطبيق كل مفهوم من خلال البرمجة التطبيقية، لذا ستغادر ومعك كفاءات يمكن للمشغِّلين رؤيتها فعلياً.
ماذا ستتعلم:
ستتعلم كيفية هيكلة صفحات الويب باستخدام HTML الدلالي، وتنسيقها باستخدام CSS الحديثة، بما في ذلك Flexbox وGrid، وإضفاء الحيوية عليها باستخدام JavaScript. يغطي الكورس مفاهيم البرمجة الأساسية مثل الدوال والمصفوفات والكائنات وتدفق التحكم، ثم ينتقل إلى معالجة DOM والبرمجة غير المتزامنة باستخدام Fetch API. كما ستعمل باستخدام Git لإدارة الإصدارات، وستستخدم أدوات DevTools في المتصفح لتصحيح الأخطاء، وستتبع معايير إمكانية الوصول ومعايير الويب طوال الوقت. في النهاية، ستكون قد بنيت ونشرت تطبيق واجهة أمامية كامل باستخدام واجهة REST برمجية عامة.
كيف تدرس بشكل عملي دورة 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 الأساسية
هيكل ودلالة HTML الأساسية
الدرس 1 • القوائم والروابط والتنقل
بناء قوائم مرتبة وغير مرتبة وقوائم الوصف بالإضافة إلى عناصر الربط مع الخصائص. تشكل هذه الأنماط العمود الفقري لهيكل التنقل لكل موقع.
الدرس 2 • عناصر النص والعناوين
يغطي h1–h6 و p و strong و em و blockquote لتسلسل المحتوى. يؤثر ترتيب العناوين الصحيح بشكل مباشر على SEO وتنقل قارئ الشاشة.
الدرس 3 • الصور والوسائط والأشكال
تضمين الصور والصوت والفيديو بخصائص صحيحة للوصول والأداء. تُعامل النص البديل والتسميات التوضيحية كمطلوب، وليس اختياريًا.
الدرس 4 • عناصر التخطيط الدلالية
استبدال divs العامة بـ header و main و section و article و aside و footer. يحسن الترميز الدلالي قابلية القراءة الآلية ونتائج الوصول.
الدرس 5 • نماذج HTML وأنواع الإدخال
إنشاء نماذج مع labels و inputs و selects و textareas باستخدام أنماط الارتباط الصحيحة. ترميز النموذج الصحيح هو شرط أساسي لتنسيق CSS والتحقق من صحة JS.
الفصل 3إخفاءإخفاء التفاصيلعرض التفاصيلأساسيات CSS ونموذج الصندوق
أساسيات CSS ونموذج الصندوق
الدرس 1 • شرح نموذج الصندوق
يعلم المحتوى والحشو والحدود والهامش كالطبقات الأربع لكل عنصر. يمنع إتقان box-sizing أخطاء التخطيط طوال الكورس.
الدرس 2 • متغيرات CSS والخصائص المخصصة
تعريف وإعادة استخدام رموز التصميم عبر خصائص CSS المخصصة لأنماط قابلة للصيانة. تقلل المتغيرات التكرار وتتيح تبديل السمات في المشاريع اللاحقة.
الدرس 3 • الطباعة واللون
تعيين عائلات الخطوط والأحجام والأوزان وارتفاعات الأسطر وقيم الألوان باستخدام وحدات CSS الحديثة. مقاييس الطباعة واللون المتناسقة هي أساس أنظمة التصميم المرئي.
الدرس 4 • محددات CSS والأفضلية
يغطي محددات العنصر والفئة والمعرف والخاصية والفئة الزائفة مع حساب الأفضلية. فهم الأفضلية يمنع تعارضات التتالي في الأنماط الأكبر حجمًا.
الدرس 5 • العرض والتحديد والتدفق
يشرح قيم block و inline و inline-block و position التي تتحكم في تدفق المستند. هذه المفاهيم مطلوبة قبل تعلم Flexbox و Grid.
الفصل 4إخفاءإخفاء التفاصيلعرض التفاصيلتخطيطات CSS: Flexbox و Grid
تخطيطات CSS: Flexbox و Grid
الدرس 1 • وضع العناصر في الشبكة والمساحات المسماة
وضع العناصر باستخدام أرقام الأسطر وكلمات span والمساحات المسماة للقوالب. المساحات المسماة تجعل التخطيطات المعقدة قابلة للقراءة وسهلة إعادة الهيكلة.
الدرس 2 • خصائص الحاوية Flexbox
يتحكم في flex-direction و justify-content و align-items و flex-wrap على العنصر الأب. تحكم هذه الخصائص في توزيع العناصر الفرعية على كلا المحورين.
الدرس 3 • التصميم المتجاوب باستعلامات الوسائط
تطبيق نقاط التوقف واستراتيجية الجوال أولاً لتكييف التخطيطات عبر أحجام الشاشات. يجمع بين Flexbox و Grid مع استعلامات الوسائط للاستجابة الجاهزة للإنتاج.
الدرس 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
أساسيات JavaScript
الدرس 1 • المتغيرات وأنواع البيانات والمشغلات
تعريف المتغيرات باستخدام let و const و var وتحديد أنواع البيانات الأولية. يتم معالجة أسبقية المشغل وتحويل النوع القسري لمنع الأخطاء البرمجية الشائعة.
الدرس 2 • الدوال والنطاق
تعريف الدوال باستخدام التعريفات والتعبيرات وصياغة السهم مع شرح سلاسل النطاق. إتقان النطاق يمنع تسرب المتغيرات وأخطاء الإغلاق.
الدرس 3 • الكائنات وطرق الكائنات
بناء الكائنات بخصائص وطرق والوصول إليها عبر تدوين النقطة والقوس. تمثل الكائنات هياكل البيانات الواقعية المستخدمة في كل تطبيق JS.
الدرس 4 • المصفوفات وطرق المصفوفات
إنشاء المصفوفات والتعامل معها باستخدام push و pop و map و filter و reduce. تُستخدم طرق المصفوفات الوظيفية في جميع أنحاء معالجة DOM وعمل API.
الدرس 5 • تدفق التحكم: الشروط والحلقات
تنفيذ if/else و switch و for و while و do-while لتوجيه تنفيذ البرنامج. تدفق التحكم هو شرط أساسي لكل التفكير الخوارزمي في الفصول اللاحقة.
الفصل 6إخفاءإخفاء التفاصيلعرض التفاصيلمعالجة DOM والأحداث
معالجة DOM والأحداث
الدرس 1 • تعديل العناصر والأنماط
تغيير textContent و innerHTML والخصائص و classList لتحديث الصفحة دون إعادة تحميل. تغذي هذه التقنيات تحديثات واجهة المستخدم الحية في تطبيقات الصفحة الواحدة.
الدرس 2 • إنشاء وإزالة عُقد DOM
بناء عناصر جديدة باستخدام createElement وإضافتها وإزالة العقد القديمة. يتيح إنشاء العقد الديناميكي عرض القوائم وأنماط المكونات.
الدرس 3 • تفويض الأحداث والفقاعات
الاستفادة من فقاعات الأحداث لإرفاق مستمعين فرديين لحاويات أبوية للعناصر الديناميكية. يقلل التفويض من استخدام الذاكرة ويتعامل مع العناصر المُنشأة في وقت التشغيل.
الدرس 4 • تحديد وتجول DOM
استخدام querySelector و getElementById وخصائص التجول لاستهداف العناصر بدقة. التحديد الدقيق هو أساس كل سلوك صفحة ديناميكي.
الدرس 5 • مستمعو الأحداث وكائن الحدث
ربط أحداث click و input و submit و keyboard باستخدام addEventListener. يوفر كائن الحدث target و type وطرق المنع للتحكم الكامل.
الفصل 7إخفاءإخفاء التفاصيلعرض التفاصيلJavaScript غير المتزامن وAPIs
JavaScript غير المتزامن وAPIs
الدرس 1 • صياغة Async/Await
إعادة كتابة سلاسل Promise باستخدام دوال async وتعبيرات await لكود قابل للقراءة. Async/await هو المعيار الحديث لجميع سير عمل fetch.
الدرس 2 • الوعود وسلسلة الوعود
إنشاء واستهلاك الوعود باستخدام .then() و .catch() و .finally() لكود غير متزامن أنظف. سلسلة الوعود تحل محل الـ callbacks المتداخلة في العمليات غير المتزامنة المتسلسلة.
الدرس 3 • عرض بيانات API في DOM
تحويل مصفوفات JSON التي تم جلبها إلى عناصر HTML ومعالجة حالات التحميل والخطأ بصريًا. يربط استرجاع البيانات غير المتزامن بمعالجة DOM من الفصل السابق.
الدرس 4 • جلب البيانات باستخدام Fetch API
إرسال طلبات GET و POST باستخدام fetch() وتحليل استجابات JSON ومعالجة الأخطاء. Fetch هو الأداة الأصلية للمتصفح لكل اتصال REST API.
الدرس 5 • مفاهيم غير متزامنة وCallbacks
شرح مكدس الاستدعاء وحلقة الأحداث ونمط callback للتنفيذ المؤجل. فهم حلقة الأحداث يمنع حظر واجهة المستخدم وأخطاء الجحيم المتداخل.
الفصل 8إخفاءإخفاء التفاصيلعرض التفاصيلمشروع الختام: تطبيق الواجهة الأمامية الشامل
مشروع الختام: تطبيق الواجهة الأمامية الشامل
الدرس 1 • النشر ومراجعة الكود
نشر المشروع على منصة استضافة ثابتة وإجراء مراجعة كود منظمة بين الأقران. يحاكي النشر والمراجعة معايير التسليم المهنية الحقيقية.
الدرس 2 • التنسيق باستخدام CSS والتخطيط المتجاوب
تطبيق نظام تصميم باستخدام متغيرات CSS و Flexbox و Grid مع استجابة كاملة. يوضح التصميم المرئي المتناسق إتقان الفصلين 3 و 4.
الدرس 3 • تخطيط المشروع وهندسته
تعريف قصص المستخدم والهياكل السلكية وتقسيم المكونات قبل كتابة الكود. التخطيط يمنع تضخم النطاق ويؤسس سير عمل تطوير احترافي.
الدرس 4 • منطق JavaScript ودمج API
تنفيذ استدعاءات fetch وعرض DOM ومعالجة الأحداث وإدارة الحالة في Vanilla JS. يدمج جميع مهارات JS من الفصول 5 و 6 و 7 في قاعدة كود واحدة.
الدرس 5 • بناء هيكل HTML
بناء هيكل HTML دلالي لجميع طرق عرض التطبيق باستخدام أنماط من الفصلين 2 و 3. الهيكل الصحيح يضمن تكامل طبقات CSS و JS دون إعادة هيكلة.
شهادتك المعتمدة عند الانتهاء
هذا الدورة موجهة لك:
الأشخاص الذين يغيرون مسارهم المهني: الراغبون في دخول مجال التكنولوجيا دون شهادة في علوم الحاسوب.
محترفو التسويق: الذين يرغبون في التوقف عن الاعتماد على المطورين لإجراء تعديلات بسيطة على الموقع الإلكتروني.
المستقلون: مستعدون لإضافة خدمات تطوير الويب إلى عروضهم الحالية للعملاء.
طلاب الجامعات: بناء مجموعة من الكفاءات التقنية لتعزيز طلبات التوظيف الخاصة بهم.
أصحاب المشاريع الصغيرة: المصمّمون على بناء وصيانة حضورهم على الويب بشكل مستقل.
الهواة: المتحمسون لتحويل الأفكار الإبداعية إلى مواقع ويب حقيقية قابلة للمشاركة من الصفر.
ماذا يقول طلابنا
دروسكم مثالية. اشتريت الباقة السنوية، وأخيراً أصبح لدي الفرصة لمتابعة مواضيع متنوعة تهمني دون الحاجة لتغيير المنصة... أشكركم على كل ما تقومون به، لقد نصحت أشخاصاً آخرين بكم...
أحب كيف أن الدروس مباشرة ومركزة وكيف يمكنني تغيير الفصول وتخطي المحتوى الذي لا أحتاجه.
أحب المحتوى وطريقة العرض ونسخ الفيديوهات، مما يسرّع العملية!
المنصة سريعة وبسيطة الاستخدام. تنوع المحتوى والفيديوهات التكميلية تساعد كثيراً في التعلم.
أهم الدورات
الأسئلة الشائعة
من هي Dedika؟
هل الشهادة صالحة في الجزائر؟
هل الدورات مجانية؟
ما هو عبء الدورة؟
كيف هي الدورات؟
كيف تعمل الدورات؟
ما هي مدة الدورات؟
ما هو سعر أو تكلفة الدورات؟
ما هو التعليم عن بعد أو الدورة عبر الإنترنت وكيف تعمل؟
دورة PDF