Exercício: Atualizar um portfólio do JavaScript com o GitHub Copilot

  • 5 minutos

Vamos explorar como você pode usar sugestões de código de GitHub Copilot. Neste exercício, você adiciona animações com sugestões dinâmicas e usa um prompt para personalizar o comportamento de rolagem de um repositório de modelos do JavaScript já existente. Com GitHub Copilot, você pode trabalhar rapidamente com uma situação de JavaScript da vida real.

Portfólio do JavaScript

Seja você um aluno, recém-formado ou um profissional experiente, seu portfólio é seu espaço pessoal para mostrar suas habilidades e experiência.

Ter um portfólio fornece credibilidade e notoriedade à experiência que você está mencionando em seu currículo ao se candidatar a empregos. Seja você um Cientista de Dados, um Designer UX ou um desenvolvedor de front-end. Uma forte presença online pode ajudá-lo a conseguir um emprego e ser descoberto!

Observação

Para este exercício, use o Codespace com o ambiente pré-configurado em seu navegador.

Personalizar seu portfólio do JavaScript

Nesse portfólio de modelos, temos um aplicativo Web baseado em React pronto para personalizar e implantar facilmente usando apenas seu navegador da Web.

Antes de começar, você pode personalizar o portfólio com seus próprios links. Acesse src/App.jsx e atualize o siteProps com suas informações. A variável siteProps é um objeto JavaScript que contém pares de valores de chave usados para personalizar o site e deve ter essa aparência:

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

Animar seus ícones de mídia social com um prompt

Uma animação pode tornar a seção de redes sociais mais atraente. Peça a ajuda do Copilot para animar os ícones. Você pode usar o Chat do GitHub Copilot para perguntar ao Copilot ou escrever o seguinte comentário de solicitação no arquivo src/styles.css:

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

A sugestão do Copilot deve ser semelhante a essa:

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

Aceite a sugestão pressionando a tecla tab. Se você não receber exatamente a mesma sugestão, poderá experimentar a sugestão fornecida ou continuar digitando o código CSS até que ele corresponda.

Seu site já deve estar em execução em seu Codespace e a alteração será recarregada na página automaticamente. Para vê-los, passe o mouse sobre um de seus ícones de mídia social no rodapé para ver a magia!

Parabéns, por meio do exercício, você não apenas usou o Copilot para gerar código, mas também o fez de maneira interativa e divertida! Você pode usar o GitHub Copilot não apenas para gerar código, mas também para escrever documentação, testar seus aplicativos e muito mais.

Ao concluir o exercício no GitHub, volte aqui para:

  • Uma rápida verificação de conhecimentos
  • Um resumo do que você aprendeu
  • Um selo de conclusão deste módulo