練習 - 使用 GitHub Copilot 更新 JavaScript 作品集

  • 5 分鐘

讓我們來探索如何使用來自 GitHub Copilot 的程式碼建議。 在此練習中，您會使用即時建議新增動畫，並使用提示自訂現有 JavaScript 範本存放庫中的捲動行為。 透過 GitHub Copilot，您可以快速處理實際 JavaScript 情況。

JavaScript 組合

無論您是學生、剛畢業的社會新鮮人或有經驗的專業人員，您的作品集便是您展示您的技能與經驗的個人空間。

當您申請工作時，有作品集可以為您在履歷中提到的經歷提供信譽和名聲。 無論您是資料科學家、UX 設計師或前端開發人員。 強大的網路形象可協助您取得工作並被徵才者相中!

注意

在本練習中，請在瀏覽器中使用 Codespace 搭配預先設定的環境。

自訂您的 JavaScript 作品集

在此範本作品集中，我們有 React型 Web 應用程式可供您輕鬆地使用網頁瀏覽器自訂並進行部署。

開始之前，您可以使用自己的連結來自訂作品集。 移至 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 中的練習時，請回到這裡繼續進行：

  • 快速知識檢定
  • 您已經學到內容的摘要
  • 完成此課程模組獲得的徽章