العودة إلى الأكاديمية
دورة تدريبيةمبتدئ

كورس تعلم البرمجة من الصفر بلغة HTML

5.0(١ تقييم)
٢٢ ساعة ٧٥ درس شهادة إتمام معتمدةمعاينة مجانية (٦ دروس)
كورس تعلم البرمجة من الصفر بلغة HTML

مسار متكامل للمبتدئين تماماً — من أول وسم HTML حتى بناء مشاريع حقيقية مع مقدمة عملية في CSS و JavaScript

لمن هذا الكورس؟

هذا الكورس مصمم خصيصاً للمبتدئين الذين لم يسبق لهم كتابة أي كود من قبل. لا حاجة لأي خلفية تقنية مسبقة، فقط جهاز حاسوب ورغبة حقيقية في التعلم.

ماذا ستحقق بنهاية الكورس؟

  • بناء صفحات ويب كاملة من الصفر باستخدام HTML بثقة تامة
  • فهم أساسيات تنسيق الصفحات باستخدام CSS بما في ذلك التصميم المتجاوب
  • إضافة لمسة من التفاعل لصفحاتك عبر مقدمة عملية في JavaScript
  • إنجاز ثلاثة مشاريع حقيقية يمكن عرضها كمعرض أعمال أولي (Portfolio)
  • اكتساب عادات كتابة كود نظيف ومنظم منذ اليوم الأول

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

  • جهاز حاسوب (ويندوز أو ماك أو لينكس) واتصال بالإنترنت
  • لا حاجة لأي خبرة برمجية سابقة
  • الرغبة في تخصيص 30-60 دقيقة يومياً للتدريب العملي

الأدوات التي ستحتاجها

  • محرر أكواد: Visual Studio Code (مجاني)
  • متصفح ويب حديث: Google Chrome أو Microsoft Edge
  • إضافة Live Server داخل VS Code للمعاينة الفورية

المدة والمنهجية

من 20 إلى 25 ساعة تدريب موزعة على 17 فصلاً، بمعدل درس أو درسين يومياً يمكن إنهاء الكورس خلال 4 إلى 6 أسابيع.

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

منهج الدورة

القسم الأول — الفصل 1: قبل أن تكتب أول سطر كود٥ دروس
  • 📘 كتاب مرجعي مصاحب للكورس (PDF)PDF
  • 1.1 ما هي البرمجة ولماذا نتعلمها؟ معاينةنص
  • 1.2 كيف يعمل الإنترنت والمواقع؟ معاينةنص
  • 1.3 التعرف على المثلث: HTML و CSS و JavaScript معاينةنص
  • ✅ تحقق سريع من فهمكتفاعلي
القسم الأول — الفصل 2: تجهيز بيئة العمل٤ دروس
  • 2.1 تثبيت VS Code وإضافاته الأساسية معاينةنص
  • 2.2 إنشاء أول مشروع وفتحه في المتصفح معاينةنص
  • 2.3 أدوات المطور (DevTools) في المتصفح معاينةنص
  • ✅ تحقق سريع من فهمكتفاعلي
القسم الثاني — الفصل 3: هيكل صفحة HTML٤ دروس
  • 3.1 عناصر ووسوم HTML: المفاهيم الأساسيةنص
  • 3.2 الهيكل القياسي للمستندنص
  • 3.3 التعليقات وقواعد الكتابة النظيفةنص
  • ✅ تحقق سريع من فهمكتفاعلي
القسم الثاني — الفصل 4: النصوص والعناوين والفقرات٤ دروس
  • 4.1 العناوين من h1 إلى h6نص
  • 4.2 الفقرات وفواصل الأسطرنص
  • 4.3 تنسيق النص داخل الفقراتنص
  • ✅ تحقق سريع من فهمكتفاعلي
القسم الثاني — الفصل 5: الروابط والصور٤ دروس
  • 5.1 الروابط: وسم a وخاصية hrefنص
  • 5.2 الصور: وسم img وخاصية altنص
  • 5.3 المسارات النسبية والمطلقةنص
  • ✅ تحقق سريع من فهمكتفاعلي
القسم الثاني — الفصل 6: القوائم والجداول٥ دروس
  • 6.1 القوائم غير المرتبة والمرتبةنص
  • 6.2 القوائم المتداخلةنص
  • 6.3 الجداولنص
  • 🏆 مشروع الفصل: صفحة سيرة ذاتية (CV) بسيطةنص
  • ✅ تحقق سريع من فهمكتفاعلي
