Alıştırma - GitHub Copilot ile JavaScript portföyünü güncelleştirme

  • 5 dakika

GitHub Copilot'tan gelen kod önerilerini nasıl kullanabileceğinizi keşfedelim. Bu alıştırmada canlı öneriler içeren animasyonlar ekleyecek ve zaten var olan bir JavaScript şablon deposundan kaydırma davranışını özelleştirmek için bir istem kullanacaksınız. GitHub Copilot ile gerçek hayattaki JavaScript durumuyla hızlı bir şekilde çalışabilirsiniz.

JavaScript portföyü

İster öğrenci, ister yeni mezun olun, ister deneyimli bir profesyonel olun, portföyünüz becerilerinizi ve deneyiminizi sergilemek için kişisel alanınızdır.

Portföye sahip olmak, iş başvurusu yaparken özgeçmişinizde bahsettiğiniz deneyime güvenilirlik ve itibar sağlar. İster Veri Bilimci ister UX Tasarımcısı ister ön uç geliştiricisi olun. Güçlü bir çevrimiçi iletişim durumu, bir iş edinmenize ve keşfedilebilmenize yardımcı olabilir!

Not

Bu alıştırma için Codespace'i tarayıcınızda önceden yapılandırılmış ortamla birlikte kullanın.

JavaScript portföyünüzü özelleştirme

Bu şablon portföyünde, yalnızca web tarayıcınızı kullanarak kolayca özelleştirmeniz ve dağıtmanız için hazır react tabanlı bir web uygulamamız var.

Başlamadan önce portföyü kendi bağlantılarınızla özelleştirebilirsiniz. adresine src/App.jsx gidin ve bilgilerinizle güncelleştirin siteProps . siteProps değişkeni, siteyi özelleştirmek için kullanılan anahtar değer çiftlerini tutan bir JavaScript nesnesidir; şöyle görünmelidir:

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

Bir istemle sosyal medya simgelerinize animasyon ekleme

Animasyon, sosyal medya bölümünü daha göz alıcı hale getirir. Simgelere animasyon eklemek için Copilot'un yardımını isteyin. Copilot'a sormak veya dosyaya aşağıdaki istem açıklamasını yazmak için GitHub Copilot Sohbeti'ni src/styles.css kullanabilirsiniz:

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

Copilot'tan gelen öneri aşağıdakine benzer görünmelidir:

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

Sekme tuşuna basarak öneriyi kabul edin. Tam olarak aynı öneriyi almazsanız, sağlanan öneriyi deneyebilir veya eşleşene kadar CSS kodunu yazmaya devam edebilirsiniz.

Sitenizin Codespace'inizde zaten çalışıyor olması gerekir ve değişiklik otomatik olarak sayfaya yeniden yüklenir. Bunları görmek için alt bilgideki sosyal medya simgelerinden birinin üzerine gelerek sihri görün!

Tebrikler, alıştırma boyunca kod oluşturmak için Copilot'ı kullanmadınız, aynı zamanda etkileşimli ve eğlenceli bir şekilde de yaptınız! GitHub Copilot'ı kullanarak yalnızca kod oluşturmakla kalmaz, belge yazabilir, uygulamalarınızı test edebilir ve daha fazlasını yapabilirsiniz.

GitHub'daki alıştırmayı bitirdiğinizde aşağıdakiler için buraya dönün:

  • Hızlı bir bilgi kontrolü
  • Öğrendiklerinizin bir özeti
  • Bu modülü tamamlamak için bir rozet