منصة CodePen هي عبارة عن مجتمع إلكتروني خاص بالمصممين والمطورين لعرض مهاراتهم في الترميز واستخدام أكواد لغات البرمجة ومشاركة الأفكار والتقنيات وعرض أعمالهم. ويشتمل النظام الأساسي على محرر كود عبر الإنترنت يستخدمه المصممون والمطورون للترميز بلغات HTML و CSS و JavaScript. كما يمكن للمطورين إنشاء مقتطفات واختبارها من التعليمات البرمجية، والتي تعرف باسم «الأقلام».
محتويات
كيف يمكنني إنشاء حساب CodePen؟
- انتقل إلى صفحة CodePen الرئيسية.
- ثم انقر فوق “تسجيل” الموجودة في الزاوية العلوية اليمنى.
- وتأكد من كتابة النموذج عبر الإنترنت.
- ثم انقر فوق “إرسال”.
هل CodePen مجاني الاستخدام؟
يمكنك التسجيل لاستخدام CodePen مجانًا، لكن سيقتصر التسجيل على مشروع واحد فقط يحتوي على 10 ملفات. ويمكنك استخدام محرر الكود عبر الإنترنت مجانًا أيضًا.
ما هو الفرق بين الأقلام والمشاريع؟
أقلام
بعد التحقق من عنوان بريدك الإلكتروني، يجب أن يتم نقلك مباشرة إلى محرر القلم. وإذا لم يظهر المحرر، فيمكنك النقر فوق القلم الموجود على الجانب الأيسر من الصفحة الرئيسية..
المشاريع
- إذا كنت ترغب في إنشاء مشروع، فانقر على Project، الموجود في أعلى يسار الصفحة الرئيسية.
- يدعم محرر المشروع العديد من ملفات HTML و CSS و JavaScript.
باستخدام الحساب المجاني، يمكنك امتلاك مشروع واحد و 10 ملفات فقط. إذا كنت مهتمًا بإنشاء المزيد من المشاريع، فستحتاج إلى الترقية إلى حساب Pro.
اقرأ أيضًا:
- إيقاف تشغيل الوضع الآمن على هاتف Android أو الجهاز اللوحي
- طرق إصلاح كاميرا iPhone إذا كانت ضبابية أو مشوشة
- ما هي أنواع لغات البرمجة المختلفة؟
المزايا الأساسية لمحرر الأقلام في codepen
خيارات التنسيق
- إذا قمت بالنقر فوق سهم القائمة المنسدلة، فسترى خيارًا لتنسيق التعليمات البرمجية الخاصة بك.
- وتعد من الأدوات المفيدة للتأكد من أن التعليمات البرمجية الخاصة بك منسقة بشكل صحيح وقابلة للقراءة من قبل باقي المطورين.
خيار التحليل
- إذا قمت بالنقر فوق سهم القائمة المنسدلة، فسترى خيارًا لتحليل التعليمات البرمجية الخاصة بك.
- هذه أداة ستساعدك في العثور على الأخطاء وإصلاحها في التعليمات البرمجية الخاصة بك.
إضافة روابط لقسم الرأس (HTML)
- عند إنشاء الأقلام، لا يتعين عليك تضمين علامات DOCTYPE أو html أو head أو body. كل هذه المعلومات مضمنة بالفعل في المحرر.
- إذا كنت بحاجة إلى إضافة روابط لقسم الرأس مثل أيقونات Font Awesome أو Google Fonts، فيمكنك إضافة تلك الروابط في القسم الرئيسي لإعدادات HTML.
إضافة CSS
- يحتوي CodePen على خيار في الإعدادات لإضافة مكتبات CSS وأطر عمل إلى أقلامك. تتضمن بعض المكتبات وأطر العمل Bootstrap و Tailwind CSS و Bulma.
كم سعر الاشتراك في منصة CodePen Pro؟
تتراوح تكلفة الاشتراك في CodePen Pro حوالي 26 دولار أمريكي شهريًا.
ما هي بعض بدائل CodePen؟
- JSFiddle.
- CodeSandbox.
- replit.
- Codeply.
- Gun.io.
- Techfetch.
- Hackajob.
المصدر
