Esercizio - Elenchi e collegamenti
In questo esercizio, aggiungi il resto delle informazioni al tuo curriculum. Includi il tuo indirizzo e-mail, i link ai social media e l'elenco delle esperienze. L'esercizio utilizza un testo generico, ma dovresti sentirti libero di personalizzare il contenuto in modo che corrisponda ai tuoi dettagli.
Aggiungi il tuo indirizzo e-mail e i social media
Iniziamo aggiungendo il tuo indirizzo e-mail e i link ai social media al tuo curriculum.
- Torna alla finestra del browser con vscode.dev.
Annotazioni
Se hai chiuso il browser o CodeSwing, segui questi passaggi per riaprire il tuo progetto CodeSwing.
- Aprire vscode.dev. Se hai già aperto il tuo file html e devi solo riaprire CodeSwing, vai al passaggio 6.
- Selezionare Apri cartella.
- Passare alla cartella resume creata in precedenza e selezionare Seleziona cartella.
- Quando viene richiesto di consentire la visualizzazione dei file del sito, selezionare Visualizza file.
- Nel riquadro Esplora risorse a sinistra selezionare il fileindex.html .
- Premi Ctrl + Maiusc + P su Windows o Linux o Cmd + Maiusc + P su Mac.
- Nella casella che appare in alto, digita
codeswing: open swinge premi invio o invio sulla tastiera. - Quando richiesto, selezionare la cartella di ripresa selezionata in precedenza.
All'interno index.htmle sotto il commento che recita
<!-- email address -->, aggiungi il seguente HTML per aggiungere un link alla tua email, sostituendolo your-email@example.com con il tuo indirizzo email:<a href="mailto:your-email@example.com">your-email@example.com</a>La pagina si aggiorna automaticamente con il tuo indirizzo email.
Sotto il commento che recita
<!-- social media -->, aggiungi il seguente HTML per creare l'elenco:<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>La pagina si aggiorna per visualizzare l'elenco degli account di social media aggiunti.
Aggiungere istruzione ed esperienza
Con le informazioni di contatto aggiunte, ora finirai di aggiungere al tuo curriculum includendo istruzione e altre esperienze.
All'interno index.html, sotto il commento che recita
<!-- education -->, aggiungi il seguente HTML per le tue informazioni sull'istruzione:<h3>School name</h3> <h4>Major</h4> <ul> <li>GPA: 4.0</li> <li>Years attended</li> </ul>Sotto il commento che recita
<!-- experience -->, aggiungi il seguente codice HTML per la tua esperienza:<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>La finestra si aggiorna con le nuove informazioni.