مشاريع HTML و CSS عملية لتطوير مهاراتك في تطوير الواجهات

يواجه كل مبتدئ في مجال تطوير الواجهات الأمامية (frontend) هذه العقبة تقريباً.

تبدأ الدروس التعليمية في التداخل والتشوش. أنت تعرف ما هو الـ div. يمكنك إلقاء نظرة سريعة على ملف تنسيق (stylesheet) لشخص آخر وفهم ما يجري فيه. شاهدت ثلاثة فيديوهات عن Flexbox؟ تم بالفعل. ولكن عندما تفتح ملف index.html فارغاً وتجد المؤشر يرمش أمامك، يتوقف عقلك تماماً عن التفكير.

الحل ليس في مشاهدة درس تعليمي آخر. الحل هو البدء في مشروع.

مشروع صغير بما يكفي لإنجازه في عطلة نهاية الأسبوع، مع نتيجة ملموسة يمكنك عرضها على صديق. لن ترسخ مفاهيم HTML و CSS في ذهنك إلا عندما تكتب الأكواد بنفسك، وتُخربها، ثم تعود لتصلح ما خربته.

تُعد مسارات الـ HTML والـ CSS من أكثر المسارات نشاطاً على منصة Coddy. وأولئك الذين يستمرون لفترة كافية للشعور بالثقة في كتابة أكواد الواجهات الأمامية يفعلون شيئاً واحداً: ينهون مشاريع صغيرة بانتظام. لا ينتظرون حتى "يتعلموا بما فيه الكفاية"، بل يبنون، ويواجهون العقبات، ويبحثون عن الحلول، ثم يواصلون التقدم.

يقدم لك هذا الدليل 18 مشروعاً للـ HTML والـ CSS مرتبة حسب مستوى المهارة، بدءاً من موقع ذي صفحة واحدة وصولاً إلى معرض صور (carousel) يعتمد على CSS فقط. ليس المطلوب منك بناء كل هذه المشاريع؛ اختر واحداً منها في عطلة نهاية الأسبوع هذه وابدأ في تنفيذه.

لماذا تتفوق المشاريع العملية على الدروس التعليمية؟

قراءة الأكواد تمنحك شعوراً زائفاً بالإنتاجية، لكنها في الحقيقة ليست كذلك.

فقضاء شهر كامل في مشاهدة فيديوهات يوتيوب قد يتركك عاجزاً عن تصميم صفحة هبوط (landing page) بسيطة، لأن المشاهدة والكتابة تستخدمان مهارات مختلفة تماماً. الـ CSS تحديداً يتطلب الكتابة الفعلية ليرسخ في الذهن، لأن الكثير من تفاصيله تعتمد على تعديلات دقيقة وصغيرة لا تتعلمها حقاً إلا من خلال التجربة والخطأ.

كما أن المشاريع تجبرك على البحث أيضاً! فالعمل في تطوير الواجهات الأمامية يتكون من 30% كتابة كود و70% بحث في شبكة مطوري موزيلا (MDN)، وقراءة التوثيقات، ومحاولة معرفة سبب انحراف عنصر ما بمقدار بكسلين عن مكانه. والدروس التعليمية تخفي كل هذه التفاصيل تماماً.

الميزة الأخرى للمشاريع هي أنها تمنحك شيئاً ملموساً تشير إليه. فعبارة "أنا أتعلم HTML و CSS" لا تمنحك شعوراً كبيراً بالإنجاز، لكن عبارة "لقد صممت صفحة المطعم هذه، إليك الرابط" هي شيء يمكنك إرساله لصديق بفخر. هذا الشعور بـ "أنا من صنع هذا" هو ما يدفع الناس للاستمرار خلال الأسابيع الصعبة.

كيف تجهز بيئة العمل (تخطّ هذه الخطوة إذا كنت قد جهزتها بالفعل)

لا تحتاج إلى إعدادات معقدة للبدء في الـ HTML والـ CSS. كل ما تحتاجه هو هذه الأشياء الثلاثة:

