Ejercicio: Listas y vínculos

Completado

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.

  1. 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.

  1. Abra vscode.dev. Si ya tiene abierto el archivo HTML y solo tiene que volver a abrir CodeSwing, vaya al paso 6.
  2. Seleccione Abrir carpeta.
  3. Vaya a la carpeta resume que creó anteriormente y seleccione Seleccionar carpeta.
  4. Cuando se le solicite que permita al sitio ver archivos, seleccione Ver archivos.
  5. En el panel Explorador de la izquierda, seleccione el archivo index.html.
  6. Presione Ctrl + Mayús + P en Windows o Linux o Cmd + Mayús + P en Mac.
  7. En el cuadro que aparece en la parte superior, escriba codeswing: open swing y presione enter o return en su teclado.
  8. Cuando se le solicite, seleccione la carpeta resume que seleccionó anteriormente.
  1. 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>
    
  2. La página se actualiza automáticamente con su dirección de correo electrónico.

  3. 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>
    
  4. 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.

  1. 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>
    
  2. 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>
    
  3. La ventana se actualiza con la nueva información.