Ejercicio: Listas y vínculos
En este ejercicio, añades el resto de la información a tu currículum. Incluye su dirección de correo electrónico, enlaces a redes sociales y lista de experiencia. El ejercicio utiliza texto genérico, pero no dudes en personalizar el contenido para que coincida con tus datos.
Agregar su dirección de correo electrónico y redes sociales
Comencemos agregando su dirección de correo electrónico y vínculos de redes sociales a su currículum.
- Vuelva a la ventana del explorador con vscode.dev.
Nota:
Si cerró el explorador o CodeSwing, siga estos pasos para volver a abrir el proyecto codeSwing.
- Abra vscode.dev. Si ya tiene abierto el archivo HTML y solo tiene que volver a abrir CodeSwing, vaya al paso 6.
- Seleccione Abrir carpeta.
- Vaya a la carpeta resume que creó anteriormente y seleccione Seleccionar carpeta.
- Cuando se le solicite que permita al sitio ver archivos, seleccione Ver archivos.
- En el panel Explorador de la izquierda, seleccione el archivo index.html.
- Presione Ctrl + Mayús + P en Windows o Linux o Cmd + Mayús + P en Mac.
- En el cuadro que aparece en la parte superior, escriba
codeswing: open swing
y presione enter o return en su teclado. - Cuando se le solicite, seleccione la carpeta resume que seleccionó anteriormente.
Dentro index.html, y debajo del comentario que dice
<!-- email address -->
, agregue el siguiente HTML para agregar un vínculo a su correo electrónico, reemplazando your-email@example.com por su dirección de correo electrónico.<a href="mailto:your-email@example.com">your-email@example.com</a>
La página se actualiza automáticamente con su dirección de correo electrónico.
Debajo del comentario que lee
<!-- social media -->
, agregue el código HTML siguiente para crear la lista:<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 página se actualiza para mostrar la lista de cuentas de redes sociales que agregue.
Agregar educación y experiencia
Con la información de contacto agregada, ahora terminará de agregar a su currículum incluyendo educación y otra experiencia.
Dentro de index.html, debajo del comentario que dice
<!-- education -->
, agregue el siguiente código HTML para la información educativa.<h3>School name</h3> <h4>Major</h4> <ul> <li>GPA: 4.0</li> <li>Years attended</li> </ul>
Debajo del comentario que lee
<!-- experience -->
, agregue el código HTML siguiente para su experiencia:<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 ventana se actualiza con la nueva información.