1. محرر نصوص. يُعد VS Code الخيار الافتراضي لمعظم المطورين. إنه مجاني، وبمجرد أن تنجز بضعة مشاريع، ستجد إضافات مفيدة للـ CSS تستحق التثبيت.
2. متصفح إنترنت. أي متصفح تستخدمه حالياً يفي بالغرض. أدوات المطورين (بالنقر بزر الماوس الأيمن واختيار Inspect أو فحص) هي وسيلتك لتصحيح أخطاء التنسيق والتخطيط. تعود على استخدامها مبكراً.
3. مجلد خاص لكل مشروع. مجرد ملف index.html وملف style.css للبدء! لا تشغل بالك بأدوات البناء (build tools)، أو إطارات العمل (frameworks)، أو "أفضل الممارسات" في مشروعك الأول.

إذا كنت تفضل تخطي خطوة الإعداد، فإن دروس HTML ودروس CSS من Coddy تعمل مباشرة في المتصفح دون الحاجة لتثبيت أي شيء. هذا مفيد جداً عندما تريد التدرب على مفهوم معين دون الحاجة لإنشاء مشروع كامل. بخلاف ذلك، فإن مجلداً ومحرر نصوص كافيان تماماً.

مشاريع HTML و CSS للمبتدئين

تستخدم هذه المشاريع الخمسة الأساسيات فقط: العناوين، والفقرات، والصور، والقوائم، والروابط، مع لمسة بسيطة من الألوان والمسافات. بعد بضعة دروس في الـ HTML والـ CSS، ستتمكن من إنجاز أي منها في غضون ساعات قليلة.

1. صفحة تكريم (Tribute Page)

اختر شخصية تثير إعجابك (موسيقي، كاتب، رياضي، عالم) وابنِ صفحة تكريمية من صفحة واحدة. عنوان رئيسي كبير، صورة بارزة (hero image)، سيرة ذاتية قصيرة، جدول زمني لحياتهم، وقائمة روابط لمعرفة المزيد. يعتمد المشروع بأكمله على العناوين، والفقرات، والصور، والقوائم، وتنسيقات CSS الأساسية للخطوط والمسافات. إنه المشروع الكلاسيكي الأول في الـ HTML لسبب وجيه: لا يوجد شيء معقد هنا.

2. صفحة شخصية "عني" (About Me)

موقع شخصي من صفحة واحدة لتعريف الناس بنفسك. يتضمن صورتك، نبذة قصيرة عنك، قائمة باهتماماتك، وقسماً لطرق التواصل معك. ستحصل على نقاط إضافية إذا قمت بنشر الموقع على الإنترنت؛ منصة GitHub Pages مجانية ولا يستغرق النشر عليها سوى دقائق معدودة. الآن أصبح لديك رابط حقيقي يمكنك مشاركته مع الآخرين.

3. بطاقة وصفة طعام (Recipe Card)

صفحة لوصفة طعام تحتوي على صورة بارزة للطبق، وقائمة بالمكونات، وخطوات مرقمة للتحضير، ووقت التحضير معروض في صندوق تفاصيل صغير. يعلمك هذا المشروع الفرق بين القوائم المرتبة وغير المرتبة، والتحكم في أحجام الصور، وكيفية جعل الصفحة المليئة بالمحتوى تبدو منظمة ومريحة للعين بدلاً من أن تكون مكدسة.

4. صفحة نموذج اتصال (Contact Form)

صفحة تحتوي على نموذج اتصال: الاسم، البريد الإلكتروني، نص الرسالة، وزر الإرسال. لا يشترط أن يقوم النموذج بإرسال البيانات إلى أي مكان حالياً (فهذا دور لغة JavaScript). الهدف هنا هو التعرف على عناصر النماذج في HTML مثل (input و textarea و label و button) وتنسيقها بحيث لا تبدو بالشكل الافتراضي التقليدي للمتصفح. تظهر النماذج في كل مشروع واجهات أمامية تقريباً، لذا فإن إتقانها الآن سيوفر عليك الكثير لاحقاً.

