بعد 30 يومًا من الآن، يمكنك أن تكون قد بنيت ونشرت أول مشروع ويب احترافي خاص بك، وحصلت على شهادات تثبت مهاراتك.

الكثيرون يضيعون شهورًا في مشاهدة الدروس التعليمية دون نتيجة ملموسة. هذه ليست خطة أخرى للمشاهدة، بل هي خطة عمل مكثفة وموجهة. سنقوم بتقسيم عملية بناء “صفحة سيرة ذاتية (Portfolio) تفاعلية” إلى مهام أسبوعية واضحة.

هل أنت مستعد للتحدي؟ لنبدأ.

خطة العمل المقترحة للتحدي (4 أسابيع)

الأسبوع الأول (الأيام 1-7): بناء الأساس الصلب (HTML & CSS)

الهدف: في نهاية هذا الأسبوع، سيكون لديك الهيكل العظمي لموقعك، مصمم بشكل جميل ومتجاوب مع شاشات الهاتف والكمبيوتر.

• المهمة اليومية (ساعة إلى ساعتين):
  1. ابدأ بشهادة Responsive Web Design على منصة freeCodeCamp.
  2. ركز على إكمال الأقسام الأولى التي تغطي HTML5 و CSS3.
  3. ابدأ بتطبيق ما تعلمته مباشرة على مشروعك الخاص: صفحة الـ Portfolio. قم بإنشاء ملف index.html و style.css.
  4. أضف الأقسام الرئيسية: قسم “عني”، قسم “مشاريعي”، قسم “تواصل معي”.
  5. استخدم Flexbox أو CSS Grid لتنسيق هذه الأقسام بشكل احترافي.
• الشهادة المستهدفة: Responsive Web Design
  • 👈 ابدأ بشهادة تصميم الويب من هنا
• النتيجة بنهاية الأسبوع: موقع ويب ثابت (static) وجميل يعمل بشكل مثالي على جهازك المحلي.

الأسبوع الثاني (الأيام 8-14): بث الحياة في الصفحة (JavaScript)

الهدف: تحويل موقعك من صفحة جامدة إلى تجربة تفاعلية.

• المهمة اليومية (ساعة إلى ساعتين):
  1. انتقل إلى شهادة JavaScript Algorithms and Data Structures على freeCodeCamp.
  2. ركز على تعلم أساسيات JavaScript وكيفية التلاعب بـ DOM (Document Object Model). هذا يعني تعلم كيفية تغيير محتوى الصفحة، وإخفاء وإظهار العناصر، والاستجابة لنقرات المستخدم.
  3. تطبيق عملي: أضف زرًا في موقعك يقوم بتبديل الوضع بين “النهاري” و “الليلي”، أو اجعل قائمة التنقل تظهر وتختفي عند النقر.
• الشهادة المستهدفة: JavaScript Algorithms and Data Structures
  • 👈 ابدأ بشهادة جافاسكريبت من هنا
• النتيجة بنهاية الأسبوع: موقع ويب يحتوي على عناصر تفاعلية بسيطة تستجيب للمستخدم.

الأسبوع الثالث (الأيام 15-21): جعل الموقع ذكيًا (العمل مع APIs)

الهدف: جعل موقعك يقوم بتحديث محتواه تلقائيًا دون تدخل يدوي منك. هذه هي المهارة التي تميز المحترفين.

• المهمة اليومية (ساعة إلى ساعتين):
  1. تعلم عن fetch API في JavaScript. إنها دالة مدمجة تسمح لك بطلب البيانات من خوادم أخرى على الإنترنت.
  2. التطبيق العملي: استخدم fetch للتواصل مع واجهة برمجة تطبيقات GitHub العامة (api.github.com). اكتب كودًا يجلب قائمة مستودعاتك (repositories) العامة من حسابك على GitHub ويعرضها تلقائيًا في قسم “مشاريعي” في موقعك.
  3. كلما قمت بإنشاء مشروع جديد على GitHub، سيظهر تلقائيًا في موقعك!
• النتيجة بنهاية الأسبوع: قسم “مشاريعي” في موقعك أصبح ديناميكيًا ويعكس أعمالك الحقيقية بشكل حي ومباشر.

الأسبوع الرابع (الأيام 22-30): مشاركة عملك مع العالم (النشر)

الهدف: نشر موقعك على الإنترنت ليحصل على رابط URL حقيقي يمكنك مشاركته مع أي شخص.

• المهمة اليومية (ساعة واحدة كافية):
  1. تأكد من أن كل الكود الخاص بك موجود في مستودع (repository) على GitHub.
  2. اتبع خطوات بسيطة لاستخدام خدمة GitHub Pages المجانية.
  3. الخطوات: اذهب إلى إعدادات المستودع (Settings)، ثم إلى قسم “Pages”، واختر الفرع (branch) الذي يحتوي على الكود الخاص بك (عادة main)، ثم اضغط “Save”.
  4. بعد دقيقة أو دقيقتين، سيمنحك GitHub رابطًا لموقعك (مثل: yourusername.github.io/repository-name).
• النتيجة بنهاية الأسبوع: موقع ويب احترافي، تفاعلي، ديناميكي، ومنشور على الإنترنت. بالإضافة إلى شهادتين على الأقل لإثبات مهاراتك.

خاتمة: لقد فعلتها!

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

هذا المشروع هو مجرد البداية. الآن يمكنك استخدامه كقاعدة لتعلم أطر عمل مثل React، أو يمكنك البدء في أحد المسارات المهنية الطويلة التي ناقشناها سابقًا.

لا تدع 30 يومًا أخرى تمر. ابدأ الأسبوع الأول من التحدي غدًا. المستقبل يبدأ بخطوة عملية واحدة.