Ćwiczenie — listy i linki

Ukończone

W tym ćwiczeniu dodasz pozostałe informacje do życiorysu. Ty wprowadzasz swój adres e-mail, linki do mediów społecznościowych oraz listę doświadczeń. W ćwiczeniu jest używany ogólny tekst, ale możesz dostosować zawartość tak, aby odpowiadała twoim szczegółom.

Dodawanie adresu e-mail i mediów społecznościowych

Zacznijmy od dodania adresu e-mail i linków mediów społecznościowych do życiorysu.

1. Wróć do okna przeglądarki z vscode.dev.

Uwaga / Notatka

Jeśli zamknięto przeglądarkę lub kodSwing, wykonaj następujące kroki, aby ponownie otworzyć projekt CodeSwing.

1. Otwórz vscode.dev. Jeśli masz już otwarty plik HTML i po prostu musisz ponownie otworzyć kodSwing, przejdź do kroku 6.
2. Wybierz pozycję Otwórz folder.
3. Przejdź do utworzonego wcześniej folderu resume i wybierz pozycję Wybierz folder.
4. Po wyświetleniu monitu o zezwolenie witrynie na wyświetlanie plików, wybierz Wyświetl pliki.
5. W okienku Eksplorator po lewej stronie wybierz plik index.html.
6. Naciśnij Ctrl + Shift + P w systemie Windows lub Linux lub Cmd + Shift + P na komputerze Mac.
7. W polu widocznym u góry wpisz codeswing: open swing i naciśnij Enter lub wróć na klawiaturze.
8. Po wyświetleniu monitu wybierz wznowić folder wybrany wcześniej.

2. Wewnątrz index.htmli poniżej komentarza, który brzmi <!-- email address -->, dodaj następujący HTML, aby dodać link do swojego adresu e-mail, zastępując your-email@example.com swoim adresem e-mail.

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

3. Strona zostanie automatycznie zaktualizowana przy użyciu adresu e-mail.

4. Poniżej komentarza oznaczonego <!-- social media -->, dodaj następujący kod HTML, aby utworzyć 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. Strona zostanie zaktualizowana w celu wyświetlenia listy dodanych kont w mediach społecznościowych.

Dodawanie edukacji i doświadczenia

Po dodaniu informacji kontaktowych, teraz zakończysz dodawanie do swojego życiorysu, uwzględniając edukację i inne doświadczenie.

1. W index.htmlponiżej komentarza, który zawiera treść <!-- education -->, dodaj następujący kod HTML dla informacji edukacyjnych:

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

2. Poniżej komentarza zawierającego <!-- experience -->, dodaj następujący kod HTML dla twojego doświadczenia.

   <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. Okno zostanie zaktualizowane o nowe informacje.