مسار تطوير الواجهة الأمامية

تعلم CSS Animations

مراجعات الطلاب

هل سبق لك أن ضغطت على زر أو فتحت نافذة على موقع ما، ولاحظت حركة سلسة تجعل التجربة أكثر حيوية؟ هذا ما توفره CSS Animations.

سعر الدورة $25
اشترك الآن
تصفح المنهج
  • +500طالب
  • 27درس
  • 8أقسام
  • 15اختبار
  • متوسطالمستوى
عن الدورة

تعرّف على الدورة

هل سبق لك أن ضغطت على زر أو فتحت نافذة على موقع ما، ولاحظت حركة سلسة تجعل التجربة أكثر حيوية؟ هذا ما توفره CSS Animations! إنها التقنية التي تضيف الشكل الجمالي والحيوية إلى المواقع وتجعل التفاعل معها أكثر انسيابية وراحة للمستخدمين.

ما هي CSS Animations ولماذا هي مهمة؟

CSS Animations هي تقنية تتيح لك إضافة حركات وانتقالات (Transitions) بصرية للمواقع بطريقة سلسة وطبيعية. هذه الحركات البسيطة تلعب دورًا كبيرًا في تحسين تجربة المستخدم، حيث تجعل التفاعلات أكثر وضوحًا وتوفر شعورًا طبيعيًا أثناء التنقل بين الصفحات والعناصر، وهذا ما تفعله شركة مثل Apple، حيث تعتمد على الحركات لجعل تجربة المستخدم على موقعها مبهرة.

من خلال هذه الدورة، ستتعلم كيف يمكنك استخدام هذه التقنية لرفع مستوى تصميمات موقعك وتقديم تجارب مستخدم استثنائية مثل مواقع الشركات الرائدة في العالم.

لماذا يجب أن تتعلم CSS Animations؟

  • تحسين تجربة المستخدم: إضافة الحركات البسيطة تجعل موقعك أكثر جاذبية وسهل الاستخدام.
  • زيادة التفاعل: من خلال التفاعلات البصرية، يمكنك توجيه المستخدمين بشكل أفضل وتحسين تفاعلهم مع الموقع.
  • تعزيز مهاراتك كمطور فرونت إند: إضافة الأنيميشن إلى مشاريعك تميزك عن الآخرين وتجعلك قادرًا على تقديم تصميمات احترافية ومتقدمة ستنفعك في معرض أعمالك (Portfolio).

لماذا تشترك في هذه الدورة؟

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

اشترك الآن وابدأ رحلتك في عالم الأنيميشن الاحترافي مع دورة CSS Animations!

تشمل الدورة

  • شهادة موثقة
  • قياس مستوى التقدم والانجاز عبر الدورة
  • إجابة من مشرفي الطلاب على كل الأسئلة
  • فاعليات حصرية
  • شارات تميز للطلبة المتقدمين
  • اشعارات تذكير وتحفيز لإنهاء الدورة
  • اشتراك مدى الحياة
سعر الدورة $25
اشترك الآن

دفع آمن ووصول فوري للدورة

منهج الدورة

ماذا ستتعلم خطوة بخطوة

اضغط على أي قسم لعرض دروسه. الدروس المجانية متاحة للمشاهدة قبل الاشتراك.

محتوى الدورة

  1. 1
    المقدمة
  2. 2
    مواد الدورة
  3. 3
    تجهيز بيئة العمل
  4. 4
    خاصية Transform14 درسًا · 6 اختبارات
    1. مقدمة
    2. الإزاحة translate
    3. مختصر كتابي: Translate
    4. اختبار قصير: Translate
    5. التحجيم scale
    6. مختصر كتابي: Scale
    7. اختبار قصير: Scale
    8. التدوير rotate
    9. مختصر كتابي: Rotate
    10. اختبار قصير: Rotate
    11. الإمالة skew
    12. مختصر كتابي: Skew
    13. اختبار قسم Skew
    14. نقطة الأصل transform-origin
    15. مختصر كتابي: Transform origin
    16. اختبار قصير: Transform origin
    17. الجمع بين عدة عمليات تحويل
    18. مختصر كتابي: Combining multiple operations
    19. التحدي 1
    20. اختبار Transform
  5. 5
    الانتقالات Transitions21 درسًا · 3 اختبارات
    1. مقدمة
    2. مختصر كتابي: Introduction
    3. اختبار قصير: Introduction
    4. دوال التوقيت
    5. مختصر كتابي: Timing functions
    6. دالة التوقيت linear
    7. مختصر كتابي: Linear
    8. دالة التوقيت ease-out
    9. مختصر كتابي: Ease-out
    10. دالة التوقيت ease-in
    11. مختصر كتابي: Ease-in
    12. دالة التوقيت ease-in-out
    13. مختصر كتابي: Ease-in-out
    14. دالة التوقيت ease
    15. مختصر كتابي: Ease
    16. دالة التوقيت steps
    17. مختصر كتابي: Steps
    18. المنحنيات المخصصة
    19. مختصر كتابي: Custom curves
    20. التأخير
    21. مختصر كتابي: Delays
    22. اختبار قصير: Delays
    23. التحدي 2
    24. اختبار قسم Transitions
  6. 6
    الإطارات المفتاحية Keyframes11 درسًا · 5 اختبارات
    1. مقدمة
    2. الحركات المتدرجة
    3. مختصر كتابي: Step animations
    4. اختبار قصير: Step animations
    5. خاصية animation بالتفصيل
    6. مختصر كتابي: Animation property in depth
    7. اختبار قصير: Animation property in depth
    8. الحركات متعددة المراحل
    9. مختصر كتابي: Multi-step animations
    10. اختبار قصير: Multi-step animations
    11. التحويلات ثلاثية الأبعاد
    12. مختصر كتابي: 3D transform
    13. اختبار قصير: 3D transform
    14. كلمة أخيرة: استخدم الحركات بحذر
    15. التحدي 3
    16. اختبار قسم Keyframe
  7. 7
    الخاتمة
  1. الاختبار النهائي
    1. الاختبار النهائي للدورة