5. قائمة طعام بسيطة لمطعم (Restaurant Menu)

قائمة طعام من صفحة واحدة لمطعم وهمي. تحتوي على تصنيفات (المقبلات، الأطباق الرئيسية، الحلويات)، مع اسم كل طبق ووصف قصير له. أضف لافتة بارزة (hero banner) في الأعلى وتذييلاً (footer) صغيراً يحتوي على أوقات العمل. يساعدك هذا المشروع على التدرب على تقسيم المحتوى إلى أقسام، وتكرار التنسيقات، واختيار نظام ألوان متناسق ومترابط.

مشاريع متوسطة (Flexbox، و Grid، والتخطيطات)

هنا ستبدأ في تنظيم العناصر بشكل صحيح، والتعامل مع أقسام متعددة، لتصل في النهاية إلى صفحة تشبه تماماً المواقع الحقيقية التي تراها على الإنترنت. تعتمد معظم هذه المشاريع على Flexbox أو CSS Grid، وهي المهارات الأساسية التي تحتاج إلى تطويرها وتدريب نفسك عليها.

6. صفحة هبوط لمنتج وهمي (Landing Page)

اختر منتجاً (تطبيقاً، أو أداة برمجية SaaS، أو شركة لبيع الشموع، أو أي شيء آخر) وابنِ صفحة هبوط شبيهة بالصفحات الرئيسية للمواقع التجارية. قسم بارز (Hero section) يحتوي على عنوان رئيسي وزر اتخاذ إجراء (call-to-action). يليه قسم يعرض ثلاث ميزات للمنتج، ثم قسم لآراء العملاء (Testimonials)، وأخيراً تذييل يحتوي على روابط مهمة. هذا المشروع بمثابة تمرين مكثف على استخدام Flexbox و Grid، بالإضافة إلى كونه درساً في توزيع المسافات والتسلسل الهرمي البصري.

7. موقع معرض أعمال شخصي (Portfolio)

صفحة متعددة الأقسام تعرض أعمالك، حتى لو كانت "أعمالك" حالياً مجرد صفحتين تكريميتين وبطاقة وصفة طعام. يتكون الموقع من ترويسة (Header) تحتوي على شريط التنقل، وقسم بارز، وشبكة لعرض المشاريع، وقسم "عني"، وقسم للتواصل. استخدم نظام Grid لتخطيط شبكة المشاريع، ونظام Flexbox لشريط التنقل والقسم البارز.

هذا المشروع مفيد للغاية حتى لو كنت تعتقد أنك لست بحاجة لمعرض أعمال بعد؛ فعندما تبدأ في التقديم على وظائف أو العمل الحر، سيكون معرض أعمالك جاهزاً بالفعل.

8. جدول أسعار (Pricing Table)

ثلاثة مستويات للأسعار معروضة جنباً إلى جنب، كل منها في بطاقة خاصة تحتوي على الاسم، وقائمة الميزات، وزر اتخاذ إجراء (CTA). أضف تمييزاً مثل "الأكثر شيوعاً" على البطاقة الوسطى. تبدو جداول الأسعار بسيطة لكنها مليئة بالتفاصيل الدقيقة المخادعة: بطاقات متساوية الارتفاع، وقوائم نقطية محاذية بدقة، وتأثيرات التمرير (hover) على الأزرار. إنه تمرين ممتاز على Flexbox.

9. الصفحة الرئيسية لمدونة (Blog Homepage)

دليل لمدونة يحتوي على: ترويسة مع شريط تنقل وبحث، مقال مميز في الأعلى، شبكة من المقالات الأخيرة في الأسفل، شريط جانبي (sidebar) يحتوي على التصنيفات والتعليقات الأخيرة، وتذييل في النهاية. يعلمك هذا المشروع كيفية التعامل مع تخطيط محتوى يحتوي على مناطق متعددة، وهو ما يشبه إلى حد كبير تصميم المواقع الحقيقية في سوق العمل.

