Exercise - Lists and links

Completed

In this exercise, you add the rest of the information to your resume. You include your email address, social media links, and list of experience. The exercise uses generic text, but you should feel free to customize the content to match your details.

Add Your Email Address and Social Media

Let's start by adding your email address and social media links to your resume.

1. Return to the browser window with vscode.dev.

Note

If you closed your browser or CodeSwing, follow these steps to reopen your CodeSwing project.

1. Open vscode.dev. If you already have your html file open and just need to reopen CodeSwing, skip to step 6.
2. Select Open Folder.
3. Navigate to the resume folder you created earlier and select Select Folder.
4. When prompted to Let site view files, select View Files.
5. In the Explorer pane on the left, select the index.html file.
6. Press Ctrl + Shift + P on Windows or Linux or Cmd + Shift + P on Mac.
7. In the box that appears at the top, type codeswing: open swing and press enter or return on your keyboard.
8. When prompted, select the resume folder you selected earlier.

2. Inside index.html, and below the comment that reads <!-- email address -->, add the following HTML to add a link to your email, replacing your-email@example.com with your email address:

   <a href="mailto:your-email@example.com">your-email@example.com</a>
   

3. The page automatically updates with your email address.

4. Below the comment that reads <!-- social media -->, add the following HTML to create the list:

   <ul>
       <li><a href="https://github.com/microsoft>">GitHub</a></li>
       <li><a href="https://www.linkedin.com/company/microsoft>">LinkedIn</a></li>
       <li><a href="https://x.com/microsoft>">X</a></li>
   </ul>
   

5. The page updates to display the list of social media accounts you add.

Adding Education and Experience

With the contact information added, you'll now finish adding to your resume by including education and other experience.

1. Inside index.html, below the comment that reads <!-- education -->, add the following HTML for your education information:

   <h3>School name</h3>
   <h4>Major</h4>
   <ul>
       <li>GPA: 4.0</li>
       <li>Years attended</li>
   </ul>
   

2. Below the comment that reads <!-- experience -->, add the following HTML for your experience:

   <h3>Company name</h3>
   <h4>Title</h4>
   <h4>Dates</h4>
   <ul>
       <li>Cool accomplishment</li>
       <li>Cool accomplishment</li>
   </ul>
   
   <h3>Cool hackathon</h3>
   <h4>Project title</h4>
   <h4>Dates</h4>
   <ul>
       <li>Cool accomplishment</li>
       <li>Cool accomplishment</li>
   </ul>
   

3. The window updates with your new information.