Ćwiczenie — aktualizowanie portfolio języka JavaScript za pomocą narzędzia GitHub Copilot

  • 5 min

Dowiedzmy się, jak można używać sugestii dotyczących kodu z witryny GitHub Copilot. W tym ćwiczeniu dodasz animacje z dynamicznymi sugestiami i użyjesz polecenia, aby dostosować zachowanie przewijania z już istniejącego repozytorium szablonów JavaScript. Dzięki funkcji GitHub Copilot możesz szybko pracować z rzeczywistą sytuacją języka JavaScript.

Portfolio języka JavaScript

Niezależnie od tego, czy jesteś studentem, ostatnim absolwentem, czy doświadczonym profesjonalistą, twoje portfolio jest Twoją osobistą przestrzenią do zaprezentowania swoich umiejętności i doświadczenia.

Posiadanie portfolio zapewnia wiarygodność i uwidocznienie doświadczenia, które przedstawiasz w życiorysie podczas ubiegania się o pracę. Niezależnie od tego, czy jesteś Data Scientistą, projektantem UX, czy front-end deweloperem. Silna obecność online może pomóc Ci w pracę i zostać odkryta!

Uwaga

W tym ćwiczeniu użyj środowiska Codespace ze wstępnie skonfigurowanym środowiskiem w przeglądarce.

Dostosuj swoje portfolio JavaScript

W tym portfolio szablonów mamy aplikację internetową opartą na platformie React, która jest gotowa do łatwego dostosowywania i wdrażania przy użyciu tylko przeglądarki internetowej.

Przed rozpoczęciem możesz dostosować portfolio za pomocą własnych linków. Przejdź do src/App.jsx i zaktualizuj siteProps swoimi informacjami. Zmienna siteProps jest obiektem JavaScript, który przechowuje pary wartości klucza używane do dostosowywania witryny, powinien wyglądać następująco:

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",
};

Animowanie ikon mediów społecznościowych za pomocą monitu

Animacja może sprawić, że sekcja mediów społecznościowych będzie bardziej przyciągać wzrok. Zapytaj pomoc Copilota, aby animować ikony. Możesz użyć funkcji GitHub Copilot Chat, aby zadać pytanie Copilotowi lub napisać następujący komentarz z poleceniem w pliku src/styles.css.

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

Ta sugestia Copilot powinna wyglądać podobnie do następującej:

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);
  }
}

Zaakceptuj sugestię, naciskając klawisz Tab. Jeśli nie otrzymasz dokładnie tej samej sugestii, możesz poeksperymentować z podaną sugestią lub nadal wpisywać kod CSS do momentu jego dopasowania.

Witryna powinna już działać w usłudze Codespace, a zmiana zostanie ponownie załadowana na stronę automatycznie. Aby je zobaczyć, umieść kursor na jednej z ikon w mediach społecznościowych w stopce, aby zobaczyć magię!

Gratulacje, dzięki ćwiczeniu nie tylko użyliśmy copilota do generowania kodu, ale także zrobiliśmy to w interaktywny i zabawny sposób! Możesz użyć narzędzia GitHub Copilot, aby nie tylko wygenerować kod, ale także napisać dokumentację, przetestować aplikacje i nie tylko.

Po zakończeniu ćwiczenia na GitHubie wróć tutaj, aby kontynuować.

  • Krótki test wiedzy
  • Podsumowanie zdobytych informacji
  • Znaczek ukończenia tego modułu