Cvičení – aktualizace javascriptového portfolia pomocí GitHub Copilotu

Pojďme se podívat, jak můžete použít návrhy kódu z GitHub Copilotu. V tomto cvičení přidáte animace s živými návrhy a pomocí výzvy přizpůsobíte chování posouvání z již existujícího úložiště šablon JavaScriptu. Pomocí GitHub Copilotu můžete rychle pracovat se skutečnou situací v JavaScriptu.

Portfolio JavaScriptu

Ať už jste student, nedávný absolvent nebo zkušený profesionál, vaše portfolio je váš osobní prostor, ve kterém můžete prezentovat své dovednosti a zkušenosti.

Portfolio poskytuje důvěryhodnost a notorietu pro zkušenosti, které zmíníte ve svém životopisu při žádosti o pracovní pozice. Ať už jste Datoví vědci, návrhář uživatelského rozhraní nebo vývojář front-endu. Silná online přítomnost vám může pomoct získat úlohu a zjistit!

Přizpůsobení portfolia JavaScriptu

V tomto portfoliu šablon máme připravenou webovou aplikaci založenou na Reactu, abyste ji mohli snadno přizpůsobit a nasadit jenom pomocí webového prohlížeče.

Než začnete, můžete si portfolio přizpůsobit vlastními odkazy. Přejděte na src/App.jsx stránku a aktualizujte siteProps informace. Proměnná siteProps je javascriptový objekt, který obsahuje páry klíč-hodnota použité k přizpůsobení webu, měl by vypadat takto:

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

Animace ikon sociálních médií pomocí výzvy

Animace může usnadnit sekci sociálních médií. Požádejte o animaci ikon pomocí Copilotu. Pomocí GitHub Copilot Chatu můžete požádat o Copilot nebo do souboru napsat následující komentář s výzvou src/styles.css :

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

Návrh z Copilotu by měl vypadat nějak takto:

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

Přijměte návrh stisknutím klávesy Tab. Pokud nedostanete stejný návrh, můžete buď experimentovat s poskytnutým návrhem, nebo pokračovat v psaní kódu CSS, dokud se neshoduje.

Váš web by už měl být spuštěný v Codespace a změna se automaticky načte na stránku. Pokud je chcete vidět, najeďte myší na jednu z ikon sociálních médií v zápatí, abyste viděli kouzlo!

Blahopřejeme, prostřednictvím cvičení jste nejen použili Copilot k vygenerování kódu, ale také to udělali interaktivním a zábavným způsobem! GitHub Copilot můžete použít nejen ke generování kódu, ale také k psaní dokumentace, testování aplikací a dalších funkcí.

Až dokončíte cvičení v GitHubu, vraťte se sem. Čeká vás: