محتوى صفحة ال Html
في موقع Codepen لا تحتاج أبدا لوضع جميع محتويات صفحة ال HTML في الجزء الخاص بال HTML وكل ما عليك هو وضع محتوى ال body فقط شاهد الصور لتعرف الصواب من الخطأ
أما لو احتجت وضع أي شيء داخل عنصر ال head كل ما عليك هو الضغط على Icon ال Gear بجانب كلمة HTML وسوف تظهر لك الخيارات التالية وسوف يتم شرحها كلها
رقم 1
إذا كنت تعلمت واحد من ال Template Engines المشهورة الخاصة بلغة HTML مثلا HAML, Pugjs, Slim يمكنك إختياره من هنا لتكتب ال Code بهرقم 2
إذا أردت وضع أي Class معين على عنصر ال html يمكنك وضعه هنا على سبيل المثال إذا أردت وضغ أكثر من كلاس قم بوضع مسافة بينهم هكذا my-class my-class-two وسوف تجد النتيجة هكذارقم 3
إذا أردت وضع أي شيء داخل عنصر ال head يمكنك وضعه هنا مثلا واحد من عناصر ال meta أو عنصر ال style أو أي شيء يتم وضعه داخل عنصر ال head شاهد المثالرقم 4
إذا ضغطت على هذا السطر سوف يقوم بوضع أهم عناصر ال Meta الخاصة بال Vieweport تلقائيامحتوى صفحة ال CSS
لا يوجد أي شيء غريب كل ما عليك هو كتابة Code ال CSS كما تعودت عليه بدون أي مشكلة والآن ندخل إلى إعدادات ال CSS بالضغط على Icon ال Gear بجانب كلمة CSS لنقوم بشرح جميع المميزات
رقم 1
إذا كنت تعلمت واحد من ال PreProcessors المشهورة الخاصة بلغة CSS مثلا SASS, LESS, Stylus يمكنك إختياره من هنا لتكتب ال Code بهرقم 2
يمكنك إختيار واحد من ال Reset المشهورة التي تجعل الصفحة تعرض العناصر بشكل طبيعي مثل ال Reset وال Normalizeرقم 3
يمكنك إختيار واحد من ال Auto Prefixer الذي يقوم بوضع ال Prefix الخاصة بخواص CSS3 تلقائيا بدون أن تضعها بنفسك فبدلا من كتابة ال Prefix بنفسك كما في المثال التالي كل ما عليك هو كتابة الخاصية فقط وهو يقوم بالباقيرقم 4
إذا أردت إستدعاء واحدة من المكتبات المشهورة لمساعدتك في التصميم كل ما عليك هو كتابة اسمها في البحث وبعد أن تظهر لك قم بالضغط عليها وسوف يقوم بإستدعاء هذه المكتبة لتساعدك في عملكرقم 5
نفس الخيار السابق ولكن بدلا من البحث في المكتبات العالمية يمكنك إستدعاء أي مكتبة أو ملف Style في أي مكان عن طريق وضعه في خانة المصادر الخارجية ومكنك وضع أي عدد تريده ويمكنك ترتيبهم كما تحب عن طريقة Icon ال Order الموجودة بجانب حقل الإدخالرقم 6
لإضافة حقل إدخال جديد لوضع ملف Style إضافي للمشروعمحتوى صفحة ال JS
أنت مطور محترف ولا تحتاج لإعادة شرح ما تم شرحه, 🙂 كل ما تم شرحه في خانة ال CSS ينطبق على خانة ال JS بدون أي فرق
تفاصيل ال Pen
وهي عبارة عن معلومات تحتوي على تفاصيل ال Code ألخاص بك ووصف له وسوف يتم شرح كل نقطة
رقم 1
إسم ال Pen وهو مهم للوصول إليه ومعرفة محتواه وحتى تتعود على النظام ويكون عملك منظم يمكنك تسميته مثلاMy Front-End Task Number 01
رقم 2
الوصف الخاص بال Pen لتوضيح كل ما يخصه فيه مثال أن تقوم أنه تطبيق على فيديو معين على قناة Youtube معينة وتضع الروابط مثلا أو أن تقول أنه تطبيق لمحاضرة معينة في جامعة معينة وهكذا ليكون عملك احترافي ومنظمرقم 3
ال Tags تساعد الناس للوصول لل Pen من البحث إذا كنت تستعملها بشكل جيد فمثلا أنت قمت بعمل Animation لصورة بشكل ظريف يمكنك وضع ال Tags المعبرة عن هذا العمل وتفصل بينهم بعلامة “,” لتضع أكثر من Tag ليكونوا مثلا بهذا الشكلanimation, front-end, image-, effects, css3
خانة السلوك Behavior
وهي الإعدادات الخاصة بال Pen وكيف يتم التعامل معها أثناء كتابة ال Code
رقم 1
هو الخيار الذي يقوم بعمل حفظ لل Pen تلقائيا كل 30 ثانية بدلا من أن تقوم أنت كل فترة بعمل حفظرقم 2
هذا الخيار إذا قمت بتفعيله يقوم بعمل تحديث للمحتوى تلقائيا وأنت تكتب فكلما قمت بعمل تغيير يظهر لك فورا في خانة ال Previewرقم 3
هذا الخيار يقوم بعمل تنسيق Formatting لل Code عندما تقوم بعمل حفظ وإذا كنت محترف في مجالك فأنت لا تحتاج له لأن الطبيعي أن تكون متمكن من تنسيق ال Code أثناء الكتابة ولا تحتاج لمساعدةإعدادات المحرر Editor
هنا سوف تقوم بتغيير إعدادات محرر ال Code وهناك إعدادات بسيطة وإعدادات متقدمة في لوحة تحكم موقع Codepen نفسه
رقم 1
تقوم بإختيار المسافات في ال Code التي تسمى ( Indentation ) إما ب Space أو Tab مثل محرر ال Code ألعادي في جهازك وتختار هل هي 2 أم 4 والغالبية الآن بسبب أن ال Code أصبح أكبر يستخدموا 2 ولكن هذا راجع لكرقم 2
من هذا الخيار يمكنك التحكم في الإعدادات العامة للمحرر مثل الموجود في جهازك تماما مثل تغيير ألوان ال Theme والتحكم في ال Syntax Highlights والخطوط وكل ما يخص ال Codeرقم 3
هنا سوف تجد جولة رائعة جدا لتجربة ال Pen وكتابة ال Code وسوف توضح لك الكثير والكثير باذن اللهنظام القالب الثابت Template
مع نظام ال Template يمكنك عمل قالب مسبق تستخدمه في كل مشاريعك المستقبلية فمثلا أنت دائما تستعمل مكتبة معينة واطار عمل معين وتضع Classes معينة في كل Pen تقوم بإنشائها ولذلك مع نظام ال Template يمكنك جعل هذه ال Pen قالب ثابت كلما أردت بدأ مشروع معين تستخدم هذه ال Pen مباشرة بدون الحاجة لتكرار كل ما تقوم فعمله كل مرة.
تنظيم العمل بواسطة Collections
عندما تتعمق في هذا المجال سوف تجد أنك قمت بعمل الكثير من ال Pens على الموقع وأعمالك سوف تزداد يوما بعد يوم وفي حالة عدم وجود تنظيم لن تستطيع العثور على ما تريد بسهولة وهنا يأتي دور ال Collection والذي يتيح لك تنظيم أعمالك داخل مجموعات فمثلا في المثال يمكنك عند عمل أي Pen أن تختار Add To Collection وبعدها يمكنك إضافة ال Pen لمجموعة معينة حسب نوعها أو يمكنك إنشاء Collection جديد وإضافتها فيه مباشرة ويمكنك تنظيم أعمالك على سبيل المثال لمجموعات كالتالي
Draw With CSS
Animation
SVG
Full Templates
Mobile Designs
Draw With CSS
Animation
SVG
Full Templates
Mobile Designs
تغيير شكل الصفحة Layout
يمكنك هنا التحكم في شكل الصفحة الكلي وتغييره لما هو مناسب لك وهذه من المميزات الجميلة التي تسمح لك مثلا أن تقوم بكتابة ال Code في واحدة من الشاشات وعلى الشاشة الأخرى تقوم بعرض الصفحة كاملة لترى التصميم بدون Code وهي ميزة جميلة جدا وتوفر عليك الوقت
Editor View
وهو الوضع العادي الذي ترى فيه ال Code ومعه شكل التصميم PreviewDetails View
ومن إسمها هي صفحة التفاصيل التي ترى فيها تفاصيل ال Pen كاملة ومعها أيضا شكل التصميم Preview وأيضا رابط لمشاركة ال Pen والكثيرFull Page View
وهو شكل التصميم الكامل بدون وجود مكان لل Code ولا للتفاصيل لتستطيع مشاهدته بشكل كامل ومازال هناك البار العلوي الذي يمكنك من تغيير ال View كما تريدDebug View
نفس الوضع السابق ولكن مع عدم وجود أي إضافة على الصفحة بمعنى الصحة كاملة تشاهدها بدون أي شيء إضافي عليها ولا البار العلوي ولا أي شيءEdit Layout
أما الخانة الأخيرة فهي تشرح كل شيء وهي لتغيير مكان ال Code لما هو مناسب لك
بعد الإنتهاء من كتابة كل شيء قم بعمل حفظ لل Pen وقم بإعطاء الرابط لأي شخص للمشاهدة
في حالة كنت تحب الشروحات الفيديو هناك شرح كامل فيديو على الرابط التالي
How To Deal With Codepen Features
How To Deal With Codepen Features