תרגיל - עדכון תיק JavaScript עם GitHub Copilot

הושלם

נבחן כיצד תוכל להשתמש בהצעות קוד מ- GitHub Copilot. בתרגיל זה, אתה מוסיף הנפשות עם הצעות חיות ומשתמש בבקשה להתאמה אישית של אופן הפעולה של גלילה מתוך מאגר תבניות JavaScript קיים כבר. עם GitHub Copilot, תוכל לעבוד במהירות עם מצב JavaScript אמיתי.

תיק JavaScript

בין אם אתה תלמיד, בוגר תיכון או מומחה מנוסה, תיק העבודות שלך הוא המקום האישי שלך להצגת הכישורים והניסיון שלך.

תיק עבודות מספק אמינות ואמינות לחוויה שאתה מזכיר קורות החיים שלך בעת בקשת עבודה. בין אם אתה מדען נתונים, UX Designer או מפתח חזיתי. נוכחות מקוונת חזקה יכולה לעזור לך למצוא עבודה ולתגלה!

הערה

בתרגיל זה, השתמש ב- 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 כדי לשאול את 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);
  }
}

קבל את ההצעה על-ידי הקשה על מקש Tab. אם אינך מקבל בדיוק את אותה ההצעה, תוכל להתנסות בהצעה שסופקה או להמשיך להקליד את קוד ה- CSS עד שהיא תואמת.

האתר שלך אמור לפעול כבר ב- Codespace שלך, והשינוי ייטען מחדש בדף באופן אוטומטי. כדי לראות אותם, רחף מעל אחד סמלי המדיה החברתית שלך בכותרת התחתונה כדי לראות את הקסם!

מזל טוב, באמצעות התרגיל, לא השתמשת רק ב- Copilot כדי ליצור קוד, אלא גם עשית זאת באופן אינטראקטיבי ומהנה! באפשרותך להשתמש ב- GitHub Copilot לא רק כדי ליצור קוד, אלא לכתוב תיעוד, לבדוק את האפליקציות שלך ועוד.

לאחר שתסיים את התרגיל ב- GitHub, חזור לכאן לקבלת:

• בדיקת ידע מהירה
• סיכום של מה שלמדת
• תג להשלמת מודול זה