Hoy comenzamos con una sesión grupal (hasta cierto punto), dónde seguimos trabajando el ejercicio anterior de las grillas, fue un tramo tranquilo aunque en nuestro caso, excesivo, en nuestro grupo alcanzamos a subir todos nuestros ejercicios a tiempo, como el ejercicio se componía de dos partes, se consideró una sesión extra para este día.
En la sesión anterior alcancé a subir ambas partes del ejercicio, sin embargo la grilla responsive tiene un toque personal que consiste en contenido responsive (así es, no sólo cambia el layout y sus columnas, sino que también el contenido de los objetos «cajas» involucradas). Para conseguir ese resultado no tuve más que recurrir a los *pseudoselectores*.
Y entonces ¿qué diablos* es un pseudo-selector o pseudo-elemento?, no hay manera de explicarlo con palabras simples, lisa y llanamente porque no se puede entender y asimilar sin el ejemplo práctico, pero un sitio web por ahí lo define como:
Los pseudo-elementos en CSS son un mecanismo para acceder a partes del HTML que no tienen asociado un nodo en el DOM.»
Es decir, pueden pintar elementos en pantalla que no tienen una *asociación directa* con un elemento html, en el caso particular de este ejercicio, cree un «div», con una clase «caja-2» (la primera caja se ocupó en la primera parte del ejercicio), que fue todo lo que declaré en el archivo html, luego en el archivo css fue dónde le «inyecté» contenido a través del pseudo-elemento.
Como se puede apreciar en las capturas es en el css dónde a través de la propiedad «content» es que podemos inyectarle contenido a la etiqueta html seleccionada, y es la manera más eficiente de crear cajas «dinámicas» utilizando html y css.
Luego de todos los pasos anteriores, se intuye que para crear el *contenido responsive* es necesario re-declarar el contenido de la «caja::before» en los media query correspondientes.
Tal y como demuestran las imágenes, una vez entendemos cómo funciona el pseudo-elemento y lo conectamos con la mecánica y funcionamiento de los media query, podemos combinarlos y crear esta especie de «grilla con contenido dinámico».
Bloque 2 – Avance tarea grupal
Una vez finalizado el break, comenzamos esta segunda etapa de con una nueva sesión grupal dónde trabajamos nuestra landing (encargo entregado hace ya dos días atrás) cuyo resultado final entregaremos el día 11 de Mayo (anotado en mi calendario).
Avanzamos en la estructura, el profesor pasó por nuestra sala y le pusimos al día respecto al avance del proyecto.
Conclusión
Para resumir, hoy fue un día de mucha práctica y consenso en nuestro grupo, pudimos definir y encaminar el proyecto de la landing y conversar respecto a la distribución de las tareas, es un grupo muy cohesionado y comprometido.