Oefening: een JavaScript-portfolio bijwerken met GitHub Copilot

  • 5 minuten

Laten we eens kijken hoe u codesuggesties van GitHub Copilot kunt gebruiken. In deze oefening voegt u animaties met livesuggesties toe en gebruikt u een prompt om het schuifgedrag aan te passen vanuit een reeds bestaande JavaScript-sjabloonopslagplaats. Met GitHub Copilot kunt u snel werken met een echte JavaScript-situatie.

JavaScript-portfolio

Of u nu een student, recent afgestudeerd of een ervaren professional bent, uw portfolio is uw persoonlijke ruimte om uw vaardigheden en ervaring te laten zien.

Het hebben van een portfolio biedt geloofwaardigheid en bekendheid met de ervaring die u in uw cv vermeldt bij het aanvragen van taken. Of u nu een Datawetenschapper, UX Designer of front-endontwikkelaar bent. Een sterke online aanwezigheid kan u helpen een baan te krijgen en ontdekt te worden!

Notitie

Gebruik voor deze oefening de Codespace met de vooraf geconfigureerde omgeving in uw browser.

Uw JavaScript-portfolio aanpassen

In dit sjabloonportfolio hebben we een React-webtoepassing die u eenvoudig kunt aanpassen en implementeren met behulp van uw webbrowser.

Voordat u begint, kunt u het portfolio aanpassen met uw eigen koppelingen. Ga naar src/App.jsx en werk de siteProps gegevens bij. De variabele is een JavaScript-object dat sleutel-waardeparen bevat die worden gebruikt om de site aan te passen. Deze siteProps moet er als volgt uitzien:

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

Animatie toevoegen aan pictogrammen voor sociale media met een prompt

Een animatie kan de sectie sociale media aantrekkelijker maken. Vraag Copilot's hulp om de pictogrammen te animeren. U kunt GitHub Copilot Chat gebruiken om Copilot te vragen of de volgende promptcommentaar in het src/styles.css bestand te schrijven:

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

De suggestie van Copilot moet er ongeveer als volgt uitzien:

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

Accepteer de suggestie door op de tabtoets te drukken. Als u niet exact dezelfde suggestie ontvangt, kunt u experimenteren met de opgegeven suggestie of de CSS-code blijven typen totdat deze overeenkomt.

Uw site moet al worden uitgevoerd in uw Codespace en de wijziging wordt automatisch opnieuw geladen op de pagina. Als u ze wilt zien, plaatst u de muisaanwijzer op een van uw sociale mediapictogrammen in de voettekst om de magie te zien.

Gefeliciteerd, via de oefening hebt u copilot niet alleen gebruikt om code te genereren, maar het ook op een interactieve en leuke manier gedaan! U kunt GitHub Copilot gebruiken om niet alleen code te genereren, maar documentatie te schrijven, uw toepassingen te testen en meer.

Wanneer u de oefening in GitHub hebt voltooid, keert u hier terug voor:

  • Een snelle kennistoets
  • Een samenvatting van de geleerde lesstof
  • Een badge voor het voltooien van deze module