نظرة عامة على CodePen
CodePen ضمن قسم البرمجة. وصف البطاقة أعلاه من الدليل، ومقدمة القسم الطويلة تبقى في صفحة القسم حتى لا تتكرر على كل أداة.
بقلم فريق كيف؟
آخر تحديث: 25 أكتوبر 2026 · سياسة التحرير
كودبن لتجربة صفحة صغيرة ترى نتيجتها فورًا لا لموقع ينزل للناس
البطاقة تصف CodePen كساحة لـ HTML وCSS وJavaScript مع معاينة ومشاركة. الصفحة لتجربة فكرة واحدة: زر، أو بطاقة، أو تخطيط. ليست استضافة لمتجر ولا مكانًا لأسرار التطبيق.
الرابط الذي تشاركه قد يراه غيرك إن جعلت القلم عامًا. لا تضع مفتاحًا أو عنوان عميل في الكود.
مثال: بطاقة منتج يتغير لونها عند المرور
تتعلم الصفحة الأولى وتريد أن ترى بنفسك ماذا يفعل لون الحدود. لا تريد إطار عمل كاملًا ولا بناء مشروع إنتاج.
- اكتب في تعليق أعلى الملف ماذا ستجرب في جملة. إن عجزت عن الجملة فالتعديل عشوائي.
- ادخل من زر الصفحة إلى كودبن وتأكد من النطاق. افتح قلمًا جديدًا وقسّم الهيكل عن التنسيق عن السلوك إن وُجد.
- ضع عناصر قليلة ترى حدودها. عينات طويلة منسوخة من مشروع لا تفهم سطر الخطأ فيها.
- غيّر خاصية واحدة ثم انظر المعاينة. إن كسرت التخطيط فارجع عن ذلك التغيير قبل أن تجرب ثانيًا.
- حين تعمل البطاقة سمِّ القلم باسم التجربة. احذف المفاتيح الوهمية التي تشبه الحقيقية حتى لا تنسخها لاحقًا إلى مشروع.
- شارك الرابط مع زميل للتعلم فقط بعد أن تتأكد أن لا بيانات خاصة في اللوحات.
انقل ما فهمته إلى تمرين صفحة واحدة على جهازك حين تريد حفظ العمل خارج الساحة. القلم تجربة لا أرشيف الشركة.
المعاينة ليست إطلاقًا
سرعة القلم لا تعني أن الموقع سيتحمل الزوار أو الدفع أو تسجيل الدخول. تلك مسائل مشروع لا ساحة.
ما يُحفظ في الحساب المجاني أو غيره ظاهر في إعدادات كودبن. لا نحدده هنا.
لا تلصق مشروع زبون
كود فيه رابط خاص أو كلمة سر لا يدخل ساحة قد تُنشر.
لا تنسخ قلمًا كاملًا وتسلمه كواجب من غير أن تغيّر السطر الذي طُلب منك فهمه.
مرجع أو بيئة أو تمرين أطول
- كيف أبدأ تعلم HTML
بطاقة دبليو ثري سكولز لمرجع مبتدئ مع تجربة. اقرأ مثال الخاصية هناك ثم عدّل في قلمك سطرًا واحدًا.
- كيف أبرمج تطبيق React أونلاين
بطاقة كود ساندبوكس لبيئة تطبيقات جافاسكربت أحدث. انتقل إليها حين تكبر التجربة عن ملف واحد مفهوم.
- كيف أكتب كود أونلاين
بطاقة ريبليت لبيئة في المتصفح من غير إعداد. أنسب حين تريد تشغيل لغة لا تعرضها ساحة الصفحة الأمامية.
ابنِ على تمرين صفحة واحدة كما في تعلم البرمجة بمشروع صفحة واحدة. القسم: البرمجة. إن صار العمل ملفاتًا وتشغيلًا لا شكل زر، فاختيار البيئة في صفحة Replit.
ملخص بمساعدة الذكاء الاصطناعي
من إعداد فريق كيف؟ لفهم CodePen بسرعة
CodePen هي ساحة لعب تفاعلية لتجربة أكواد HTML وCSS وJavaScript مباشرة في المتصفح. مثالية للمطورين والمصممين لاختبار الأفكار ومشاركة النماذج الأولية مع المجتمع.
خطوات سريعة
- افتح موقع codepen.io وأنشئ حسابًا مجانيًا.
- اضغط على زر 'Start Coding' أو 'Create New Pen'.
- في قسم HTML اكتب هيكل الصفحة، وفي قسم CSS أضف الأنماط.
- شاهد النتيجة فورًا في نافذة المعاينة أسفل الكود.
- احفظ العمل بالضغط على 'Save' وأضف عنوانًا ووصفًا.
- انسخ رابط الـ Pen لمشاركته مع الآخرين.
- استخدم خيار Fork لتعديل مشروع موجود كنقطة بداية.
متى تستخدمها؟
- لتجربة شريحة CSS جديدة قبل دمجها في مشروع حقيقي.
- لإنشاء نموذج أولي سريع لواجهة مستخدم ومشاركته مع فريق العمل.
- لتعلم تقنيات ويب جديدة عن طريق تعديل أكواد موجودة في CodePen.
- لإظهار خطأ برمجي لشخص آخر مع كود مباشر يعيد إنتاجه.
نصائح ذهبية
- استخدم وضع 'Debug' لإظهار أخطاء الكود في وحدة التحكم.
- استفد من مكتبات CSS الجاهزة مثل Bootstrap عبر إضافتها من إعدادات الـ Pen.
- فعّل خيار 'Auto-update Preview' لتحديث المعاينة تلقائيًا مع كل تغيير.
احذر من
- الحساب المجاني يحد من عدد الـ Pens الخاصة والمساحة التخزينية.
- الكود المنشور علنيًا يمكن لأي شخص رؤيته ونسخه، فلا تضع معلومات حساسة.
- لا يدعم CodePen لغات الخادم مثل PHP أو قواعد البيانات، فهو مخصص للواجهة الأمامية فقط.
أُعدّ هذا الملخص بواسطة فريق كيف؟ بمساعدة الذكاء الاصطناعي. يُراجع ويُحدَّث وفق سياسة التحرير. آخر تحديث: 24 أكتوبر 2026. هذه ليست مراجعة بشرية لكل زر في موقع الأداة، والتفاصيل التي تتغير تُراجع على الموقع الرسمي.
أسئلة شائعة عن CodePen
هل أستضيف موقع عميلي على CodePen؟
لا. الساحة للتجربة والمشاركة التعليمية. الموقع الذي يدفع الناس إليه يحتاج استضافة تراجعها وتتحكم بنسخها.
المعاينة في CodePen تختلف عن متصفحي. أيهما أصدق؟
جرّب الصفحة في المتصفح الذي يستخدمه من يرى العمل. المعاينة داخل الساحة دليل سريع لا شهادة نهائية.
وضعت مفتاح واجهة في قلم CodePen عام بالخطأ. ماذا أفعل؟
ألغِ المفتاح من جهة الخدمة فورًا، واحذف القلم أو اجعله خاصًا، ثم أصدر مفتاحًا جديدًا لا يُكتب في الساحة.
أنسخ قلم CodePen جاهزًا لمهمة الصف؟
اقرأ الشرط، ثم أعد كتابة الجزء المطلوب بيدك. التسليم المنسوخ من غير فهم يظهر عند أول سؤال من المعلم.
مشابه في البرمجة
عرض الكلكيف أحسن مهاراتي البرمجية
تحديات برمجية في كل المجالات مع شهادات.
كيف أنشر موقعي على الإنترنت
أسرع طريقة لنشر مواقع Next.js و React بدون إعدادات.
كيف أعرف خطوات تعلم البرمجة
خرائط تعلم تفاعلية لكل مجال برمجي: ويب، موبايل، DevOps، AI، وغيرها.
كيف أتعلم تطوير الويب من الصفر مجانًا
مسار تعليم متكامل ومجاني لتطوير الويب من الصفر إلى الاحتراف.
أجهزة مرتبطة بالمهمة
أجهزة لمن يكتب الكود على الكمبيوتر. ليست مراجعة، والسعر والمواصفات على أمازون.
شاشة Ultrawide
شاشة عريضة لفتح المحرر والمتصفح معًا أثناء كتابة الكود.
كيبورد ميكانيكي لاسلكي
لوحة مفاتيح إذا كنت تكتب على الكمبيوتر ساعات.
ماك بوك إير M
جهاز محمول لفتح المحرر خارج المكتب. المواصفات الحالية على صفحة المتجر.
قرص SSD خارجي محمول
قرص خارجي لنسخ مشاريع البرمجة احتياطيًا بجانب النسخة على جهازك.
قد نحصل على عمولة عند الشراء عبر روابط أمازون دون أي تكلفة إضافية عليك.