Exercice - Mettre à jour un portefeuille JavaScript avec GitHub Copilot

Effectué

Voyons comment vous pouvez utiliser les suggestions de code de GitHub Copilot. Dans cet exercice, vous allez ajouter des animations avec des suggestions en temps réel, et utiliser une invite pour personnaliser le comportement de défilement à partir d’un modèle de dépôt JavaScript déjà existant. Avec GitHub Copilot, vous pouvez rapidement gérer des scénarios concrets impliquant du code JavaScript.

Portefeuille JavaScript

Que vous soyez étudiant, jeune diplômé ou professionnel expérimenté, votre portefeuille est l’espace personnel où vous pouvez présenter vos compétences et votre expérience.

Le fait de disposer d’un portefeuille donne de la crédibilité et de la notoriété à l’expérience que vous mentionnez dans votre CV quand vous postulez pour un emploi. Que vous soyez scientifique des données, concepteur d’expérience utilisateur ou développeur front-end. Une forte présence en ligne peut vous aider à trouver un emploi et à être découvert !

Remarque

Pour cet exercice, utilisez Codespace avec l’environnement préconfiguré dans votre navigateur.

Personnaliser votre portefeuille JavaScript

Dans ce portefeuille de modèles, nous avons une application web React que vous pouvez personnaliser et déployer facilement en utilisant uniquement votre navigateur web.

Avant de commencer, vous pouvez personnaliser le portefeuille avec vos propres liens. Accédez à src/App.jsx, puis mettez à jour siteProps avec vos informations. La variable siteProps est un objet JavaScript qui contient les paires clé-valeur utilisées pour personnaliser le site. Elle doit ressembler à ceci :

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

Animer vos icônes de réseaux sociaux avec une invite

Une animation peut rendre la section relative aux réseaux sociaux plus accrocheuse. Demandez l’aide de Copilot pour animer les icônes. Vous pouvez utiliser GitHub Copilot Chat pour demander à Copilot ou écrire le commentaire de prompt suivant dans le fichier src/styles.css :

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

La suggestion de Copilot doit ressembler à ce qui suit :

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

Acceptez la suggestion en appuyant sur la touche TAB. Si vous ne recevez pas exactement la même suggestion, vous pouvez effectuer un essai avec la suggestion fournie ou continuer à taper le code CSS jusqu’à ce qu’il corresponde.

Votre site doit déjà s’exécuter dans votre codespace. Le changement sera rechargé automatiquement dans la page. Pour voir la magie opérer, pointez sur l’une de vos icônes de réseaux sociaux dans le pied de page.

Félicitations, cet exercice vous a permis d’utiliser Copilot pour générer du code, de manière interactive et amusante de surcroît ! Vous pouvez utiliser GitHub Copilot non seulement pour générer du code, mais aussi pour écrire de la documentation, tester vos applications et plus encore.

Quand vous aurez terminé l’exercice dans GitHub, revenez ici pour :

• Contrôler rapidement vos connaissances
• Faire le point sur ce que vous avez appris
• Un badge attestant que vous avez suivi ce module