👣 Paso 14 - Propiedad position

👋 ¡Bienvenido a tu siguiente paso!

Llegó el momento de ver la propiedad de position, y sus valores relative, absolute, fixed, sticky.

¡Continuemos! 🚀

Practicando la propiedad position

El objetivo de esta actividad es poder practicar la propiedad de position y ver cómo se comportan los
elementos.

✏️ Instrucciones

Para entender cómo funcionan la propiedad position en CSS, vamos a despegarnos un poco del sitio que
venimos armando y vamos a practicar por fuera, para ello, sigue estos pasos:

1. Crea una carpeta llamada 📂 position a la misma altura que la carpeta 📂 display, dentro de la carpeta
📂 position coloca un archivo llamado position.html y escribe el siguiente código HTML.
2. Dentro de la carpeta 📂 position guarda la 👉 siguiente carpeta que contiene las imágenes que vamos a
utilizar (esta carpeta se llama images)

3. Crear el archivo styles.css que ya se encuentra vinculado en el html y colca el siguiente css

📌 Veremos algo así

Ahora vamos a comenzar a mover los elementos para visualizar las diferentes posiciones.

➕ Static: es la posición por defecto, es la que tienen los elementos naturalmente.

➕ Position Relative: el elemento se ubica en una posición relativa a su posición original.

4. Aplica el siguiente CSS y observa cómo se muve la imagen relative .

💡Lo bueno de la propiedad position es que podemos mover el elemento a través de las propiedades
top, left, right, bottom.

Haz la prueba cambiando top y left por bottom y right.

➕ Position Absolute: el elemento se salta el flujo y se ubica en relación a la ventana del navegador

5. Aplica el siguiente CSS y observa cómo se mueve la imagen con position:absolute;

.item-absolute { position: absolute; top: 10px; left: 10px; }

6. Vamos a aplicar el siguiente CSS al contenedor padre del elemento absolute.

💡 De esta manera es como combinamos la posición absoluta con la posición relativa.

➕ Position Fixed: el elemento se salta el flujo y se ubica en relación a la ventana del navegador al igual
que en absolute, pero la diferencia es que al hacer scroll, elemento queda fijo y no se mueve

7. Aplica el siguiente CSS y observa cómo se ubica la imagen con position:fixed;

🖥️ Cuando todos hayan logrado seguir las instrucciones, de a uno vayan compartiendo pantalla mostrando
su código y el resultado de su CSS.
Para tener en cuenta

 display es una propiedad que nos permite modificar el comportamiento de los elementos html, y
“pisar” su comportamiento original
 position es una propiedad que permite modificar la ubicación de los elementos en el espacio y
quebrar su dinámica natural.
🏠 Paso 15 - ¡Puesta a punto de tu
sitio!
👋 ¡Bienvenido a tu siguiente paso!

¡Hola! Seguimos avanzando 👟

Hasta aquí hemos visto varios puntos claves en cuanto a HTML y CSS. Vimos cómo crear elementos semánticos
como <section> y elementos no semánticos como <div>. Vimos cómo organizar elementos con CSS
utilizando display:flex; pero también cómo podemos modificar el comportamiento de los elementos en bloque y
en línea.

Además conocemos el modelo de cajas, que muestra que cada elemento está compuesto por márgenes, bordes,
paddings y contenido y que podemos modificar estos valores desde CSS para, por ejemplo, espaciar elementos.

En los siguientes pasos vamos a aprovechar estos conocimientos para dejar el sitio listo.

Vamos 🚀

En esta oportunidad queremos traer la siguiente herramienta para que puedan utilizar en su sitio:

 Utilizar fuentes externas de https://fonts.google.com/

¿Cómo agregar una fuente?

https://youtu.be/mPrMcsFvZz4?si=uVqdrc5M6sxxKYsF
Asegúrate de:

 Se recomienda ver el tip sobre Google Fonts y probarlo en tu sitio web.

👣 Paso 16 - ¡Definiendo el CSS!
👋 ¡Bienvenido a tu siguiente paso!
Llegó el momento de organizar nuestro sitio con CSS y aplicar lo aprendido hasta ahora!

¡Continuemos! 🚀

Actividad - Puliendo el CSS

El objetivo de esta actividad es poder tomarse el tiempo para agregar el CSS necesario para dejar listo su sitio
web.

➕ Referencia de cómo debería verse la estructura del sitio

Les dejamos la siguiente referencia de cómo podría verse la estructura del sitio. ¡Recuerden que como bien
mencionamos, es una referencia y no necesariamente tiene que quedar igual, pueden darle su propio estilo,
colores y orden!
¿Cómo logro esto?

Te dejo el siguiente video para poder orientarte en el armado del CSS

💡 Es momento de aplicar estilos en tu sitio. Comparte con tus compañeros cómo va quedando tu web,
aprovecha a ver las dudas con compañeros o instructor.
👣 Paso 17 - Agregando elementos al
sitio
👋 ¡Bienvenido a tu siguiente paso!

Llegó el momento de agregar más elementos a nuestro sitio y agregar el CSS necesario para poder
completarlo.

Actividad - Continuamos armando el sitio web

Aprovechemos lo aprendido hasta acá sobre html y css para continuar agregando contenido a
nuestra página web.

Tomando como referencia la web que vimos https://www.minicarbono.com/ les proponemos replicar el
siguiente diseño en su web, tanto el HTML como el CSS:

¿Qué pueden colocar en estas tarjetas?

Si tienes trabajos previos realizados, puedes poner una imagen de estos proyectos con su título, texto y
detalle. Sino, puedes imaginar qué proyectos quisieras crear a futuro o colocar ciertos gustos como comida
preferida o peli! Dejen volar su imaginación! ☁️

💡 Recuerden que existen muchas propiedades de CSS que podemos aplicar, entre ellas el border-
radius (que usamos por ejemplo para redondear el borde de la imagen). Pueden ver más sobre esta
propiedad en el siguiente link 👉border-radius
📌 Para tener en cuenta: el estilo de las cajas es igual en ambas. Se componen de una imagen, un título,
una descripción y un botón de saber más. ¿Cómo harían para reutilizar el estilo y no tener que
escribirlo más de una vez en css?

➕ Referencia de cómo podría verse la estructura del sitio

💡 Es momento de aplicar estilos en tu sitio. Comparte con tus compañeros cómo va quedando tu
web, aprovecha a resolver las dudas con compañeros o instructor.