كيفية البدء في مشروع صفحة الإشادة على freeCodeCamp: دليل عملي للمبتدئين
Aldawsari مقدمة: كيف تبدأ أول مشروع لك في freeCodeCamp بثقة؟
يُعد مشروع صفحة الإشادة في freeCodeCamp من أفضل المشاريع التمهيدية لتطبيق أساسيات HTML وCSS بشكل عملي. ورغم أن متطلبات المشروع تبدو بسيطة، فإن كثيراً من المبتدئين يتوقفون عند فهم التعليمات، أو التعامل مع CodePen، أو اجتياز الاختبارات المطلوبة.
في هذا الدليل ستتعرف على طريقة عملية ومنظمة للبدء، مع نصائح مهمة تساعدك على إنهاء المشروع بطريقة صحيحة، وبأسلوب واضح يراعي تجربة المستخدم وجودة الكود في الوقت نفسه.
فهم تعليمات مشروع صفحة الإشادة
هل يجب نسخ النموذج المعروض؟
الإجابة المختصرة: لا. عندما تنص التعليمات على إنشاء مشروع مشابه من حيث الوظيفة، فالمقصود هو أن يحقق مشروعك نفس المتطلبات التقنية ويجتاز الاختبارات، وليس أن تنسخ التصميم أو المحتوى حرفياً.
هذا يعني أنه يمكنك اختيار شخصية مختلفة، وصياغة محتوى خاص بك، واستخدام صور وألوان وتنسيق يعكس أسلوبك. المهم هو الالتزام بالمتطلبات الأساسية التي يختبرها النظام.
هل تحتاج إلى JavaScript أو Bootstrap أو Sass؟
في هذا المشروع، لا تحتاج إلا إلى HTML وCSS. وإذا كانت لديك خبرة سابقة في أدوات أخرى مثل JavaScript أو Bootstrap أو Sass، فيمكنك استخدامها إن رغبت، لكنها ليست شرطاً لإكمال المهمة بنجاح.
ومن الأفضل للمبتدئ أن يركز أولاً على بناء الصفحة بالأساسيات، لأن ذلك يساعده على فهم البنية والمنطق المطلوبين دون تعقيد إضافي.
ما هو CodePen وكيف تستخدمه؟
CodePen هو محرر أكواد يعمل عبر المتصفح، ويُستخدم بكثرة في المشاريع التعليمية والتجارب السريعة على صفحات الويب. وهو خيار مناسب جداً لمشاريع freeCodeCamp لأنه يتيح لك كتابة HTML وCSS وJavaScript ورؤية النتيجة مباشرة.
كيفية إنشاء حساب مجاني على CodePen
يمكنك التسجيل في CodePen مجاناً باستخدام إحدى طرق التسجيل المتاحة. بعد إنشاء الحساب، ستتلقى عادة رسالة بريد إلكتروني لتأكيد عنوانك.
ما الفرق بين Pen وProject؟
يوفر CodePen نوعين أساسيين من بيئات العمل:
Pen: محرر بسيط يحتوي عادة على ثلاثة أقسام فقط:HTMLوCSSوJavaScript. وهذا هو الخيار الأنسب لمشاريعfreeCodeCamp.Project: بيئة أكثر مرونة تدعم ملفات متعددة منHTMLوCSSوJavaScript.
في الخطة المجانية، يمكنك إنشاء عدد كبير من Pens، بينما يكون عدد Projects محدوداً.
يمكنك كتابة الكود مباشرة داخل المحررات ومشاهدة النتيجة فوراً في نافذة المعاينة.
ميزات مفيدة داخل CodePen
من الميزات المهمة في CodePen إمكانية تغيير تخطيط واجهة المحرر بما يناسب طريقة عملك.
كما يوفّر أداة لتنسيق الكود تلقائياً، وهي ميزة مفيدة جداً لتحسين قابلية القراءة وتسهيل مراجعة الشيفرة.
قبل تنسيق الكود:
بعد تنسيق الكود:
ومن الأدوات المفيدة أيضاً أداة التحليل، التي تساعدك على اكتشاف بعض الأخطاء أثناء كتابة المشروع.
ملاحظة مهمة حول الوسوم الأساسية في CodePen
عند العمل داخل CodePen، لست بحاجة إلى كتابة الوسوم الأساسية مثل <!DOCTYPE html> و<html> و<head> و<body>، لأن المحرر يتعامل معها تلقائياً في الخلفية.
وإذا احتجت إلى إضافة روابط أو إعدادات خاصة بقسم head، فيمكنك فعل ذلك من إعدادات HTML داخل المحرر.
هل يجب استخدام CodePen حصراً؟
لا، استخدام CodePen ليس إلزامياً. إذا كنت تفضّل محرراً آخر مثل Visual Studio Code أو أي بيئة تطوير محلية، فيمكنك بناء المشروع هناك. لكن يجب الانتباه إلى طريقة إضافة نظام الاختبارات ومتطلبات التسليم لاحقاً.
ما هي Test Suite ولماذا هي مهمة؟
وفّرت freeCodeCamp مجموعة اختبارات جاهزة تُعرف باسم Test Suite، ووظيفتها التأكد من أن مشروعك يحقق جميع المتطلبات المذكورة في قصص المستخدم.
من خلال القائمة المنسدلة يمكنك اختيار المشروع الذي تعمل عليه، ثم الضغط على Run Tests لمعرفة عدد الاختبارات التي تم اجتيازها.
وإذا ظهرت لك اختبارات فاشلة، فانقر على زر Tests لعرض رسائل الخطأ كاملة. قراءة الرسالة كاملة أمر مهم جداً، لأن كثيراً من المبتدئين يضيّعون الوقت في التخمين، بينما تكون الإشارة إلى المشكلة موجودة بالفعل داخل وصف الخطأ.
كيفية إضافة Test Suite داخل CodePen
- سجّل الدخول إلى حسابك.
- افتح رابط القالب المخصص للاختبارات.
- احفظ النسخة في حسابك عبر خيار
Save. - تأكد بعد الحفظ من أن رابط الصفحة يتضمن اسم المستخدم الخاص بك.
بعد ذلك يجب أن تظهر لك نسخة جاهزة قابلة للتعديل ضمن حسابك.
هذه النقطة مهمة جداً: إذا حاولت إرسال رابط القالب الأصلي نفسه دون حفظه ضمن حسابك، فلن يتم قبول المشروع.
كيفية إضافة Test Suite في محرر خارجي
إذا كنت تستخدم محرراً محلياً مثل Visual Studio Code، فستحتاج إلى تضمين رابط CDN الخاص بالاختبارات داخل وسم script قبل إغلاق وسم body.
يشير مصطلح CDN إلى Content Delivery Network، وهي طريقة لتحميل الملفات من شبكة توزيع محتوى خارجية.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo Tribute Page</title>
</head>
<body>
<p>I just added the test suite in VS Code</p>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
</html>كيف تتعامل مع User Stories بذكاء؟
ما المقصود بـ User Stories؟
User Stories أو قصص المستخدم هي وصف للوظائف التي يجب أن يوفّرها المشروع. وفي مشروع صفحة الإشادة توجد تسع متطلبات رئيسية يجب تحقيقها حتى ينجح المشروع.
أفضل طريقة للتعامل معها هي تنفيذ المتطلبات أولاً ثم الانتقال إلى تنسيق الصفحة لاحقاً. هذا الترتيب يوفر عليك وقتاً كبيراً، لأنك تضمن أن البنية الأساسية صحيحة قبل تحسين المظهر.
ابدأ متطلباً واحداً في كل مرة
لا تحاول حل كل شيء دفعة واحدة. ركّز على كل قصة مستخدم على حدة، وتأكد من نجاحها في الاختبارات قبل الانتقال إلى التالية. هذا الأسلوب يقلل من التشتت ويسهّل عليك معرفة سبب الخطأ إذا ظهر لاحقاً.
ماذا تفعل إذا لم تفهم أحد المتطلبات؟
إذا واجهت قصة مستخدم غير واضحة، فابحث عنها في منتدى freeCodeCamp. كثير من الأسئلة التي يواجهها المبتدئون سبق طرحها والإجابة عنها بالتفصيل.
يمكنك الاستفادة من البحث حتى دون إنشاء حساب، لكن إنشاء حساب في المنتدى يمنحك فرصة طرح سؤالك مباشرة إذا لم تجد إجابة مناسبة.
استخدام البحث في Google مهارة أساسية للمطور
من أهم المهارات التي يجب أن يطوّرها أي مبرمج هي معرفة كيفية البحث الجيد. ليس المطلوب أن تحفظ كل شيء، بل أن تعرف كيف تصل إلى الحل الصحيح بسرعة وتقيّم المصادر المناسبة.
على سبيل المثال، من المتطلبات الشائعة في هذا المشروع:
- أن تتغير أبعاد الصورة بشكل متجاوب مع عرض العنصر الأب.
- أن تكون الصورة متمركزة داخل الحاوية الخاصة بها.
إذا بحثت في Google عن كيفية جعل الصورة متجاوبة باستخدام CSS، أو عن طريقة توسيط الصورة، فستجد شروحاً كثيرة تساعدك على فهم الفكرة وتطبيقها.
نصائح عملية لتنسيق صفحة الإشادة
بعد اجتياز جميع الاختبارات، يمكنك الانتقال إلى تحسين الشكل البصري للصفحة. وهنا من المهم أن تتذكر أن الهدف من المشروع ليس إنتاج تصميم احترافي معقّد من أول محاولة، بل بناء صفحة مرتبة وسهلة القراءة وتُظهر فهمك للأساسيات.
اجعل التصميم بسيطاً وواضحاً
- استخدم ألواناً متناسقة وغير مزعجة للعين.
- احرص على وضوح النص وتباين الخلفية مع المحتوى.
- تجنب الإفراط في الحركات والمؤثرات البصرية.
- قسّم الصفحة إلى أقسام منطقية يسهل تتبعها.
أفكار يمكنك تطويرها باستخدام CSS
إذا أردت تحسين شكل الصفحة، فهذه بعض الأفكار التي يمكنك البحث عنها وتطبيقها تدريجياً:
- إنشاء صور دائرية أو بحواف مستديرة.
- إضافة خطوط من
Google Fonts. - استخدام صورة خلفية مناسبة.
- تطبيق حركات بسيطة عبر
CSS animations. - بناء معرض صور باستخدام
CSS Grid.
لكن تذكّر دائماً أن هذه الإضافات اختيارية، وليست معيار نجاح المشروع. الأولوية يجب أن تكون لصحة البنية وسهولة الاستخدام.
كيفية إرسال المشروع بعد الانتهاء
عندما تنتهي من المشروع وتتأكد من نجاح جميع الاختبارات، ستحتاج إلى إرساله للحصول على الاعتماد.
- انسخ رابط مشروعك.
- انتقل إلى صفحة تعليمات مشروع صفحة الإشادة في
freeCodeCamp. - ألصق الرابط في خانة
Solution Link. - اضغط على خيار إكمال التحدي.
- أرسل المشروع ثم انتقل إلى التحدي التالي.
أما إذا أنشأت المشروع في محرر خارجي مثل Visual Studio Code، فغالباً ستحتاج إلى نقله إلى CodePen لنسخ رابط جاهز للإرسال، إلا إذا كنت تستخدم خدمة استضافة مباشرة مثل GitHub Pages وتملك خبرة في Git وGitHub.
المعيار الأهم هنا هو إرسال رابط حي يعمل بشكل صحيح ويمكن فتحه واختباره.
أفضل الممارسات لإنجاز المشروع بنجاح
- ابدأ بفهم المطلوب قبل كتابة أي كود.
- أنشئ البنية الأساسية أولاً، ثم راجع الاختبارات.
- نفّذ قصص المستخدم واحدة تلو الأخرى.
- استخدم البحث والمنتديات عند التوقف.
- حافظ على كود منظم وسهل القراءة.
- لا تنشغل بالتصميم قبل استكمال المتطلبات الوظيفية.
- راجع رابط المشروع جيداً قبل الإرسال.
الخلاصة التقنية
مشروع صفحة الإشادة في freeCodeCamp ليس اختباراً للتصميم بقدر ما هو تدريب عملي على فهم المتطلبات، وبناء هيكل HTML صحيح، وتطبيق أساسيات CSS بطريقة مدروسة. من الناحية التقنية، أفضل أسلوب لإنجازه هو الفصل بين مرحلتين واضحتين: أولاً تحقيق جميع User Stories واجتياز Test Suite، ثم تحسين المظهر لاحقاً. هذا النهج يمنحك تقدماً ثابتاً، ويؤسس لديك عادة مهمة في التطوير وهي بناء الوظيفة قبل التجميل.