Übung: Aktualisieren eines JavaScript-Portfolios mit GitHub Copilot

  • 5 Minuten

Im Folgenden erfahren Sie, wie Sie Codevorschläge aus GitHub Copilot verwenden können. In dieser Übung fügen Sie Animationen mit Livevorschlägen hinzu und verwenden eine Aufforderung, um das Scrollverhalten aus einem bereits vorhandenen JavaScript-Vorlagenrepository anzupassen. Mit GitHub Copilot können Sie schnell in einem echten JavaScript-Szenario arbeiten.

JavaScript-Portfolio

Egal, ob Sie Student, Berufsanfänger oder erfahrener Experte sind, Ihr Portfolio ist der Ort, an dem Sie Ihre individuellen Fähigkeiten und Erfahrungen präsentieren können.

Ein Portfolio stärkt die Glaubwürdigkeit und liefert Belege für die Erfahrung, die Sie bei Bewerbungen in Ihrem Lebenslauf angeben. Ganz gleich, ob Sie wissenschaftliche Fachkraft für Daten, UX Designer oder Front-End-Entwickler sind: Eine starke Onlinepräsenz kann Ihnen helfen, einen Stelle zu bekommen und entdeckt zu werden!

Hinweis

Verwenden Sie für diese Übung den Codespace mit der vorkonfigurierten Umgebung in Ihrem Browser.

Anpassen Ihres JavaScript-Portfolios

In dieser Portfoliovorlage gibt es eine React-basierte Webanwendung, die Sie nur mit Ihrem Webbrowser einfach anpassen und bereitstellen können.

Bevor Sie beginnen, können Sie das Portfolio mit Ihren eigenen Links anpassen. Gehen Sie zu src/App.jsx, und aktualisieren Sie siteProps mit Ihren Informationen. Die siteProps-Variable ist ein JavaScript-Objekt, das Schlüsselwertpaare enthält, mit denen die Website angepasst wird. Sie sollte wie folgt aussehen:

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

Animieren von Social Media-Symbolen mit einer Aufforderung

Eine Animation kann den Social Media-Abschnitt auffälliger machen. Copilot kann Sie dabei unterstützen, die Symbole zu animieren. Sie können GitHub Copilot Chat verwenden, um Copilot zu fragen oder den folgenden Eingabeaufforderungskommentar in der src/styles.css-Datei zu schreiben:

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

Der Vorschlag von Copilot sollte ähnlich wie im folgenden Beispiel aussehen:

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

Akzeptieren Sie den Vorschlag, indem Sie die TAB-TASTE drücken. Wenn Sie nicht genau denselben Vorschlag erhalten, können Sie entweder mit dem angegebenen Vorschlag experimentieren oder den CSS-Code so lange eingeben, bis er übereinstimmt.

Ihre Website sollte bereits in Ihrem Codespace ausgeführt werden, und die Änderung wird automatisch auf der Seite neu geladen. Zeigen Sie zum Anzeigen auf eines Ihrer Social Media-Symbole in der Fußzeile, um sie in Aktion zu sehen!

Herzlichen Glückwunsch! Während der Übung haben Sie Copilot nicht nur zum Generieren von Code verwendet, sondern dies auch auf eine interaktive und unterhaltsame Weise gemacht! Sie können GitHub Copilot nicht nur zum Generieren von Code, sondern auch zum Schreiben von Dokumentationen, Testen Ihrer Anwendungen und vielem mehr verwenden.

Wenn Sie die Übung in GitHub abgeschlossen haben, kehren Sie hierher für die letzten Schritte zurück:

  • Eine kurz Wissensbeurteilung
  • Eine Zusammenfassung der Punkte, die Sie gelernt haben
  • Ein Abzeichen für den Abschluss dieses Moduls