แบบฝึกหัด - อัปเดตพอร์ต JavaScript ด้วย GitHub Copilot

  • 5 นาที

เรามาสํารวจวิธีที่คุณสามารถใช้คําแนะนําโค้ดจาก GitHub Copilot ในแบบฝึกหัดนี้ คุณเพิ่มภาพเคลื่อนไหวพร้อมคําแนะนําสดและใช้พร้อมท์เพื่อปรับแต่งลักษณะการทํางานการเลื่อนจากที่เก็บเทมเพลต JavaScript ที่มีอยู่แล้ว ด้วย GitHub Copilot คุณสามารถทํางานกับสถานการณ์ JavaScript ในชีวิตจริงได้อย่างรวดเร็ว

พอร์ตโครงการ JavaScript

ไม่ว่าคุณจะเป็นนักเรียน ผู้สําเร็จการศึกษาเมื่อเร็ว ๆ นี้ หรือเป็นมืออาชีพที่มีประสบการณ์ พอร์ตโฟลิโอของคุณคือพื้นที่ส่วนตัวของคุณเพื่อแสดงทักษะและประสบการณ์ของคุณ

การมีพอร์ตโฟลิโอช่วยสร้างความน่าเชื่อถือและความโดดเด่นให้กับประสบการณ์ที่คุณกล่าวถึงในประวัติย่อของคุณเมื่อคุณสมัครงาน ไม่ว่าคุณจะเป็นนักวิทยาศาสตร์ข้อมูล นักออกแบบ UX หรือนักพัฒนาแบบ Front-End สถานะออนไลน์ที่แข็งแกร่งสามารถช่วยให้คุณได้รับงานและถูกค้นพบ!

หมายเหตุ

สำหรับแบบฝึกหัดนี้ ให้ใช้ Codespace กับสภาพแวดล้อมที่กำหนดค่าไว้ล่วงหน้าในเบราว์เซอร์ของคุณ

ปรับแต่งพอร์ตโฟลิโอ JavaScript ของคุณ

ในพอร์ตเทมเพลตนี้ เรามีเว็บแอปพลิเคชันตาม React ที่พร้อมให้คุณปรับแต่งและปรับใช้โดยใช้เฉพาะเว็บเบราว์เซอร์ของคุณได้อย่างง่ายดาย

ก่อนที่จะเริ่ม คุณสามารถปรับแต่งพอร์ตโฟลิโอด้วยลิงก์ของคุณเอง ไปที่ src/App.jsx และอัปเดต siteProps ด้วยข้อมูลของคุณ ตัวแปร siteProps เป็นอ็อบเจ็กต์ JavaScript ที่เก็บคู่ค่าหลักที่ใช้ในการกําหนดค่าไซต์ ซึ่งควรมีลักษณะดังนี้:

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

ทำให้ไอคอนสื่อสังคมออนไลน์ของคุณเคลื่อนไหวด้วยคำสั่ง

ภาพเคลื่อนไหวสามารถทําให้ส่วนโซเชียลมีเดียสะดุดตามากขึ้น ขอความช่วยเหลือจาก Copilot เพื่อทําให้ไอคอนเคลื่อนไหว คุณสามารถใช้ GitHub Copilot Chat เพื่อถาม Copilot หรือเขียนข้อคิดเห็นพร้อมท์ต่อไปนี้ในไฟล์ src/styles.css:

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

คําแนะนําจาก Copilot ควรมีลักษณะดังต่อไปนี้:

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

ยอมรับคําแนะนําโดยกดปุ่ม Tab หากคุณไม่ได้รับคําแนะนําแบบเดียวกันทุกประการ คุณสามารถทดลองกับคําแนะนําที่ให้ไว้หรือพิมพ์โค้ด CSS ต่อไปจนกว่าจะตรงกัน

เว็บไซต์ของคุณควรจะทํางานอยู่แล้วใน Codespace ของคุณ และการเปลี่ยนแปลงจะโหลดลงในหน้าโดยอัตโนมัติ หากต้องการดู ให้วางเมาส์เหนือไอคอนโซเชียลมีเดียของคุณในส่วนท้ายเพื่อดูความมหัศจรรย์!

ขอแสดงความยินดี คุณไม่เพียงแต่ใช้ Copilot เพื่อสร้างโค้ดเท่านั้น แต่ยังทําด้วยวิธีโต้ตอบและสนุกสนาน! คุณสามารถใช้ GitHub Copilot เพื่อไม่เพียงสร้างโค้ด แต่เขียนเอกสาร ทดสอบแอปพลิเคชันของคุณและอื่นๆ อีกมากมาย

เมื่อคุณทำแบบฝึกหัดจนเสร็จสิ้นใน GitHub แล้ว ให้ย้อนกลับมายังที่นี่เพื่อรับ:

  • การประเมินความรู้อย่างรวดเร็ว
  • สรุปข้อมูลของสิ่งที่คุณได้เรียนรู้
  • ป้ายแจ้งสถานะสำหรับการศึกษามอดูลนี้จนเสร็จสมบูรณ์