Ejercicio: Uso de conceptos de CSS

  • 7 minutos

Quiere empezar a aplicar estilos a la página web del currículum. Para empezar, selecciona la fuente y establece los tamaños de los distintos elementos que utilizas en la página.

Este módulo usa vscode.dev : una versión basada en web de Visual Studio Code y CodeSwing. Estas herramientas ayudan a simplificar el proceso de desarrollo. Para completar los ejercicios siguientes, no se requiere ninguna instalación local.

Creación de un proyecto

Para empezar, cree una carpeta, configure las herramientas y cree un "swing" mediante CodeSwing en vscode.dev. Un "swing" mostrará automáticamente los resultados del código en vscode.dev. El uso de Microsoft Visual Studio Code con CodeSwing permite realizar rápidamente modificaciones con una vista previa de las actualizaciones que se producen en tiempo real.

  1. Cree una carpeta en el escritorio denominado resume.
  2. Abra vscode.dev.
  3. Seleccione Abrir carpeta.
  4. Vaya a la carpeta resume que creó anteriormente y seleccione Seleccionar carpeta.
  5. Cuando se le solicite permitir que el sitio vea archivos, seleccione Ver archivos.
  6. Seleccione el botón Extensiones .

    Captura de pantalla del botón extensiones de Visual Studio.

  7. En el cuadro de texto Buscar extensiones en Marketplace , escriba CodeSwing.
  8. Seleccione Instalar para instalar CodeSwing.
  9. Para abrir la paleta de comandos, seleccione Ctrl+Mayús+P o Cmd-Mayús-P en un equipo Mac.
  10. Escriba CodeSwing en la Paleta de Comandos y seleccione CodeSwing: Nuevo Swing en Directorio.
  11. Seleccione Seleccionar carpeta para usar el directorio actual (que es el que creó en un paso anterior).
  12. Seleccione Básico: HTML/CSS/JavaScript.
  13. Si se le pide que guarde los cambios para reanudar, seleccione Guardar cambios.
  14. Seleccione la x junto a script.js dentro de vscode.dev para cerrar el archivo JavaScript, ya que no usa este archivo durante el ejercicio.

Visual Studio Code crea dos secciones una al lado de la otra. La de la izquierda serán los editores, en los que puede escribir el código HTML y CSS. El derecho se comporta como un navegador, mostrando los resultados de su código.

Creación del código HTML

Utiliza el HTML existente para permitirnos centrarnos únicamente en el CSS. El código HTML incluye el elemento link para hacer referencia al archivo CSS.

  • Copie el código HTML siguiente en la ventana titulada index.html:

    <html>
    <head>
        <title>Your Name resume</title>
        <link rel="stylesheet" href="style.css">
    </head>

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

        <div id="social-media">
            <h2>Social media</h2>
            <ul>
                <li><a href="https://github.com/">GitHub</a></li>
                <li><a href="https://linkedin.com/in/">LinkedIn</a></li>
                <li><a href="https://x.com/">X</a></li>
            </ul>
        </div>

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

        <h2>Experience</h2>
        <div class="experience">
            <h3>Company name</h3>
            <h4>Title</h4>
        </div>
        <div class="experience">
            <h3>Cool hackathon</h3>
            <h4>Project title</h4>
        </div>

    </body>
</html>

Establecer el tipo y el tamaño de la fuente

De forma predeterminada, la mayoría de los navegadores utilizan una fuente serif como Times New Roman. Quiere configurar la página predeterminada a una fuente más popular. Además, quiere establecer el tamaño de la fuente de la página y varios encabezados.

  1. Dentro del archivo titulado style.css, agregue el siguiente CSS para establecer la familia de fuentes en Verdana con alternativas y el tamaño de fuente a 12 píxeles en el elemento html:

    html {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
}

    Está usando el elemento html para actualizar la fuente raíz y el ajuste de tamaño. Con el elemento permite utilizar html el rem dimensionamiento.

  2. Observe que la página se actualiza automáticamente con los cambios.

  3. Agregue el siguiente código CSS al final de style.css para establecer los tamaños desde h1 hasta h4.

    h1 {
    font-size: 1.6rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: 1.1rem;
}

    rem se basa en el tamaño de raíz, que es de 14 píxeles. Por ejemplo, este CSS establece el tamaño de h1 en 22,4 píxeles.

  4. La página se actualiza automáticamente en vscode.dev.

  5. Deje esta ventana abierta ya que la utilizará en el siguiente ejercicio.

Resultado y próximos pasos

La captura de pantalla siguiente es el resultado del CSS que aplicó en este ejercicio. Si quiere experimentar con diferentes fuentes y tamaños, puede modificar el CSS como desee.

Captura de pantalla de la página final como se representa en el explorador.