في هذا المشروع، تم تزويدي بصورة تصميم ثابتة وطلب مني تحويل مقال خام داخل Gutenberg باستخدام Custom HTML إلى تصميم احترافي جاهز للنشر.
ما جعل المشروع أكثر تميزا هو القيود المفروضة، حيث كان مطلوب تحقيق نتيجة بصرية عالية الجودة باستخدام CSS فقط، بدون التعديل على القالب أو الإضافات، وبدون التأثير على أي صفحة أخرى داخل الموقع.
بدأت بعزل المقال باستخدام wrapper مخصص، ثم قمت بإعادة بناء التصميم خطوة بخطوة ليطابق الشكل المطلوب. شمل ذلك تحسين الخطوط، المسافات، هيكل المحتوى، والتدرج البصري ليصبح المقال أكثر وضوحًا وسهولة في القراءة.
بدلاً من الاعتماد على عناصر جاهزة، قمت بإعادة بناء نظام التصميم بالكامل باستخدام CSS. جميع العناصر مثل البطاقات، الأقسام، الأزرار، ومكونات المحتوى تم تصميمها من الصفر للحصول على مظهر متناسق واحترافي.
من أبرز النقاط في هذا المشروع كان قسم الأسئلة الشائعة. احتاج العميل إلى Accordion بدون استخدام JavaScript، فقمت بتنفيذه بالكامل باستخدام CSS فقط عن طريق تقنية checkbox. هذا الحل حافظ على خفة الصفحة وحسن الأداء مع توفير تجربة تفاعلية سلسة.
كما ركزت بشكل كبير على الاستجابة لمختلف الشاشات، حيث يتكيف التصميم بسلاسة مع جميع الأحجام باستخدام Flexbox وGrid وتقنيات القياس المرن. الهدف لم يكن فقط مطابقة التصميم على سطح المكتب، بل تقديم تجربة قوية على الموبايل أيضًا.
تمت كتابة الأكواد مع مراعاة الأداء وسهولة الصيانة، حيث أن CSS منظم ومحصور بشكل يمنع أي تعارض أو تأثير غير مقصود على باقي الموقع.
ما قمت بتسايمه:
تصميم مطابق بشكل كبير للصورة المرجعية مع تحسين قابلية القراءة
CSS نظيف ومحصور تم تطبيقه من خلال إعدادات ووردبريس
تصميم متجاوب بالكامل على جميع الأجهزة
Accordion للأسئلة الشائعة باستخدام CSS فقط بدون JavaScript
تنسيق منظم وسهل التعديل والصيانة
عدم التأثير على أي صفحات أو تنسيقات عامة داخل الموقع
Technical details
ووردبريس باستخدام Gutenberg وCustom HTML
استخدام CSS فقط من خلال Additional CSS
Flexbox وGrid لبناء الهيكل
استخدام clamp للخطوط والمسافات المرنة
عزل التنسيقات باستخدام wrapper مخصص لمنع التعارض
....
كان يُستخدم كبيئة اختبار بيني وبين العميل قبل تنفيذ العمل على موقع ووردبريس الخاص به، وذلك للتأكد من أن جميع العناصر والتنسيقات تعمل بشكل صحيح قبل الإطلاق النهائي.
