CSS Layout and Animations Training course دورة تخطيط CSS والرسوم المتحركة
مترجمة للعربية

تركز هذه الدورة على تخطيط CSS والرسوم المتحركة. أريد اليوم أن
أوضح لك كيف يمكنك تخطيط التصميمات الصعبة ببساطة باستخدام شبكة CSS و Flexbox.
سنركز أيضًا على إنشاء واجهة مستخدم جذابة عن طريق إضافة رسوم متحركة CSS.
سنستخدم CodePen لتخطيط أجزاء من التصميم لموقع يسمى Letter.

نضرة عامة حول Intro To CSS Layout and Animations

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

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

مذا ستتعلم من هذه الدورة CSS Layout and Animations Training course

إن الدماغ البشري منصب بالاهتمام بالأشياء المتحركة. الرسوم
المتحركة موجودة في مواقع الويب. من انتقالات الأزرار الدقيقة إلى رواية القصص
الكاملة عبر الإنترنت. في هذه الدورة ، سنبني نموذجًا أوليًا لواجهة
المستخدم في CodePen باستخدام CSS Grid و Flexbox. سوف تساعدك على تعلم
أساسيات تحويلات CSS والرسوم المتحركة. باستخدام مكتبة الرسوم المتحركة جافا
سكريبت GSAP. لتحقيق أقصى استفادة من هذه الدورة ، من الجيد أن يكون لديك بعض
المعرفة بـ CSS و HTML للمساعدة في تجاوز تعقيد بعض المفاهيم

الشبكة و Flexbox

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

الرسوم المتحركة CSS

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