32 – العمل مع مشاريع حقيقية (Real Projects) – المستوى الثالث
📌 14. العمل مع مشاريع حقيقية (Real Projects)
🎯 1. إنشاء صفحة شخصية (Portfolio)
الـ Portfolio هو موقع صغير تعرف فيه بنفسك، مهاراتك، وأعمالك.
أي مبرمج أو مصمم لازم يكون عنده.
مكونات الصفحة:
-
Header فيه صورتك أو اسمك.
-
قسم “من أنا” (About Me).
-
قسم المهارات (Skills).
-
قسم الأعمال/المشاريع (Projects).
-
قسم التواصل (Contact).
-
Footer فيه حقوق النشر وروابط السوشيال.
✅ مثال بسيط:
🎯 2. إنشاء صفحة هبوط (Landing Page)
صفحة الهبوط Landing Page غالبًا بيتم استخدامها للتسويق (منتج، خدمة، تطبيق).
لازم تكون جذابة – بسيطة – مركزة على هدف واحد.
مكوناتها الأساسية:
-
عنوان رئيسي جذاب (Headline).
-
وصف قصير للمنتج/الخدمة.
-
صورة أو فيديو توضيحي.
-
زر (CTA – Call To Action) مثل: “سجل الآن” أو “اشترِ الآن”.
-
مراجعات أو آراء العملاء (اختياري).
✅ مثال:
🎯 3. إنشاء موقع صغير مكون من عدة صفحات
موقع بسيط يتكون مثلًا من:
-
الصفحة الرئيسية (Home).
-
من نحن (About).
-
الخدمات (Services).
-
اتصل بنا (Contact).
خطوات:
-
أنشئ ملفات HTML متعددة:
-
index.html (الرئيسية).
-
about.html (من نحن).
-
services.html (الخدمات).
-
contact.html (اتصل بنا).
-
-
اربط الصفحات ببعض باستخدام <a href="/en/””/">.
✅ مثال (index.html):
وبنفس الشكل تعمل باقي الصفحات وتغير المحتوى الداخلي.
✅ ملخص
-
الـ Portfolio → للتعريف بنفسك ومهاراتك.
-
Landing Page → صفحة تسويقية مركزة لهدف واحد (منتج/خدمة).
-
موقع متعدد الصفحات → أول خطوة لفهم بناء المواقع الحقيقية.