هذا الدرس من الدورة التدريبية: تعلم البرمجة من الصفر وتطوير صفحات الويب الإحترافية مع لغة جافاسكربت JavaScript
الدرس: Exercise
المدة: 27 دقائق
وصف الدرس
استخدام CSS لتنسيق صفحة الويب
الأنماط الرئيسية
1. **إعدادات عامة (`*, html, body`)**:
- يتم تعيين `padding: 0; margin: 0;` لإزالة الهامش والحشو الافتراضيين.
- `box-sizing: border-box;` يضمن أن الهامش والحشو يتم حسابهما ضمن العرض والارتفاع الكلي للعناصر.
2. **تنسيق العناوين (`h1`)**:
- `margin-bottom: 20px;` يوفر هامشًا سفليًا للعنوان للفصل بين العناصر.
3. **الحاوية الرئيسية (`container`)**:
- `width: 70%; margin: 0 auto;` يوضح أن الحاوية تأخذ 70% من عرض الشاشة مع محاذاة تلقائية في الوسط.
تنسيق النماذج والعناصر الإدخال
4. **تنسيق حقول النموذج (`form-group`)**:
- `width: 49%; float: left;` يضع كل حقل نموذج في عمود يشغل 49% من عرض الحاوية، مع فصل بين الحقول بواسطة الهامش والحواف.
5. **الأزرار (`btn-style`, `btn-green`)**:
- `btn-style` و `btn-green` تعريفات للأزرار مع خلفية وألوان مختلفة وحدود بدون حواف لجعلها بارزة.
6. **تنسيق القوائم (`ul, ul li`)**:
- `ul` تأخذ عرضًا كبيرًا وتطبق تنسيقًا للقوائم التي تعمل بتنسيق جدولي لتنظيم العناصر.
- `ul li` تنسيق كل عنصر قائمة بنمط جدولي مع هامش وسطي.
الرسائل والأخطاء (`error`)
7. **الأخطاء (`error`)**:
- تعريف نص أحمر اللون بحجم 12 بكسل لعرض الرسائل الخطأ.
#### الأحداث والتفاعل (`remove`)
8. **إدارة الأحداث (`remove`)**:
- تنسيق لزر إزالة بلون أحمر ونص أبيض مع مؤشر لتحديد التفاعل مع المستخدم.
#### الاستجابة للتفاعل (`hover`)
9. **تفاعل الفأرة (`hover`)**:
- تعريف لتفاعل الأزرار والروابط عندما يمر المستخدم بالمؤشر فوقها لزيادة التفاعلية.
الخلاصة
باستخدام هذه الأنماط والأساليب، يمكنك تنظيم صفحات الويب بشكل أفضل وجعل تجربة المستخدم أكثر سلاسة وجاذبية. استخدم هذه الأدوات بحذر لضمان التوافق والتجاوب مع كافة الأجهزة والمتصفحات.
الفيديوهات
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات
فيديو الدرس التعليمي Exercise
المصادر
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر
الأوامر البرمجية المستخدمة
ملحقات ال PDF
الدروس والاختبارات لتعلم هذه الدورة التدريبية : تعلم البرمجة من الصفر وتطوير صفحات الويب الإحترافية مع لغة جافاسكربت JavaScript
دورات تدريبية أخرى في برمجة
دورة تدريبية في فهم شبكات الإنترنت وخوادم الويب
دورة تدريبية تحتوي على دروس مجانية مدعمة من البورد الأوروبي لفهم أساسيات شبكة الإنترنت والاتصالات بين المستخدمين وتطبيقات الويب والأجهزة
دورة تدريبية في بناء صفحات الويب HTML & CSS
دورة تدريبية في بناء صفحات الويب HTML & CSS يقام البرنامج بالتعاون وباعتماد الجهات التالية شهادة موثقة من الجهات الالمانية شهادة معتمدة...
دورة تدريبية في بناء صفحات الويب المتجاوبة باستخدام Bootstrap
دورة تدريبية في بناء صفحات الويب المتجاوبة باستخدام Bootstrap يقام البرنامج بالتعاون وباعتماد الجهات التالية شهادة موثقة من الجهات الالمانية شهادة معتمدة...
دورة لغة برمجة PHP لبناء صفحات ويب ديناميكية
دورة لغة برمجة PHP لبناء صفحات ويب ديناميكية يقام البرنامج بالتعاون وباعتماد الجهات التالية شهادة موثقة من الجهات الالمانية شهادة معتمدة الوحدة...
مقالات ذات صلة
التعامل مع البيانات وواجهة المستخدم باستخدام JavaScript
هل تساءلت يومًا عن كيفية التحكم في البيانات والتفاعل مع واجهة المستخدم في صفحات الويب؟ 🤔 في عالم البرمجة الحديثة، يعد فهم...
لماذا يجب أن تبدأ بتعلم البرمجة وجافاسكربت الآن؟
فوائد تعلم البرمجة وبرنامج جافاسكربت في عالمنا الرقمي المتسارع، أصبحت البرمجة حجر الزاوية الذي تقوم عليه العديد من الابتكارات التقنية التي نشهدها...
التحكم في صفحة الويب باستخدام JavaScript: دليل شامل
التحكم في صفحة الويب باستخدام JavaScript: دليل شامل يعد التحكم في صفحة الويب باستخدام JavaScript من الجوانب الأساسية التي تمكن المطورين من...
استكشاف الأساليب المتقدمة للمصفوفات في جافاسكريبت
المصفوفات (Arrays) في جافاسكريبت: دليل شامل مقدمة المصفوفات هي واحدة من أهم هياكل البيانات الأساسية في جافاسكريبت، حيث تتيح للمطورين تخزين وإدارة...
تطبيق حركات الانيميشن والتحريك ال 3d وخلق اشكال انسيابية للعناصر داخل الصفحة
تطبيق حركات الانيميشن والتحريك الـ 3D في بناء صفحات الويب باستخدام HTML و CSS في عالم تصميم الويب الحديث، أصبحت حركات الانيميشن...
ماهي لغة PHP ولماذا نستخدمها وكيف نقوم بكتابتها
ماهي لغة PHP ولماذا نستخدمها وكيف نقوم بكتابتها؟ لغة PHP هي واحدة من أقوى لغات البرمجة المستخدمة في تطوير الصفحات الويب الديناميكية....
تعلم البرمجة وتطوير صفحات الويب Javascript
برنامج تعلم البرمجة وتطوير صفحات الويب بلغة JavaScript يعد برنامج “تعلم البرمجة وتطوير صفحات الويب بلغة JavaScript” خيارًا مثاليًا لكل من يرغب...
