Skip to content

Latest commit

 

History

History
172 lines (109 loc) · 7.71 KB

guia05.md

File metadata and controls

172 lines (109 loc) · 7.71 KB
theme
jekyll-theme-leap-day

Guía 05

DAWM / Proyecto02

Actividades previas

Ejercicio de colocación de elementos

  • Descargue el ejercicio de colocación.
  • Utilice Visual Studio Code para abrir el ejercicio de colocación. Use o habilite el Live Server de Visual Studio Code.
  • Habilite el inspector en el navegador para visualizar los cambios en vivo.

Grid vs Flexbox

  • Considere el siguiente diseño al aplicar flexbox y grid para la colocación de elementos.

diseño

Grid por columnas

  • Modifique el archivo css/grid_columnas.css.

  • Utilice el selector CSS para acceder a la etiqueta <main>. Aplique cada una de las siguientes propiedades y valores. Verifique los cambios en el navegador.

    
 	/* Modo de colocar los elementos internos en una rejilla */
 	display: grid; 

 	/* Separación entre filas */
 	row-gap: 0.5rem; 

 	/* Separación entre columnas */
 	column-gap: 0.5rem; 

 	/* Número de columnas: 6 * 1fr */
 	grid-template-columns: repeat(6, 1fr);

  • Utilice los selectores CSS para acceder a cada elemento <section> que se encuentran dentro de la etiqueta <main>.

  • Coloque los valores para cinicio, cfinal, finicio y ffinal. Verifique los cambios en el navegador

    
 	grid-column: cinicio / cfinal;
 	grid-row: finicio / ffinal;

Grid por area

  • Modifique el archivo css/grid_areas.css.

  • Utilice el selector CSS para acceder a la etiqueta <main>. Aplique cada una de las siguientes propiedades y valores. Verifique los cambios en el navegador.

    
 	/* Modo de colocar los elementos internos en una rejilla */
 	display: grid; 

 	/* Separación entre filas */
 	row-gap: 0.5rem; 

 	/* Separación entre columnas */
 	column-gap: 0.5rem; 

 	/* Nombres de las áreas*/
 	grid-template-areas: "A A A A A A"
                          "B B B Q Q Q"
                          "D D E E F F"
                          "M M M T T T"

  • Utilice los selectores CSS para acceder a cada elemento <section> que se encuentran dentro de la etiqueta <main>.

  • Coloque los valores para idarea. Verifique los cambios en el navegador

    
 	grid-area: idarea;

Flexbox

  • Modifique el archivo css/flexbox.css.

  • Utilice el selector CSS para acceder a la etiqueta <main>. Aplique cada una de las siguientes propiedades y valores. Verifique los cambios en el navegador.

    
 	/* Modo de colocar los elementos internos de manera flexible */
   display: flex; 

   /* Eje primario con la dirección de los elementos */
   flex-direction: row;

   /* Separación entre filas */
   row-gap: 0.5rem; 

   /* Separación entre columnas */
   column-gap: 0.5rem; 

   /* Los elementos ocupan el espacio de acuerdo a su tamaño */
   flex-wrap: wrap;

   /* Los elementos están distribuidos uniformemente en el eje primario  */
   justify-content: space-between;

   /* Los elementos se estiran para llenar el eje transversal */
   align-items: stretch;

  • Utilice los selectores CSS para acceder a cada elemento <section> que se encuentran dentro de la etiqueta <main>.

  • Coloque los valores para valor. Verifique los cambios en el navegador

    
 	flex-basis: valor%;

 	/* El espacio restante en el contenedor se distribuirá equitativamente entre todos los elementos internos */
 	flex-grow: 1;

Actividades

Diseño

  • Tome como referencia Frontend Practice para elegir la colocación de elementos de su proyecto.

    Mínimo: Su diseño NO solo debe considerar que los elementos estén apilados. Al menos, una fila debe contener dos elementos.

  • Clona localmente tu repositorio curriculum.

  • Aplique la colocación de elementos en su proyecto.

  • Versiona local y remotamente el repositorio curriculum.

Documentación

Fundamental

  • Colocando elementos con Grid Garden y Flexbox Froggy via X

Descubre #CSSGrid y #Flexbox de manera divertida con Grid Garden y Flexbox Froggy. 🎮🌐 Aprende jugando . 💻🚀
Jardín Grid: https://t.co/SLubvps9gb
Flexbox Froggy: https://t.co/e17lQydbXT
¡CSS nunca fue tan divertido! 🌈✨#WebDev #CodingFun pic.twitter.com/OPd5eAouGd

— Cristian Omar Guzman (@cristiank170319) October 7, 2023
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Términos

Colocación de elementos, flexbox, grid

Referencias