المعلم

تعلّم على يد م. محمد أبو سريع

  • م. محمد أبو سريع
    م. محمد أبو سريع

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

آراء الطلاب

ماذا قال الطلاب عن الدورة

التقييمات والمراجعات

5.0
متوسط التقييمات
12 عدد التقييمات
5
12
4
0
3
0
2
0
1
0
كيف كانت تجربتك؟ نود أن نعرف!
Mohamed Ahmed Helmy
تم النشر قبل 5 أشهر
ممتاز بلا مبالغة

تغطية شبه شاملة للمعلومات ومفيد ومنهج مرتب

محمد ابوعيسى
تم النشر قبل 6 أشهر
دورة ممتازة.

الرسوم المتحركه لمسه جذابه للمواقع.

لوجينا
تم النشر قبل 9 أشهر
الدورة مفيدة

الدورة مفيده لكن نتكني ان تضعوا solution للbonus بتوع challenges

Omar Gomaa
تم النشر قبل 9 أشهر
دورة ممتازه

في الحركة بركة الشرح جيد جداً - المعلومات بالنسبة لي مفيدة وجديدة - التدريبات شيقة ومبدعة. جزاكم الله جميعاً خيراً كثيراً.

Elsayed Bondok
تم النشر قبل 9 أشهر
في الحركة بركة

الشرح جيد جداً - المعلومات بالنسبة لي مفيدة وجديدة - التدريبات شيقة ومبدعة. جزاكم الله جميعاً خيراً كثيراً. https://sbondok.github.io/css-htm-course/

Mohamed Nasser Abdalla
تم النشر قبل 10 أشهر
تحريك احترافي وتجربة تعليمية سلسة

شرح الدورة واضح وممتع، ويُبرز أهمية التحريك في تحسين تجربة المستخدم. المحتوى منظم ويحفّز على التطبيق العملي بأسلوب احترافي.

Mahmoud Abayazeed omer
تم النشر قبل 11 شهرًا
ماشاءالله

perfect

Mohamed Tamer
تم النشر قبل سنة واحدة
صلي ع النبي

10/10

Ibrahim Salah
تم النشر قبل سنتين
رائعة

استفدت جدا منها

Ali Fadel
تم النشر قبل سنتين
التحديات عظيمة

التحديات كانت جميلة جدا للتطبيق على المعلومات.

لديك سؤال؟

الأسئلة الشائعة

 CSS Animations هي تقنيات تُمكّنك من إضافة حركات سلسة وتفاعلية إلى العناصر الموجودة في صفحات الويب دون الحاجة إلى JavaScript، ويمكن استخدامها لتحسين تجربة المستخدم وجعل المواقع أكثر جاذبية.

نعم، يُفضل أن يكون لديك فهم أساسي لـ CSS، لأن الدورة تعتمد على مبادئ CSS الأساسية وتبني عليها لتعليم تقنيات التحولات (Transforms) والحركات (Animations) وغيرهم. يمكنك التسجيل في دورة أساسيات CSS من هنــــا.

تعلم CSS Animations يضيف مهارة قيمة لمطوري الويب ويساعد في تحسين تصميم واجهات المستخدم (UI) وتجربة المستخدم (UX)، مما يجعل المواقع أكثر جاذبية وتفاعلاً.

معظم المتصفحات الحديثة تدعم CSS Animations، ولكن يُنصح دائماً بالتحقق من التوافق مع المتصفحات المختلفة لضمان تجربة سلسة.

ابدأ تعلم CSS Animations اليوم

اشتراك مدى الحياة، شهادة إتمام، ودعم من فريق المدرسة طوال رحلتك.

اشترك الآن
تصفح المنهج