CSS Animation, Javascript Animation, Tailwind for Web Design

أهلا بك عزيزي المتابع لموقع (journey for learn) نقدم دورات بكوبونات متاحة لاول 1000 تسجيل مجاني فقط وكوبونات اخري لفترة محدودة فاذا كنت تريد ان تحصل علي كل الكورسات علي موقعنا وان تكون اول المسجلين في الكورسات المجانية قم بتسجيل الدخول أوقم بالدخول علي وسائل التواصل الاجتماعي وخصوصا التليجرام نوضح الوصف المختصر والطويل للدورات لكي تعرف الدروس التي سوف تتعلمها بسهولة ويسر :

مرحبًا بك في دورة CSS Animation وJavascript Animation وTailwind لتصميم الويب. هذا برنامج تعليمي شامل لمصممي الويب ومطوري الويب المهتمين بتحريك مكونات الويب وتصميم مواقع الويب التفاعلية باستخدام HTML وCSS وJavascript وTailwind وPython. تعد هذه الدورة مزيجًا مثاليًا بين الرسوم المتحركة وتصميم الويب، مما يجعلها فرصة مثالية لممارسة مهاراتك في البرمجة مع تحسين معرفتك التقنية في تطوير الويب. في الجلسة التمهيدية، ستتعلم الأساسيات الأساسية للرسوم المتحركة على الويب، مثل التعرف على حالات الاستخدام والقيود الفنية والأنواع المختلفة من الرسوم المتحركة الشائعة الاستخدام في تصميم الويب. بعد ذلك، في القسم التالي، سنبدأ المشروع، في القسم الأول، سنبدأ بدروس CSS للرسوم المتحركة، وسنقوم بإنشاء مجموعة متنوعة من الرسوم المتحركة مثل الرسوم المتحركة النصية، والرسوم المتحركة العائمة، والرسوم المتحركة المرتدة، والرسوم المتحركة الدوارة، والتكبير في الرسوم المتحركة، والرسوم المتحركة بالأزرار، وانتقال لون الخلفية المتدرج، والرسوم المتحركة القائمة المنسدلة. سيعطيك هذا أساسًا متينًا في استخدام CSS لجعل عناصر الويب جذابة وتفاعلية بصريًا. بعد ذلك، في القسم الثاني، سنقوم بتحريك مكونات الويب باستخدام Javascript وAnime JS، وسنقوم بإنشاء مؤقت عد تنازلي متحرك بالكامل، وبعد ذلك، سنقوم بإنشاء مؤشر متحرك يتبع الماوس بتأثير الفقاعة العائمة، وسنقوم أيضًا بإنشاء رسوم متحركة ملونة متساوية القياس. سوف يدربك هذا على الجمع بين JavaScript ومكتبات الرسوم المتحركة بشكل فعال لتصميم تفاعلات سلسة وسريعة الاستجابة وجذابة للغاية تعمل على تحسين مشاركة المستخدم ورفع مستوى تجربة الويب الشاملة. ثم، في القسم الثالث، سنقوم بتصميم مواقع تفاعلية باستخدام Tailwind CSS، وعلى وجه التحديد، سنقوم بتصميم وتحريك صفحات حجز الطيران وصفحات التسعير. ستتضمن هذه التخطيطات انتقالات التمرير والأزرار المتحركة والتصميمات سريعة الاستجابة. في القسم الرابع، سنقوم بإنشاء رسوم متحركة جميلة باستخدام بايثون والسلحفاة، وسنقوم بإنشاء رسوم متحركة ملونة للتحميل الدوار ورسوم متحركة لشجرة متنامية يمكن استخدامها كعنصر خلفية زخرفي على صفحة الويب. بعد ذلك، في القسم الخامس، سنقوم بتحريك تصور البيانات باستخدام D3 JS، وعلى وجه التحديد، سنقوم ببناء مخطط شريطي يصور النمو السكاني لمدينة ما على مدى عشر سنوات، مكتملًا بالانتقالات المتحركة والعرض الديناميكي. سيوضح لك هذا كيفية تقديم البيانات المعقدة بشكل تفاعلي مع الحفاظ على واجهة مستخدم نظيفة وجذابة. وأخيرًا، في نهاية الدورة، سنقوم ببناء وتصميم صفحة منتج للتجارة الإلكترونية تتضمن رسومًا متحركة لبطاقات التقليب. سيعرض الجزء الأمامي من كل بطاقة صورة المنتج وعنوانه، بينما يكشف الجزء الخلفي عن وصف المنتج وسعره، بالإضافة إلى ذلك، سنقوم أيضًا بإنشاء زر متحرك لإضافة إلى سلة التسوق. قبل الدخول في الدورة التدريبية، نحتاج إلى طرح هذا السؤال على أنفسنا، لماذا يجب أن نتعلم عن الرسوم المتحركة على الويب؟ حسنًا، هذه هي إجابتي، تلعب الرسوم المتحركة دورًا حاسمًا في تصميم الويب الحديث. يمكن أن تساعد الرسوم المتحركة في توجيه انتباه المستخدم، وتعزيز التفاعل، وجعل مواقع الويب تبدو أكثر ديناميكية وجاذبية. فهو لا يعزز المظهر البصري فحسب، بل يضيف أيضًا العاطفة والشخصية إلى التجارب الرقمية، مما يجعلها لا تُنسى. بالإضافة إلى ذلك، من منظور الأعمال، يمكن أن يؤدي وجود موقع ويب متحرك بالكامل إلى تعزيز هوية العلامة التجارية وربما زيادة معدل التحويل. وفيما يلي بعض الأشياء التي يمكنك توقع تعلمها من هذه الدورة التدريبية:

