Explore how you can modify a JavaScript repository using code suggestions from GitHub Copilot to modify and customize a web application. By working with this repository, you'll quickly get hands-on with a JavaScript web app for a portfolio site.
- Enable your GitHub Copilot service
- Open this repository with Codespaces
In this template portfolio, we have a React based web application ready for you to easily customize and deploy using only your web browser.
Customize the portfolio with your own links. Go to src/App.jsx
and update the siteProps
with your information. The siteProps
variable is a JavaScript object that holds key value pairs used to customize the site, it should look like this:
const siteProps = {
name: "Alexandrie Grenier",
title: "Web Designer & Content Creator",
email: "[email protected]",
gitHub: "microsoft",
instagram: "microsoft",
linkedIn: "satyanadella",
medium: "",
twitter: "microsoft",
youTube: "Code",
};
An animation can make the social media section more eye-catching. Ask Copilotโs help to animate the icons. Write the following prompt in the src/styles.css
file:
/* add an amazing animation to the social icons */
The suggestion from Copilot should look similar to the following:
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);
}
}
Open GitHub Copilot chat by clicking on the chat icon on the left side bar and use the input section to ask the following:
@workspace I want to understand how can I run this React application
The prompts uses @workspace
which is a special feature of GitHub Copilot chat that allows you to include more context for a more complete answer. Try out other queries using the chat panel for a more interactive workflow.
Your site should already be running in your Codespace, and the change will reload onto the page automatically. To see them, hover over one of your social media icons in the footer to see the magic!
Congratulations, through the exercise, you have use GitHub Copilot to generate code and also done it in an interactive and fun way! You can use GitHub Copilot to not only generate code, but write documentation, test your applications and more.