تعلم CSS Animations
هل سبق لك أن ضغطت على زر أو فتحت نافذة على موقع ما، ولاحظت حركة سلسة تجعل التجربة أكثر حيوية؟ هذا ما توفره CSS Animations.
- +500طالب
- 27درس
- 8أقسام
- 15اختبار
- متوسطالمستوى
تعرّف على الدورة
هل سبق لك أن ضغطت على زر أو فتحت نافذة على موقع ما، ولاحظت حركة سلسة تجعل التجربة أكثر حيوية؟ هذا ما توفره CSS Animations! إنها التقنية التي تضيف الشكل الجمالي والحيوية إلى المواقع وتجعل التفاعل معها أكثر انسيابية وراحة للمستخدمين.
ما هي CSS Animations ولماذا هي مهمة؟
CSS Animations هي تقنية تتيح لك إضافة حركات وانتقالات (Transitions) بصرية للمواقع بطريقة سلسة وطبيعية. هذه الحركات البسيطة تلعب دورًا كبيرًا في تحسين تجربة المستخدم، حيث تجعل التفاعلات أكثر وضوحًا وتوفر شعورًا طبيعيًا أثناء التنقل بين الصفحات والعناصر، وهذا ما تفعله شركة مثل Apple، حيث تعتمد على الحركات لجعل تجربة المستخدم على موقعها مبهرة.
من خلال هذه الدورة، ستتعلم كيف يمكنك استخدام هذه التقنية لرفع مستوى تصميمات موقعك وتقديم تجارب مستخدم استثنائية مثل مواقع الشركات الرائدة في العالم.
لماذا يجب أن تتعلم CSS Animations؟
- تحسين تجربة المستخدم: إضافة الحركات البسيطة تجعل موقعك أكثر جاذبية وسهل الاستخدام.
- زيادة التفاعل: من خلال التفاعلات البصرية، يمكنك توجيه المستخدمين بشكل أفضل وتحسين تفاعلهم مع الموقع.
- تعزيز مهاراتك كمطور فرونت إند: إضافة الأنيميشن إلى مشاريعك تميزك عن الآخرين وتجعلك قادرًا على تقديم تصميمات احترافية ومتقدمة ستنفعك في معرض أعمالك (Portfolio).
لماذا تشترك في هذه الدورة؟
- محتوى شامل: مصمم ليأخذك من البداية إلى الاحتراف عبر فيديوهات تفاعلية وملخصات وامتحانات.
- خبرة المحاضر: المدرب لديه خبرة واسعة في مجال تصميم وتطوير مواقع وتطبيقات الويب، وعمل في كبرى الشركات العالمية.
- دعم مستمر: فريقنا المتخصص سيكون معك للإجابة على جميع تعليقاتك على أي درس موجود بالدورة.
- اشتراك مدى الحياة: تستطيع الوصول لمحتوى الدورة وتحديثاتها مدى الحياة وفي أي وقت.
اشترك الآن وابدأ رحلتك في عالم الأنيميشن الاحترافي مع دورة CSS Animations!
تشمل الدورة
- شهادة موثقة
- قياس مستوى التقدم والانجاز عبر الدورة
- إجابة من مشرفي الطلاب على كل الأسئلة
- فاعليات حصرية
- شارات تميز للطلبة المتقدمين
- اشعارات تذكير وتحفيز لإنهاء الدورة
- اشتراك مدى الحياة
ماذا ستتعلم خطوة بخطوة
اضغط على أي قسم لعرض دروسه. الدروس المجانية متاحة للمشاهدة قبل الاشتراك.
محتوى الدورة
- 1Introduction
- 2Course Materials
- 3Prepare Your Workspace
- 4Transform14 درسًا · 6 اختبارات
- Introduction
- Translate
- مختصر كتابي: Translate
- اختبار قصير: Translate
- Scale
- مختصر كتابي: Scale
- اختبار قصير: Scale
- Rotate
- مختصر كتابي: Rotate
- اختبار قصير: Rotate
- Skew
- مختصر كتابي: Skew
- اختبار القسم: Skew
- Transform Origin
- مختصر كتابي: Transform origin
- اختبار قصير: Transform origin
- Combining Multiple Operations
- مختصر كتابي: Combining multiple operations
- Challenge 1
- اختبار: Transform
- 5Transitions21 درسًا · 3 اختبارات
- Introduction
- مختصر كتابي: Introduction
- اختبار قصير: Introduction
- Timing Functions
- مختصر كتابي: Timing functions
- Linear
- مختصر كتابي: Linear
- Ease-out
- مختصر كتابي: Ease-out
- Ease-in
- مختصر كتابي: Ease-in
- Ease-in-out
- مختصر كتابي: Ease-in-out
- Ease
- مختصر كتابي: Ease
- Steps
- مختصر كتابي: Steps
- Custom Curves
- مختصر كتابي: Custom curves
- Delays
- مختصر كتابي: Delays
- اختبار قصير: Delays
- Challenge 2
- اختبار القسم: Transitions
- 6Keyframes11 درسًا · 5 اختبارات
- Introduction
- Step Animations
- مختصر كتابي: Step animations
- اختبار قصير: Step animations
- The Animation Property in Depth
- مختصر كتابي: Animation property in depth
- اختبار قصير: Animation property in depth
- Multi-step Animations
- مختصر كتابي: Multi-step animations
- اختبار قصير: Multi-step animations
- 3D Transforms
- مختصر كتابي: 3D transform
- اختبار قصير: 3D transform
- Final Words: Use Animations Carefully
- Challenge 3
- اختبار القسم: Keyframe
- 7Conclusion
- الاختبار النهائي
- الاختبار النهائي
تعلّم على يد م. محمد أبو سريع
م. محمد أبو سريعمهندس برمجيات ذو خبرة أكثر من عشر سنوات في كبرى شركات الخليج وأوروبا. يعمل حاليًا ككبير مهندسي البرمجيات في شركة رائدة في مجال تصنيع الأدوية والتكنولوجيا الحيوية. لديه خبرة كبيرة في تطوير الواجهات الأمامية، بجانب خبرته في إلقاء المحاضرات في الجامعات المختلفة، وقناته التعليمية على اليوتيوب التي يشرح فيها البرمجة وعلومها بطريقة مبسطة.
ماذا قال الطلاب عن الدورة
التقييمات والمراجعات
محمد ابوعيسىالرسوم المتحركه لمسه جذابه للمواقع.
الدورة مفيده لكن نتكني ان تضعوا solution للbonus بتوع challenges
في الحركة بركة الشرح جيد جداً - المعلومات بالنسبة لي مفيدة وجديدة - التدريبات شيقة ومبدعة. جزاكم الله جميعاً خيراً كثيراً.
الشرح جيد جداً - المعلومات بالنسبة لي مفيدة وجديدة - التدريبات شيقة ومبدعة. جزاكم الله جميعاً خيراً كثيراً. https://sbondok.github.io/css-htm-course/
شرح الدورة واضح وممتع، ويُبرز أهمية التحريك في تحسين تجربة المستخدم. المحتوى منظم ويحفّز على التطبيق العملي بأسلوب احترافي.
perfect
10/10
استفدت جدا منها
التحديات كانت جميلة جدا للتطبيق على المعلومات.
دورة جميله جدا تطبيق علمى وشرح مبسط جميل ، بارك الله فيكم
Muhammad Ahmadالحمد لله رب العالمين كانت دورة ممتعة عجبني استخدام أمثلة عملية، بحيث تقدر تشوف النتيجة بشكل مباشر مع عدم اهمال الشرح النظري وضرب الامثلة والمونتاج المتعوب عليه. كمان كان فيه تحديات تطبيقية تساعد على الفهم بشكل أفضل.
الأسئلة الشائعة
CSS Animations هي تقنيات تُمكّنك من إضافة حركات سلسة وتفاعلية إلى العناصر الموجودة في صفحات الويب دون الحاجة إلى JavaScript، ويمكن استخدامها لتحسين تجربة المستخدم وجعل المواقع أكثر جاذبية.
نعم، يُفضل أن يكون لديك فهم أساسي لـ CSS، لأن الدورة تعتمد على مبادئ CSS الأساسية وتبني عليها لتعليم تقنيات التحولات (Transforms) والحركات (Animations) وغيرهم. يمكنك التسجيل في دورة أساسيات CSS من هنــــا.
تعلم CSS Animations يضيف مهارة قيمة لمطوري الويب ويساعد في تحسين تصميم واجهات المستخدم (UI) وتجربة المستخدم (UX)، مما يجعل المواقع أكثر جاذبية وتفاعلاً.
معظم المتصفحات الحديثة تدعم CSS Animations، ولكن يُنصح دائماً بالتحقق من التوافق مع المتصفحات المختلفة لضمان تجربة سلسة.
ابدأ تعلم CSS Animations اليوم
اشتراك مدى الحياة، شهادة إتمام، ودعم من فريق المدرسة طوال رحلتك.
تغطية شبه شاملة للمعلومات ومفيد ومنهج مرتب