Guía 05

DAWM / Proyecto01

Actividades previas

• Colocación de elementos

Actividades en clases

Diseño

1. Elige la colocación de elementos del sitio. Toma como referencia los ejemplos de Frontend Practice.

   Mínimo: Al menos, una fila debe contener dos elementos y una fila debe contener tres elementos.

2. Clona localmente tu repositorio curriculum.
3. Aplica flexbox o grid de acuerdo con la colocación de elementos del sitio.
4. (STOP 1) Compruebe el resultado en el navegador.
5. Versiona local y remotamente el repositorio curriculum.

Documentación

• En A Complete Guide to Grid existe una explicación extensa del uso de Grid.
  • Otras opciones: Layoutit Grid: Learning CSS Grid Visually With a Generator y grid.layoutit.
• En A Complete Guide to Flexbox existe una explicación extensa del uso de Flexbox.
  • Otras opciones: Don’t Overthink It (Flexbox) Grids y An Interactive Guide to Flexbox.

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

Términos

Colocación de elementos, flexbox, grid

Referencias

• Pseudoclases y pseudoelementos - Aprende sobre desarrollo web MDN. (2021). Retrieved 31 May 2022, from https://developer.mozilla.org/es/docs/Learn/CSS/Building__blocks/Selectors/Pseudo-classes__and__pseudo-elements
• Pseudo-classes - CSS MDN. (2022). Retrieved 31 May 2022, from https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-classes
• Pseudoelementos - CSS MDN. (2022). Retrieved 31 May 2022, from https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-elements
• 3.4. Pseudo-clases (CSS avanzado). (2022). Retrieved 31 May 2022, from https://uniwebsidad.com/libros/css-avanzado/capitulo-3/pseudo-clases
• 3.5. Pseudo-elementos (CSS avanzado). (2022). Retrieved 31 May 2022, from https://uniwebsidad.com/libros/css-avanzado/capitulo-3/pseudo-elementos
• Relación de Grid Layout con otros métodos de diseño y posicionamiento - CSS - CSS MDN. (2021). Retrieved 31 May 2022, from https://developer.mozilla.org/es/docs/Web/CSS/CSS__Grid__Layout/Relationship__of__Grid__Layout
• Don’t Overthink It (Flexbox) Grids CSS-Tricks. (2016). Retrieved 31 May 2022, from https://css-tricks.com/dont-overthink-flexbox-grids/
• flexbox-playground. (2022). Retrieved 31 May 2022, from https://flexbox.netlify.app/
• A Complete Guide to Flexbox CSS-Tricks. (2013). Retrieved 31 May 2022, from https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• A Complete Guide to Grid CSS-Tricks. (2021). Retrieved 31 May 2022, from https://css-tricks.com/snippets/css/complete-guide-grid/
• Layoutit Grid: Learning CSS Grid Visually With a Generator CSS-Tricks. (2020). Retrieved 1 June 2022, from https://css-tricks.com/layoutit-grid-learning-css-grid-visually-with-a-generator/
• Simple HTTP server in Python - Anurag Kumar. (2022). Retrieved 1 June 2022, from https://www.hackerearth.com/practice/notes/simple-http-server-in-python/