• تعرف على الأساسيات الأساسية لرسوم الويب المتحركة، مثل التعرف على حالات الاستخدام والقيود الفنية والأنواع المختلفة من الرسوم المتحركة
• تعرف على كيفية إنشاء رسوم متحركة نصية باستخدام CSS
• تعرف على كيفية إنشاء رسوم متحركة للأزرار باستخدام CSS
• تعرف على كيفية إنشاء القائمة المنسدلة قائمة الرسوم المتحركة باستخدام CSS
• تعرف على كيفية إنشاء انتقال متدرج للون الخلفية باستخدام CSS
• تعرف على كيفية إنشاء رسوم متحركة عائمة ومرتدة باستخدام CSS
• تعرف على كيفية إنشاء رسوم متحركة تدوير وتكبير باستخدام CSS
• تعرف على كيفية إنشاء رسوم متحركة لمؤقت تنازلي باستخدام Javascript
• تعرف على كيفية إنشاء رسوم متحركة للمؤشر باستخدام Javascript
• تعرف على كيفية إنشاء رسوم متحركة متساوية القياس ملونة الرسوم المتحركة باستخدام Javascript
• تعرف على كيفية تصميم صفحة حجز الطيران باستخدام Tailwind CSS
• تعرف على كيفية تصميم صفحة التسعير باستخدام Tailwind CSS
• تعرف على كيفية إنشاء رسوم متحركة للتحميل الدوار باستخدام Python وTurtle
• تعرف على كيفية إنشاء رسوم متحركة للخلفية باستخدام Python وTurtle
• تعرف على كيفية تحريك تصور البيانات باستخدام D3 JS
• تعرف على كيفية تصميم منتج التجارة الإلكترونية وتحريكه الصفحة باستخدام CSS

ما هي المتطلبات الأساسية لدخول الدورة والتسجيل فيها على موقعنا؟ رحلة التعلم:

(احصل على الدورة للدخول إلى الموقع والتسجيل)

يجب أن يكون لديك بريد إلكتروني (حساب بريد) تتذكره لنفسك وأيضًا يجب أن تتذكر كلمة مرور البريد الإلكتروني الذي ستسجل به ، وإذا لم يكن لديك حساب بريد إلكتروني ، فمن الأفضل إنشاء حساب (Gmail)