تمرين - تحديث محفظة JavaScript باستخدام GitHub Copilot

  • 5 دقائق

دعونا نستكشف كيف يمكنك استخدام اقتراحات التعليمات البرمجية من GitHub Copilot. في هذا التمرين، يمكنك إضافة حركات مع اقتراحات مباشرة واستخدام مطالبة لتخصيص سلوك التمرير من مستودع قالب JavaScript موجود بالفعل. باستخدام GitHub Copilot، يمكنك العمل بسرعة مع وضع JavaScript في الحياة الحقيقية.

قائمة مشاريع JavaScript

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

يوفر وجود محفظة مصداقية ومصداقية للتجربة التي تذكرها في سيرتك الذاتية عند التقدم بطلب للحصول على وظائف. سواء كنت عالم بيانات أو مصمم UX أو مطور واجهة أمامية. وجود قوي على الانترنت يمكن أن تساعدك على الحصول على وظيفة ويتم اكتشافها!

إشعار

لهذا التمرين، استخدم Codespace مع البيئة التي تم تكوينها مسبقا في المستعرض الخاص بك.

تخصيص قائمة مشاريع JavaScript

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

قبل البدء، يمكنك تخصيص قائمة المشاريع بالارتباطات الخاصة بك. انتقل إلى src/App.jsx وقم بتحديث siteProps مع معلوماتك. siteProps المتغير هو كائن JavaScript يحتوي على أزواج قيم المفاتيح المستخدمة لتخصيص الموقع، يجب أن يبدو كما يلي:

const siteProps = {
  name: "Alexandrie Grenier",
  title: "Web Designer & Content Creator",
  email: "alex@example.com",
  gitHub: "microsoft",
  instagram: "microsoft",
  linkedIn: "satyanadella",
  medium: "",
  twitter: "microsoft",
  youTube: "Code",
};

إضافة الحركة إلى أيقونات وسائل التواصل الاجتماعي الخاصة بك مع مطالبة

يمكن للرسوم المتحركة أن تجعل قسم وسائل التواصل الاجتماعي أكثر جذبا للأنظار. اطلب من Copilot مساعدة لتحريك الأيقونات. يمكنك استخدام GitHub Copilot Chat لسؤال Copilot أو كتابة تعليق المطالبة التالي في src/styles.css الملف:

/* add an amazing animation to the social icons */

يجب أن يبدو الاقتراح من Copilot مشابها للآتي:

img.socialIcon:hover {
  animation: bounce 0.5s;
  animation-iteration-count: infinite;
}

@keyframes bounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

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

يجب أن يكون موقعك قيد التشغيل بالفعل في Codespace، وسيعيد التغيير تحميله على الصفحة تلقائيا. لرؤيتهم، مرر مؤشر الماوس فوق إحدى أيقونات وسائل التواصل الاجتماعي في التذييل لرؤية السحر!

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

عند الانتهاء من التمرين في GitHub، ارجع إلى هنا من أجل:

  • اختبار سريع للمعلومات
  • ملخص ما تعلمته
  • شارة إكمال هذه الوحدة