10. صفحة تسجيل الدخول وإنشاء الحساب (Login & Signup)

صفحتان مترابطتان، إحداهما لتسجيل الدخول والأخرى لإنشاء حساب جديد، تحتوي كل منهما على نموذج متمركز في المنتصف، وترويسة تحمل شعار الموقع، وروابط للتنقل بين الصفحتين. التحدي هنا هو تصميم واجهة تبدو احترافية وأنيقة دون مبالغة. أفضل صفحات تسجيل الدخول هي تلك التي تتميز بمحاذاة دقيقة وتصميم مريح يفوق توقعات المستخدم. هذا التمرين ممتاز لصقل ذوقك التصميمي.

11. نموذج لوحة تحكم ثابتة (Dashboard Mockup)

تخطيط لوحة تحكم ثابتة: شريط تنقل جانبي على اليسار، شريط علوي يحتوي على معلومات المستخدم، ومنطقة محتوى رئيسية تضم بعض بطاقات الإحصاءات، ومكاناً مخصصاً للرسم البياني، وقائمة بالأنشطة الأخيرة. لا توجد تفاعلية هنا؛ فهذا مشروع تخطيط بحت. يتولى نظام Grid الجزء الأكبر من العمل. بنهاية هذا المشروع، ستفهم تماماً سبب وجود CSS Grid، ولماذا يستمر من لم يجربوه بعد في الشكوى من صعوبة التخطيط وتنسيق العناصر.

مشاريع تأثيرات وحركات CSS (CSS Animations)

وصلنا الآن إلى الجزء الممتع! مشاريع أصغر حجماً ولكنها تركز بشكل مكثف على الـ CSS. وهي ممتازة لتعلم الانتقالات (transitions)، والإطارات الرئيسية (keyframes)، والتحويلات (transforms)، والفئات الزائفة (pseudo-classes) مثل :hover و :focus.

12. مؤشر تحميل متحرك (Loading Spinner)

مؤشر تحميل يعتمد على CSS فقط. جرب تصميم عدة أشكال: حلقة دوارة، ثلاثة نقاط تقفز، دائرة تنبض، أو شريط تقدم يمتلئ بشكل متكرر. يتطلب كل شكل حوالي 15 سطراً من كود CSS، ويعلمك كيفية استخدام @keyframes و animation و transform.

13. معرض صور مع تأثيرات عند التمرير (Hover Effects)

شبكة من الصور تظهر عليها كتابة توضيحية بانتقال سلس عند تمرير مؤشر الماوس فوقها. جرب تأثيرات مختلفة: طبقة تظهر بالانزلاق (sliding overlay)، تكبير الصورة (zoom)، أو فلتر ألوان يتلاشى تدريجياً. هذا هو المشروع الذي يفهم من خلاله معظم المطورين كيفية عمل الـ transition بشكل عملي، كما ستتعلم فيه كيفية ترتيب العناصر فوق بعضها باستخدام position: absolute.

14. شريط تنقل متحرك (Animated Navigation Bar)

شريط تنقل يحتوي على شعار على اليسار وعناصر القائمة على اليمين، حيث يظهر خط تحت عناصر القائمة عند تمرير الماوس بحركة انزلاقية، وتظل الصفحة النشطة محددة بخط تحتها. على الهواتف المحمولة، تتقلص القائمة لتصبح أيقونة "هامبرغر" تفتح قائمة منسدلة. هذا النمط ستستخدمه طوال مسيرتك المهنية: حالات متحركة للعناصر التفاعلية، بالإضافة إلى التصميم المتجاوب مع مختلف أحجام الشاشات.

15. بطاقة ثلاثية الأبعاد تلتف بالـ CSS (Card Flip)