القسم الثاني — الفصل 7: النماذج (Forms)٤ دروس
  • 7.1 وسم form وخاصياتهنص
  • 7.2 أنواع input المختلفةنص
  • 7.3 label, select, textarea والخصائص الإضافيةنص
  • ✅ تحقق سريع من فهمكتفاعلي
القسم الثاني — الفصل 8: HTML الدلالي (Semantic HTML) وبنية الصفحة٥ دروس
  • 8.1 header, nav, main, footerنص
  • 8.2 section, article, asideنص
  • 8.3 div وspan: متى نستخدمهمانص
  • 🏆 مشروع الفصل: صفحة هبوط (Landing Page) كاملةنص
  • ✅ تحقق سريع من فهمكتفاعلي
القسم الثاني — الفصل 9: الوسائط والعناصر المتقدمة٤ دروس
  • 9.1 الصوت والفيديونص
  • 9.2 الإطارات المضمنة iframeنص
  • 9.3 وسوم meta وSEO الأساسي ودعم العربيةنص
  • ✅ تحقق سريع من فهمكتفاعلي
القسم الثالث — الفصل 10: أساسيات CSS٤ دروس
  • 10.1 طرق ربط CSS بـ HTMLنص
  • 10.2 المحددات الأساسية Selectorsنص
  • 10.3 الألوان والخطوط والنصوصنص
  • ✅ تحقق سريع من فهمكتفاعلي
القسم الثالث — الفصل 11: صندوق العناصر والتخطيط٤ دروس
  • 11.1 نموذج الصندوق Box Modelنص
  • 11.2 Display: block, inline, inline-blockنص
  • 11.3 Position: static, relative, absolute, fixedنص
  • ✅ تحقق سريع من فهمكتفاعلي
القسم الثالث — الفصل 12: تخطيط الصفحة الحديث Flexbox٤ دروس
  • 12.1 مبادئ Flexboxنص
  • 12.2 محاذاة وتوزيع العناصرنص
  • 🏆 12.3 مشروع: تنسيق الصفحة الرئيسية بـ Flexboxنص
  • ✅ تحقق سريع من فهمكتفاعلي
القسم الثالث — الفصل 13: التصميم المتجاوب Responsive Design٤ دروس
  • 13.1 الوحدات: px, %, em, remنص
  • 13.2 Media Queriesنص
  • 🏆 13.3 مشروع الفصل: جعل صفحة الهبوط متجاوبة بالكاملنص
  • ✅ تحقق سريع من فهمكتفاعلي
القسم الرابع — الفصل 14: أساسيات JavaScript٤ دروس
  • 14.1 ربط JS بصفحة HTMLنص
  • 14.2 المتغيرات وأنواع البياناتنص
  • 14.3 الجمل الشرطية والعمليات المنطقيةنص
  • ✅ تحقق سريع من فهمكتفاعلي
القسم الرابع — الفصل 15: الحلقات والدوال والمصفوفات٤ دروس
  • 15.1 حلقات التكرار (Loops)نص
  • 15.2 الدوال (Functions)نص
  • 15.3 المصفوفات (Arrays)نص
  • ✅ تحقق سريع من فهمكتفاعلي
القسم الرابع — الفصل 16: التعامل مع DOM والأحداث٤ دروس
  • 16.1 ما هو DOM؟نص
  • 16.2 اختيار العناصر وتعديل محتواهانص
  • 16.3 الاستماع للأحداث Eventsنص
  • ✅ تحقق سريع من فهمكتفاعلي
القسم الرابع — الفصل 17: مشروع التخرج — تطبيق قائمة المهام (To-Do List)٤ دروس
  • 17.1 تخطيط المشروع وبناء الهيكلنص
  • 17.2 تنسيق الواجهةنص
  • 17.3 برمجة التفاعل ونشر المشروعنص
  • ✅ تحقق سريع من فهمكتفاعلي
القسم الخامس — الفصل 18: ماذا بعد هذا الكورس؟٤ دروس
  • 18.1 خارطة الطريق القادمةنص
  • 18.2 بناء معرض أعمال (Portfolio)نص
  • 18.3 مصادر ومجتمعات مفيدة للاستمرارنص
  • ✅ تحقق سريع من فهمكتفاعلي

تقييمات الطلاب

5.0 (١ تقييم)

موسى محمد موسى ابو غنيمة