تعريف بالدورة
  • المقدمة
أساسيات التصميم
  • أختيار الخطوط
  • إختيار الألوان
  • تناسق الألوان
  • الخلفيات المساعدة
  • المسافات
  • أهمية ترتيب الموقع
  • شرح فوائد وطريقة إستخدام أدوات المطورين
HTML الغوص في
  • HTML مقدمة
  • Brackets و تحميل برنامج HTML أساسيات
  • HTML تكملة شرح اساسيات
  • DIV شرح فوائد استعمال
  • الملفات الخاصة بالصحفة
  • عن طريق بناء صفحة الجزء الاول HTML شرح أساسيات
  • عن طريق بناء صفحه الجزء الثاني HTML شرح أساسيات
  • وجعلة كمرجع للأكواد W3schools شرح موقع
مع التطبيق CSS شرح أساسيات
  • CSS مقدمة
  • CSS شرح الأنواع الثلاثة لاضافة أكواد
  • Selectors بواسطة أستخدام HTML شرح طريقة تحديد
  • الجزء الاول Padding & Margin شرح أستعمال ومشاكل
  • الجزء الثاني Padding & Margin شرح أستعمال و مشاكل
  • Float شرح فوائد
  • وطريقة تجنبها Float شرح مشاكل
  • Display شرح فوائد أستخدام
  • وأنواعها ومميزات كل منها CSS شرح الألوان في
  • ومميزاتها Positions شرح أنواع
  • PX VS % شرح عناصر الاحجام
  • عن طريق تكملة بناء الصفحة الجزء الاول CSS شرح أساسيات
  • عن طريق تكملة بناء الصفحة الجزء الثاني CSS شرح أساسيات
Foundation FrameWork شرح أساسيات
  • مقدمة عن الفاونديشن
  • تنبية مهم قبل البدء ببناء اي شيئ بالدورة
  • والخصائص الموجودة في الفاونديشن Grid System أمثلة على
  • Grid System مقدمة عن فوائد وقوة
  • على الصفحة Grid System إضافة
المشروع الرئيسي لبناء موقع إحترافي كاملاً
  • مقدمة المشروع و الخطوات المتبعة قبل بناء الموقع
  • تنبية مهم قبل البدء ببناء اي شيئ بالدورة
  • تجهيز و تحميل أساسيات المشروع
  • تحميل كود المشروع كاملاً
  • قبل البدء بالأكواد Header شرح تقسيم
  • الجزء الاول Header بدء ببناء أعلى
  • الجزء الثاني Header بناء أعلى
  • Header تنبية مهم قبل بناء
  • الأساسي الجزء الاول Header بناء
  • الأساسي الجزء الثانيHeader بناء
  • 1# تحدي القسم الاول
  • بناء قسم المعلومات الجزء الاول
  • بناء قسم المعلومات الجزء الثاني
  • 2# تحدي القسم الثاني
  • بناء قسم الصور الجزء الاول
  • بناء قسم الصور الجزء الثاني
  • 3# تحدي القسم الثالث
  • بناء قسم الاخبار الجزء الاول
  • بناء قسم الاخبار الجزء الثاني
  • بناء قسم الأشتراكات بالنادي الجزء الاول
  • بناء قسم الأشتراكات بالنادي الجزء الثاني
  • بناء قسم الأشتراكات بالنادي الجزء الثالث
  • 4# تحدي القسم الخامس
  • بناء قسم تعليقات المشتركين الجزء الاول
  • بناء قسم تعليقات المشتركين الجزء الثاني
  • الجزء الأول Footer البدء ببناء اخر قسم
  • الجزء الثاني Footer بناء قسم
  • الجزء الثالثFooter بناء قسم
  • الجزء الرابعFooter بناء قسم
ليعمل على جميع أنواع الأجهزة Responsive جعل الموقع
  • Responsive مقدمة عن
  • تجهيز الأشياء الأساسية لجعل الموقع ريسبونسف
  • 1160px & 1010px جعل الموقع ريسبونسف الجزء الاول بحجم
  • 727px جعل الموقع ريسبونسف الجزء الثاني بحجم
  • 440px جعل الموقع ريسبونسف الجزء الثالث بحجم
  • 320px جعل الموقع ريسبونسف الجزء الرابع بحجم
  • 6# تحدي جعل القسم رسبونسيف
و إضافات اخرى Foundation FrameWork إضافة التاثيرات على الموقع بواسطة
  • تنزل اثناء النزول بالصفحة Menu طريقة جعل
  • JavaScript أسود عندما تنزل بستخدام Menu جعل لون
  • تأخذك للقسم المطلوب تلقائياً عند الضغط عليها Menu جعل أزرار
  • WOW.js إضافة التأثيرات على الاقسام كلها عن طريق إضافة
  • 6# تحدي إضافة تأثيرات جديدة على الاقسام
دروس إضافية لتحسين اداء الموقع
  • Tab طريقة تغيير أيقونة الموقع الموجودة في صفحات
  • Google بالموقع ليصبح أفضل على مواقع البحث مثل (SEO) تحسين الارشفة
  • Compression تسريع الموقع بضغط اكواد البرمجة
  • Image Optimizer تسريع الموقع بتقليل حجم الصور بالموقع دون تأثر الجودة
نشر المشروع على الانترنت وشرح لأفضل الإستضافات
  • اللإشتراك بالاسيرفرات ووضع المشروع على الانترنت
حلول التحديات
  • تحميل اكواد حل التحديات
  • 1# حل التحدي الاول
  • 2# حل التحدي الثاني
  • 3# حل التحدي الثالث
  • 4# حل التحدي الرابع
  • 5# حل التحدي الخامس
  • 6# حل التحدي السادس
الخاتمة
  • تهانينا لك, لقد أنهيت الدورة