Упражнение. Списки и ссылки

Завершено

В этом упражнении вы добавите остальные сведения в резюме. Вы включаете свой адрес электронной почты, ссылки на социальные сети и список опыта. Упражнение использует универсальный текст, но вы можете настроить содержимое в соответствии с вашими сведениями.

Добавление адреса электронной почты и социальных сетей

Начнем с добавления адреса электронной почты и социальных сетей в резюме.

1. Вернитесь в окно браузера с vscode.dev.

Замечание

Если вы закрыли браузер или CodeSwing, выполните следующие действия, чтобы повторно открыть проект CodeSwing.

1. Откройте vscode.dev. Если у вас уже есть html-файл, и просто необходимо повторно открыть CodeSwing, перейдите к шагу 6.
2. Выберите "Открыть папку".
3. Перейдите в папку резюме, которую вы создали ранее, и выберите Выбор папки.
4. Когда появится запрос разрешите сайту просматривать файлы, выберите «Просмотр файлов».
5. В области обозревателя слева выберите файлindex.html .
6. Нажмите клавиши CTRL+SHIFT+P в Windows или Linux или CMD+SHIFT+P на Mac.
7. В поле, которое отображается вверху, введите codeswing: open swing и нажмите клавишу ВВОД или возврат на клавиатуре.
8. При появлении запроса выберите папку resume, выбранную ранее.

2. Внутри index.html и ниже комментария <!-- email address -->, добавьте следующий HTML-код, чтобы добавить ссылку на вашу электронную почту, заменив your-email@example.com на ваш адрес электронной почты:

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

3. Страница автоматически обновляется с помощью адреса электронной почты.

4. Под комментарием, который имеет текст <!-- social media -->, добавьте следующий HTML-код, чтобы создать список:

   <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. Страница обновляет список добавленных учетных записей социальных сетей.

Добавление образования и опыта

После добавления контактных данных вы завершите оформление резюме, включая образование и другой опыт.

1. В index.htmlпод комментарием, в котором написано <!-- education -->, добавьте следующий HTML-код для информации об образовании:

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

2. Под комментарием с текстом <!-- experience -->, добавьте следующий HTML-код для вашего опыта:

   <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. Окно обновляется с новыми сведениями.