9.2 KiB

Raw Blame History

مهمة إعادة هيكلة CSS

الهدف

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

فهم متى وكيفية استخدام طرق التخطيط المختلفة هو مهارة أساسية لتطوير الويب الحديث. هذا التمرين يربط بين تقنيات التمركز التقليدية وأنظمة تخطيط CSS المعاصرة.

تعليمات المهمة

المرحلة الأولى: التحليل والتخطيط

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

المرحلة الثانية: التنفيذ

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

المرحلة الثالثة: الاختبار والتوثيق

اختبار عبر المتصفحات - تحقق من أن التصميم يعمل في Chrome وFirefox وEdge وSafari.
اختبار الاستجابة - تحقق من التخطيط على شاشات الهواتف المحمولة والأجهزة اللوحية وأجهزة سطح المكتب.
التوثيق - أضف تعليقات إلى CSS تشرح اختيارات التخطيط الخاصة بك.
لقطات الشاشة - التقط صورًا للتيراريوم في متصفحات وأحجام شاشات مختلفة.

المتطلبات التقنية

تنفيذ التخطيط

اختر واحدة فقط: قم بتنفيذ Flexbox أو CSS Grid (ليس كلاهما لنفس العناصر).
تصميم استجابي: استخدم الوحدات النسبية (rem, em, %, vw, vh) بدلاً من البكسل الثابت.
إمكانية الوصول: حافظ على هيكل HTML دلالي صحيح ونصوص بديلة.
جودة الكود: استخدم تسميات متسقة ونظم CSS بشكل منطقي.

ميزات CSS الحديثة التي يجب تضمينها

/* Example Flexbox approach */
.terrarium-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.plant-containers {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
}

/* Example Grid approach */
.terrarium-layout {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  gap: 1rem;
}

متطلبات دعم المتصفحات

Chrome/Edge: آخر إصدارين.
Firefox: آخر إصدارين.
Safari: آخر إصدارين.
متصفحات الهواتف المحمولة: iOS Safari، Chrome Mobile.

المخرجات المطلوبة

ملف HTML محدث مع هيكل دلالي محسّن.
ملف CSS معاد هيكلته باستخدام تقنيات التخطيط الحديثة.
مجموعة لقطات الشاشة تظهر التوافق عبر المتصفحات:
- عرض سطح المكتب (1920x1080)
- عرض الجهاز اللوحي (768x1024)
- عرض الهاتف المحمول (375x667)
- على الأقل في متصفحين مختلفين.
ملف README.md يوثق:
- اختيارك للتخطيط (Flexbox مقابل Grid) وأسبابك.
- التحديات التي واجهتها أثناء إعادة الهيكلة.
- ملاحظات حول توافق المتصفحات.
- تعليمات لتشغيل الكود الخاص بك.

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

المعايير	ممتاز (4)	جيد (3)	متوسط (2)	مبتدئ (1)
تنفيذ التخطيط	استخدام متقن لـ Flexbox/Grid مع ميزات متقدمة؛ استجابة كاملة	تنفيذ صحيح مع سلوك استجابي جيد	تنفيذ أساسي مع مشاكل استجابة بسيطة	تنفيذ غير مكتمل أو غير صحيح
جودة الكود	CSS نظيف ومنظم جيدًا مع تعليقات ذات معنى وتسميات متسقة	تنظيم جيد مع بعض التعليقات	تنظيم مقبول مع تعليقات قليلة	تنظيم ضعيف؛ صعب الفهم
التوافق عبر المتصفحات	اتساق مثالي عبر جميع المتصفحات المطلوبة مع لقطات الشاشة	توافق جيد مع اختلافات بسيطة موثقة	بعض مشاكل التوافق التي لا تؤثر على الوظائف	مشاكل توافق كبيرة أو اختبارات مفقودة
التصميم الاستجابي	نهج استجابي ممتاز مع نقاط توقف سلسة	سلوك استجابي جيد مع نقاط توقف مناسبة	ميزات استجابة أساسية مع بعض مشاكل التخطيط	سلوك استجابة محدود أو معطل
التوثيق	README شامل مع تفسيرات ورؤى مفصلة	توثيق جيد يغطي جميع العناصر المطلوبة	توثيق أساسي مع تفسيرات قليلة	توثيق غير مكتمل أو مفقود

موارد مفيدة

أدلة طرق التخطيط

أدوات اختبار المتصفحات

أدوات جودة الكود

تحديات إضافية

🌟 تصاميم متقدمة: قم بتنفيذ Flexbox وGrid في أجزاء مختلفة من التصميم. 🌟 دمج الرسوم المتحركة: أضف انتقالات أو رسوم متحركة CSS تعمل مع التخطيط الجديد. 🌟 الوضع الداكن: قم بتنفيذ مفتاح تبديل الثيم باستخدام خصائص CSS المخصصة. 🌟 استعلامات الحاوية: استخدم تقنيات استعلامات الحاوية الحديثة للحصول على استجابة على مستوى المكونات.

💡 تذكر: الهدف ليس فقط جعل التصميم يعمل، بل فهم لماذا طريقة التخطيط التي اخترتها هي الحل الأفضل لهذا التحدي التصميمي!

إخلاء المسؤولية:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي Co-op Translator. بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.

9.2 KiB Raw Blame History