بطاقة تلتف حول نفسها عند تمرير الماوس لتكشف عن محتوى في الخلف (مقولة، تعريف، أو تفاصيل إضافية). يستخدم هذا المشروع خاصيتي transform: rotateY و backface-visibility؛ وهما من خصائص CSS التي قد لا تستخدمها كثيراً ولكنها تبدو كالسحر في المرة الأولى التي تنجح فيها في تطبيقها. مشروع سريع، لكنه يمنحك دفعة ثقة كبيرة.

16. معرض صور منزلق يعتمد على CSS فقط (CSS-Only Slider)

معرض صور ينزلق أفقياً مع أزرار للتحكم (السابق/التالي)، مبني بالكامل باستخدام CSS دون أي سطر JavaScript. تكمن الحيلة في استخدام أزرار الاختيار (radio buttons) المخفية خارج الشاشة والمحدد :checked لتبديل الصورة المعروضة. نمط ذكي يعلمك مدى قوة الـ CSS وما يمكنك إنجازه بها بمفردها قبل اللجوء إلى JavaScript. يستحق التجربة ولو لمرة واحدة حتى لو كنت تفضل بناءه بـ JavaScript عادةً.

مشاريع HTML و CSS متقدمة

هذه المشاريع الأخيرة مخصصة عندما تصبح الأساسيات روتينية بالنسبة لك وتبحث عن تحدٍ حقيقي. لا تزال تعتمد على HTML و CSS فقط (دون الحاجة للغة JavaScript)، ولكنها ستختبر مهاراتك في التخطيط، والدقة، والصبر.

17. تقليد صفحة رئيسية لموقع شهير (Clone Homepage)

اختر موقعاً حقيقياً (الصفحة الرئيسية لـ Netflix، أو صفحة هبوط Spotify، أو صفحة منتجات Apple لجهاز معين) وأعد بناء الجزء المرئي منه باستخدام HTML و CSS بأكبر قدر ممكن من الدقة. لا داعي لجعل الصفحة تعمل بشكل تفاعلي، بل ركز فقط على مطابقة التخطيط، والخطوط، والمسافات، والألوان.

ستقضي ساعات تتساءل كيف حصلوا على تلك المسافات الداخلية (padding) الدقيقة، ثم ستتعلم كيف تُقاس الشبكات، وتبدأ في ملاحظة قرارات التخطيط والتصميم في كل موقع تزوره. يتحدث مطورو الواجهات الأمامية دائماً عن أهمية هذا النوع من التمارين لسنوات.

18. فن الـ CSS (CSS Art)

ارسم شيئاً باستخدام عناصر div والـ CSS فقط. لقد تمكن البعض من تصميم رسومات وتفاصيل مذهلة بهذه الطريقة: شخصيات كرتونية، مناظر طبيعية، حيوانات، وحتى صور شخصية (portraits). ابدأ بشيء بسيط مثل كوب قهوة، أو وجه مبتسم، أو روبوت بسيط.

قد يبدو الأمر غير مألوف في البداية حتى تجربه بنفسك؛ لتكتشف أنه درس مكثف في خصائص مثل position و border-radius و box-shadow والتدرجات اللونية (gradients) والـ transform. بنهاية هذا التمرين، ستفهم الـ CSS بمستوى لا يصل إليه معظم المبتدئين، وكل ذلك بمجرد محاولتك رسم دائرة داخل مستطيل.

أين يأتي دور منصة Coddy؟

تم تصميم دروس HTML ودروس CSS من Coddy لسد الفجوة بين "أريد تعلم هذا" وبين "أستطيع بناء مشروع". تستغرق كل حصة حوالي خمس دقائق فقط، تكتب خلالها كوداً حقيقياً في المتصفح، ويكون المساعد الذكي Bugsy بجانبك عندما تواجه مشكلة، مثل عدم معرفة سبب عدم توسيط العنصر عمودياً باستخدام margin: auto.

