الدروس والاختبارات لتعلم هذه الدورة التدريبية : دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت

• القسم: الوصول للعناصر وتطبيق التنسيق عليها

• مقدمة في CSS: كيفية تحويل صفحات HTML إلى تصميمات جذابة

  شاهد مجاناً

• مقدمة التعرف على التحريك والمكتبات في تطوير الويب

• مقدمة إلى CSS ودورات إضافية في تطوير الويب

• دليل استخدام CSS لتحديد العناصر وتطبيق الخصائص – القواعد الأساسية والرموز

• اختبارعلى أساسيات CSS لتحديد العناصر وتطبيق الخصائص

• محددات CSS للعنصر وأولوية الخصائص – تعلم كيفية التحكم في تنسيقات العناصر

• تحميل التنسيق للعناصر من ملفات CSS واعادة كتابة تنسيق مختلف داخلي

• كيفية تجاوز الخصائص في CSS وأولوية التنسيق – فهم ترتيب تطبيق التنسيقات

• تخصيص تنسيق في CSS باستخدام ال class وال id –أولويات التنسيق

• تطبيق تنسيقات CSS على المدخلات باستخدام attributes في HTML

  شاهد مجاناً
• محددات CSS: استهداف العناصر، العناصر المباشرة، والعناصر المحددة

• محددات CSS: استهداف العناصر بواسطة nth-of-type والأول والأخير من نوعه

• القسم: الألوان والخطوط

• مقدمة في الألوان ورموز الألوان

• ألوان الخلفية وحجم الخط في CSS

• حجم الخط في px, em, rem CSS text decoration وخصائص النص

• محاذاة النص وسمك الخط في CSS: تعلم تنسيقات النصوص المتقدمة

• عائلة الخطوط وطرق تضمين خطوط جوجل في HTML

  شاهد مجاناً
• عائلة الخطوط وكيفية استيرادها في CSS باستخدام CDN

• استخدام الخطوط من ملفات محلية في المواقع وحل المشكلات عبر البحث

• القسم: الأحجام العرض والإرتفاع

• عرض وتحديد العرض والارتفاع للعناصر في CSS

• تعيين عرض وارتفاع العناصر تلقائي وأحجام عناصر صفحة الويب مع الشاشات

• الحجم بالنسبة المئوية في CSS والتحكم بعرض الصور

• وضع صورة في النصف والحد الأقصى للعرض max-width

• كيفية ضبط أقصى ارتفاع للعناصر max-height والصور في CSS

• إعادة ضبط تنسيق المتصفح: المسافات والتباعد وتنسيق أحجام العناصر

• إتقان العرض والارتفاع: التحكم الكامل في الأبعاد الرأسية بملء الشاشة في CSS

• تصميم خلفية بملء الشاشة مع عنوان مميز في CSS

• القسم: إنشاء تصاميم خلفيات

• كيفية التحكم في حجم وموضع وتكرار الخلفية باستخدام CSS

• كيف تغير مكان الصور وتأثيرها وتطبيق تدرجات اللون على الخلفيات

• التحكم بخلفيات الصفحة الصورة والحجم والموقع والتكرار

• القسم: تنسيق عناصر هيكل صفحة الويب

• مقدمة فى تنسيق عناصر هيكل صفحة الويب

• تنسيق عناصر هيكل صفحة الويب بواسطة خاصية Float

• كيفية إستخدام Display table, float none لتوسيط العناصر فى Css

• مراجعة على تنسيق العناصر بإستخدام Float وتوسيطها فى Css

• التنسيق وحفظ التعديلات فى صفحة الويب على أدوات مطورين المتصفح

• الفرق بين Inline و Block وكيفية تعديل الأنماط باستخدام عنصر class

• "التحكم بعرض العناصر: Display Table, Display None، و Float None في CSS"

  شاهد مجاناً
• كيفية إخفاء عناصر صفحة الويب بإستخدام Visibility Hidden وأنماط مؤشر الماوس Cursor Styles في CSS

• التحكم فى التأثيرات وأحداث الماوس والحد الأدنى لعناصر صفحة الويب

• القسم: تصميم الأشكال المتقدمة وتفاعل العناصر

• مقدمة فى Unboxed Style وإنشاء صفحات HTML بسيطة

• تطبيق position absolute واتجاه العناصر وإعادة ضبط الاتجاهات في CSS

• كيفية تطبيق خاصية position relative and overflow

• كيفية تطبيق خاصية Overflow and Position Fixed.

• اختبار على درس Position Relative , Position fixed ,Overflow في CSS

• كيفية تطبيق خاصية Opacity and Hover فى Css

• وظائف ودوال Css

• تحديد حجم العنصر مع وضع سكرول لإظهار المحتوى

• القسم: الحدود والمساحات لمحاذاة وتنسيق صفحة الويب

• Border and Border radius

• Margins And Directions

• Revise Borders and Spaces and Learn List style

• Outline and Outline with borders and elements

• CSS Elements After and Before

• Spaces and padding

• Padding by element

• القسم: Functions

• Variables Colors Global and Locale Scopes

• Navigation show Dropdown with hover

• What are counters and how to use and reset them

• Use Multi counters nasted to each other

• Multi and Nasted Counters

• القسم: Movements

• Transition in details and shorthand

• Transition properities

• Animation delay and duration and iteration and name

• Animation play state and fill mode

• Animation Multi levels Cut ends

• Animation shorthand

• Transform TranslateY TranslateX TranslateZ Translate3d

• Transform Translate3d with perspective and perspective origin

• الدرس الحالي: TranslateZ And ScaleZ And 3d perspective

  '..'

• Transform Scale And Rotate

• Transform 3d styles for elements in websites

• القسم: Arts Shadows and Clip path

• Text shadow and Box shadow

• Webkit And Moz And Prefixes for Browser support CSS3

• Text Selection And ScrollBar Settings

• Clip path ciricle ellipse polygon inset

• Clip path in all browsers and create custom clip path by online tools and manual

• القسم: Flex

• What is and what can do Display Flex

• What is Flex Wrap And Flex Direction

• Simple counters to describe flex direction reverse

• Flex Direction values and Flex Wrap

• Flex Flow and position relative example

• Flex Justify content and align items

• Align content and spaces in flex

• Justify Items and Align items on Baseline

• Flex Grow And order items in flex

• Flex Shring And Flex Basis

• Flex Align self and align stretch and Flex shorthand