Упражнение. Обновление портфеля JavaScript с помощью GitHub Copilot

  • 5 мин

Давайте рассмотрим, как использовать предложения кода из GitHub Copilot. В этом упражнении вы добавите анимацию с динамическими предложениями и используйте запрос на настройку поведения прокрутки из уже существующего репозитория шаблонов JavaScript. С помощью GitHub Copilot вы можете быстро работать с реальной ситуацией JavaScript.

Портфель JavaScript

Будь то студент, недавний выпускник или опытный профессионал, ваш портфель является вашим личным пространством, чтобы продемонстрировать свои навыки и опыт.

Наличие портфолио придаёт доверие и известность к опыту, который вы упоминаете в своём резюме при подаче заявления на работу. Вы являетесь специалистом по анализу данных, UX-дизайнером или фронтенд-разработчиком. Сильное онлайн-присутствие может помочь вам получить работу и быть обнаруженным!

Примечание.

В этом упражнении используйте пространство 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",
};

Анимируйте значки социальных сетей с помощью запроса

Анимация может сделать раздел социальных сетей более привлекательным. Попросите Сопилота помочь анимировать значки. Вы можете использовать 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, вернитесь сюда, чтобы выполнить следующие задачи:

  • пройти быструю проверку знаний;
  • подвести итоги по изученному материалу;
  • Значок за прохождение этого модуля.