HTML5/CSS Parte 2
Continuamos aprendiendo sobre HTML5 y distintas propiedades de CSS con el fin de construir una grilla estilo feed de instagram
APUNTES DE LA CLASE
vh: viewport height (alto)
vw: viewport width (ancho)
Sirve para el responsive. Se utiliza en momentos dónde tengo un elemento que ocupa ancho o alto completo. Se puede agregar a cualquier elemento. Si se pone 100 vh Se adapta al alto completo del dispositivo
align-items: center; alinea elementos en la altura
justify-content: center; alinea según ancho
!important Se le pone a la línea que necesites que priorice sobre otra igual que esté en una clase padre.
gap: 20px; Espacio entre divs de una grilla
display: grid; Es otra alternativa al flex. Es para hacer un layout de la web, una grilla.
grid-template-columns: 1fr 1 fr 1fr; Para cantidad de columnas en proporción. Medida relativa, como un %. En este caso son 3 columnas iguales. Se puede combinar valores en una misma propiedad. Ejemplo: 100px 100px 1fr, 10% 1fr 1fr.
grid-template-columns: repeat (3, 1fr) Es lo mismo que arriba, resumido.
Luego, continuamos con el ejercicio, para aplicar lo aprendido hoy.
Material de apoyo:
https://openwebinars.net/blog/que-es-flexbox/
https://www.dreamingbytes.com/como-hacer-imagenes-redondas-con-css/
Qué es Flexbox?
CSS Grid. Introducción Práctica
CONCLUSIONES
- Avanzamos con nuevas propiedades de css, fue una clase suuuper intensa, pero logré avanzar en la actividad usando lo que aprendí y mis apuntes de hoy.
- Se agradece el trabajo en equipo, para apoyarnos, resolver dudas y ayudarnos. Ha sido una muy buena experiencia.
- Existen varias formas de llegar a un mismo resultado, como también muchas posibilidades de que no resulte lo que necesitas hacer por diferentes factores, como una coma, por ejemplo. Eso es lo entretenido y a la vez frustrante de la programación, pero vamos avanzando de a poco!
Belén Ardiles / Curso UX-UI 