تم بناء الهيكل التعليمي بالكامل حول التدريب اليومي المستمر. خمس دقائق هنا، وخمس دقائق هناك؛ وهو نفس الأسلوب الذي يدفع الناس لفتح تطبيقات تعلم اللغات كل صباح، ولكنه مطبق هنا على البرمجة. إذا سبق لك وأن تراجعت عن إكمال دورة تعليمية ذاتية عند وصولك لـ 30% منها، فإن هذا الأسلوب التعليمي المبسط والمجزأ هو على الأرجح ما كان ينقصك.

تتوفر مسارات الـ HTML والـ CSS بالكامل في الخطة المجانية، لجميع الدروس ودون الحاجة لأي إعدادات مسبقة. هذا الأمر يدهش الكثيرين؛ فلن تواجه جدار دفع (paywall) في منتصف طريقك لتعلم Flexbox!

بعض العادات المفيدة التي ستساعدك

قبل أن تختار مشروعك وتبدأ، إليك ثلاثة أشياء صغيرة تصنع فارقاً كبيراً بشكل مدهش:

استخدم أدوات المطورين في المتصفح. انقر بزر الماوس الأيمن على أي عنصر، واختر Inspect (فحص)، وانظر إلى لوحة التنسيقات (styles panel). يمكنك تعديل الـ CSS مباشرة في المتصفح لرؤية النتيجة فوراً. إنها أفضل أداة لتصحيح الأخطاء ستستخدمها على الإطلاق، وهي مجانية ومتاحة في كل متصفح بالفعل.

ابدأ التصميم للهواتف أولاً (Mobile-First). اكتب أكواد CSS للشاشات الصغيرة أولاً، ثم أضف استعلامات الوسائط (media queries) لتجعل التصميم يبدو رائعاً على الشاشات الأكبر. العكس دائماً ما يكون أصعب. هذا هو الأسلوب المتبع في معظم أكواد الواجهات الأمامية الحديثة، لذا فإن التعود عليه الآن سيوفر عليك إعادة كتابة الأكواد لاحقاً.

أطلق النسخة الأولية البسيطة أولاً. اجعل الصفحة تعمل أولاً باستخدام محتوى مؤقت وتنسيقات أولية بسيطة، ثم قم بتحسين المظهر لاحقاً. الخطأ الشائع الذي يقع فيه الكثير من المبتدئين هو قضاء ثلاث ساعات في تصميم زر مثالي قبل أن يكتشفوا أن تخطيط الصفحة بالكامل لا يعمل بشكل صحيح، مما يضطرهم لإعادة كل شيء من الصفر.

ماذا تبني بعد ذلك؟

إذا أنهيت مشروعاً وشعرت أن الخطوة التالية واضحة بالنسبة لك، فهذه علامة ممتازة؛ أنت جاهز!

اختر المشروع التالي من هذه القائمة وابدأ فوراً. لا تنتظر حتى تشعر بأنك "مستعد بما فيه الكفاية"، لأن هذا الشعور لا يأتي أبداً. ستلاحظ فقط في يوم من الأيام أنك قمت ببناء ستة مشاريع، وأن المشروع السابع يبدو سهلاً وممكناً.

إذا كنت محتاراً في اختيار مشروعك التالي، فاختر المشروع الذي تشعر تجاهه ببعض الرهبة. فالقفزات الحقيقية في مستوى المهارة تحدث عندما تخرج من منطقة راحتك وتتحدى نفسك، وليس عندما تكرر ما تتقنه بالفعل.

وإذا واجهت عقبات في الأساسيات (مثل عدم استجابة المحددات selectors، أو انهيار التنسيقات، أو عدم عمل Flexbox)، فابتعد عن المشروع مؤقتاً لبعض الوقت وركز على بعض الدروس المحددة لسد هذه الفجوة المعرفية.

تم تصميم مسارات الـ HTML والـ CSS في Coddy لهذا الغرض تحديداً؛ تدريب قصير ومستهدف على المفهوم الذي تواجه صعوبة فيه، لتتمكن بعدها من العودة لمشروعك ومواصلة العمل بثقة.