Miércoles 21 de Abril

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.

Nos reunimos en grupos para trabajar esto.En mi grupo, Benjamín nos ayudó a repasar cada uno de los pasos para lograr lo que el profesor enseñó y mostró, y también con los apuntes que había tomado logré armar esto:

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!

Leave a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s