Guía 05

Guía 05

DAWM / Proyecto01

Objetivo general

Utlizar reglas CSS en la presentación y la accesibilidad del contenido mediante el desarrollo de un currículum vitae digital para la presentación de información profesional de manera organizada y accesible en línea.

Actividades en clases

  1. Clona localmente tu repositorio curriculum.
  2. Utilice VSCode y habilite el Live Server.

Flex

  1. Edite la hoja de estilo externa ‘stylesheets/style.css’.

  2. Agregue la regla CSS al final de la hoja de estilos.

     nav ul {

     /* Modelo de diseño flexible */
     display: flex;									
     justify-content: space-around;
	
 }
  3. Actualice el navegador y compruebe los cambios.
  4. Versiona local y remotamente el repositorio curriculum.

Grid

  1. Edite la hoja de estilo externa ‘stylesheets/style.css’.

  2. Agregue la regla CSS al final de la hoja de estilos.

     section form {

     /* Modelo de diseño en cuadrícula */
     display: grid;									
     row-gap: 0.5rem;

 }
  3. (STOP 1) Actualice el navegador y compruebe los cambios.
  4. Versiona local y remotamente el repositorio curriculum.

Diseño: Flex vs Grid

  1. Identifique y use la estructura de elementos en el archivo index.html

     <section id="resumen">
     <h2 class="subtitle">Resumen</h2>
     <p>Breve descripción de tus habilidades y experiencia.</p>
     <img id="photo" src="https://placehold.co/300x200" 
              alt="Placeholder de imagen">
 </section>
    • Cuya vista previa en el navegador es:

    diseño 00

  2. Considere el siguiente diseño objetivo:

    diseño 01

  3. Coloque y compruebe el resultado de agregar una a una las siguientes reglas y propiedades CSS en la hoja de estilo externa.

    Contenedor
    Selector Propiedad y Valor CSS MDN
    #resumen /* Modelo de diseño flexible */
    display: flex;     		Ir
    /* Distribuye el espacio entre y alrededor
    de los items en el eje principal */
    justify-content: space-evenly;     		Ir
    /* Alinea los elementos al centro dentro
    del bloque respecto con el eje transversal */
    align-items: center;     		Ir
    /* Eje principal: por columna */
    flex-direction: column;     		Ir
    /* Altura de 24% del área de visualización */
    height: 24vh;     		Ir
    /* Apilamiento de elementos: ajustado hasta ocupar
    el máximo */
    flex-wrap: wrap;     		Ir
    Contenido
    Selector Propiedad y Valor CSS MDN
    #resumen h2 width: 50%;
    #resumen p width: 50%;
    #resumen img max-width: 50%; Ir
    Haga click aquí para ver la solución
     
    

                     #resumen {

                         /* Modelo de diseño flexible */
                       display: flex;

                       /* Distribuye el espacio entre y alrededor
                          de los items en el eje principal */
                       justify-content: space-evenly;


                       /* Alinea los elementos al centro dentro
                          del bloque respecto con el eje transversal */
                       align-items: center;

                       /* Eje principal: por columna */
                       flex-direction: column;

                       /* Altura de 24% del área de visualización */
                       height: 24vh;

                       /* Apilamiento de elementos: ajustado 
                       hasta ocupar el máximo */
                       flex-wrap: wrap; 

                     }

                     #resumen h2, #resumen p {
                       width: 50%;
                     }

                     #resumen img {
                         max-width: 50%;
                     }
  4. (STOP 2) Actualice el navegador y compruebe los cambios.
  5. Versiona local y remotamente el repositorio curriculum.

Documentación

Fundamental

Términos

Colocación de elementos, flexbox, grid

Referencias