Latihan - Memperbarui portofolio JavaScript dengan GitHub Copilot

  • 5 menit

Mari kita jelajahi bagaimana Anda dapat menggunakan saran kode dari GitHub Copilot. Dalam latihan ini, Anda menambahkan animasi dengan saran langsung dan menggunakan perintah untuk menyesuaikan perilaku gulir dari repositori templat JavaScript yang sudah ada. Dengan GitHub Copilot, Anda dapat dengan cepat bekerja dengan situasi JavaScript kehidupan nyata.

Portofolio JavaScript

Baik Anda seorang siswa, lulusan baru, atau profesional berpengalaman, portofolio Anda adalah ruang pribadi Anda untuk menampilkan keterampilan dan pengalaman Anda.

Memiliki portofolio memberikan kredibilitas dan keaslian terhadap pengalaman yang Anda sebutkan dalam resume Anda saat melamar pekerjaan. Baik Anda seorang Ilmuwan Data, Desainer UX, atau pengembang Front-end. Kehadiran online yang kuat dapat membantu Anda mendapatkan pekerjaan dan ditemukan!

Catatan

Untuk latihan ini, gunakan Codespace dengan lingkungan yang telah dikonfigurasi sebelumnya di browser Anda.

Menyesuaikan portofolio JavaScript Anda

Dalam portofolio templat ini, kami memiliki aplikasi web berbasis React yang siap untuk Anda sesuaikan dan sebarkan dengan mudah hanya menggunakan browser web Anda.

Sebelum memulai, Anda dapat menyesuaikan portofolio dengan tautan Anda sendiri. src/App.jsx Buka dan perbarui siteProps dengan informasi Anda. Variabel siteProps adalah objek JavaScript yang menyimpan pasangan nilai kunci yang digunakan untuk mengkustomisasi situs, akan terlihat seperti ini:

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

Menganimasikan ikon media sosial Anda dengan perintah

Animasi dapat membuat bagian media sosial lebih menarik perhatian. Minta bantuan Copilot untuk menganimasikan ikon. Anda dapat menggunakan GitHub Copilot Chat untuk meminta Copilot atau menulis komentar prompt berikut dalam src/styles.css file:

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

Saran dari Copilot akan terlihat mirip dengan yang berikut ini:

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

Terima saran dengan menekan tombol tab. Jika Anda tidak menerima saran yang sama persis, maka Anda dapat bereksperimen dengan saran yang diberikan atau terus mengetik kode CSS hingga cocok.

Situs Anda seharusnya sudah berjalan di Codespace Anda, dan perubahan akan dimuat ulang ke halaman secara otomatis. Untuk melihatnya, arahkan mouse ke salah satu ikon media sosial Anda di footer untuk melihat keajaiban!

Selamat, melalui latihan, Anda tidak hanya menggunakan Copilot untuk menghasilkan kode tetapi juga melakukannya dengan cara interaktif dan menyenangkan! Anda dapat menggunakan GitHub Copilot untuk tidak hanya menghasilkan kode, tetapi menulis dokumentasi, menguji aplikasi Anda, dan banyak lagi.

Setelah Anda menyelesaikan latihan di GitHub, kembali ke sini untuk:

  • Uji pengetahuan cepat
  • Ringkasan tentang apa yang telah Anda pelajari
  • Lencana untuk menyelesaikan modul ini