Front 03

👣 Paso 8 - Construyendo el sitio web -
Parte 2
👋 ¡Bienvenido a tu siguiente paso!
Continuamos construyendo tu sitio web. Es hora de poner en código lo que hemos visto hasta aquí.
¡No te preocupes que siempre hay tiempo para modificarlo!
Construyendo la sección principal del sitio - HTML
El objetivo de esta actividad es construir el resto del sitio con sus elementos semánticos.
Tomamos como referencia la siguiente imagen:
Para lograrlo vamos a seguir estos pasos:
Estructura Principal:
 La página debe contener un elemento <main> con el ID seccion-principal.
 Dentro del elemento <main>, debes crear dos secciones <section>: una con la clase seccion-1 y la otra con
la clase seccion-2.
Sección 1: Acerca de mí
 Dentro de la seccion-1, crea un <div> con la clase acerca-de.

 Dentro del div anterior, añade un encabezado de nivel 2 (<h2>) con el texto "Acerca de mí".
 Añade dos párrafos (<p>) debajo del encabezado. El primer párrafo debe tener la clase parrafo1 y el
segundo la clase parrafo2.
 El primer párrafo debe contener el texto: "¡Bienvenido a mi página! Aquí, aprenderás más sobre mí."
 El segundo párrafo debe contener información personal, por ejemplo: "Me llamo Tere, nací en Buenos
Aires y vivo en Caballito. Me gusta el helado y salir a pasear en días de sol. Me encantaría aprender a
programar para poder ayudar a las personas a mostrar lo que hacen."
Imagen Personal:
 Aún dentro de la seccion-1, pero fuera del div con clase acerca-de, crea otro div con la clase acerca-
imagen.
 Dentro de este div, añade una imagen (<img>) con el src apuntando a "img/hero-img.png" y un alt con la
descripción "imagen personal". (Para este punto puedes buscar una foto tuya o una imagen genérica
en Unsplash*)
💡Tip: *Unsplash es un banco de imágenes gratuitas que puedes utilizar para diversos fines. En este caso,
cumplen la función de poder trabajar con elementos gráficos de tu página web a modo de ejemplo sin emplear
tiempo en buscar la imagen definitiva para la misma.
Sección 2: Imagen de Carrusel
 En la seccion-2, añade una imagen (<img>) con el src apuntando a "img/carrusel-img.png" y un alt con la
descripción "imagen de carrusel".
Footer
 Para el footer utilizar la etiqueta semántica <footer></footer> , agregar un título <h3>, y armar un menú
como en el header con los items que desees.
¿Cómo logro esto? Si tienes dudas, podrás ver el paso a paso en el siguiente video:
https://youtu.be/prcQ3j-1hQA?si=yfPh14lXlary8Kzb
🏠 Paso 9 - ¡Introducción a Flexbox!
¡Hola! Seguimos avanzando 👟
Ahora vamos a enfocarnos en la propiedad display:flex;. Los invitamos a que puedan practicar con esta propiedad,
ya que conocerla facilita mucho la manipulación de los elementos de una web.
¿Listo? ¡Vamos! 🚀
Aquí es donde encontrarás el material descargable que complementará los ejercicios prácticos que vamos a ver en
los siguientes pasos.
Para tu encuentro en vivo te dejamos el siguiente material que te ayudará a profundizar en el contenido
👉 Posicionamiento en CSS - Flexbox
📢 ¡Importante!
 No debes memorizar, concéntrate en entender el concepto. La práctica hará que luego puedas aplicarlo con
más agilidad.
 Si hay algo que no comprendes, ¡no te preocupes! Anótalo y pregunta a tus compañeros o mentor en el
encuentro en vivo.
Otras herramientas útiles al momento de programar son los comentarios.
En CSS y HTML, los comentarios se utilizan para añadir notas explicativas en el código, lo que puede ser útil para
el desarrollo y mantenimiento del mismo. Aquí te muestro cómo puedes añadir comentarios en ambos lenguajes:
HTML
En HTML, los comentarios se crean usando la sintaxis . Todo lo que esté dentro de estos marcadores será
tratado como un comentario y no se renderizará en la página web.
CSS
En CSS, los comentarios se crean utilizando la sintaxis /* ... */. Todo lo que esté dentro de estos marcadores será
tratado como un comentario y no afectará a la presentación de la página web.
Recuerda que los comentarios son útiles no solo para dejar notas, sino también para desactivar temporalmente
ciertas líneas de código durante la depuración y el desarrollo.
Asegúrate de:
 Guardar el material teórico para futuros repasos.

👣 Paso 10 - Flexbox en CSS
¡Hola! Ahora expandirás tu documento HTML principal añadiendo otros elementos para que se acerque a la versión
final. ¡Paso a paso! 👣
Para organizar el sitio vamos a ver una propiedad que nos va a ayudar a posicionar los elementos de una manera
muy sencilla, esta es la propiedad flexbox.
Flexbox es una herramienta en CSS que nos ayuda a organizar y alinear elementos HTML en una página web,
como si fueran bloques en un juego.
Es genial porque incluso si no sabemos cuán grandes serán esos bloques, Flexbox puede ayudarnos a que se vean
bien juntos. Es como tener un sistema mágico que organiza automáticamente los bloques para que se adapten bien
en pantallas grandes o pequeñas.
Practicando Flexbox
Para entender cómo funcionan la propiedad display:flex; CSS, vamos a despegarnos un poco del sitio que venimos
armando y vamos a practicar por fuera, para ello, sigue estos pasos:
El objetivo de esta actividad es crear un mini sitio cómo el siguiente:

1. Crea una carpeta llamada flexbox, dentro de ella coloca un archivo llamado flexbox.html y pega el siguiente
HTML.
2. Crea un archivo styles.css y coloca el siguiente código
3. Descarga la siguiente carpeta de imágenes y colócala dentro de la carpeta flexbox
📌 Flexbox utiliza dos tipos de cajas “contenedores” y “items”. El trabajo de un contenedor es agrupar un montón
de items y definir cómo se colocan. El contenedor es el que define cómo se van a comportar los items dentro
del mismo.
4. Agrega la propiedad display:flex; al selector .menu-container

➕ Alinear elementos: una vez que le dije al contenedor que se tiene que comportar de modo flexible, el segundo
paso es alinear los elementos dentro del mismo. Esto lo hacemos con la propiedad justify-content. Que puede
tomar los valores center, flex-start, flex-end, space-around, space-between
5. Agrega la propiedad justify-content:center; al selector .menu-container. Luego prueba modificar la propiedad

para ver cómo se comportan los elementos.
📌 En este caso, como el elemento menu-container, sólo tiene al elemento menu dentro, este se comportará como
bloque. Pero veams que pasa si le aplicamos la propiedad display:flex; al elemento menu y no al container.
➕ Distribuir múltiples elementos: el div con la clase. Menu, posee 3 divs dentro. Entonces vamos a ver cómo al
usar las mismas propiedades los elementos se distribuyen a lo ancho
6. Agrega el siguiente CSS al elemento .menu
➕ Agrupar elementos flexibles: ¿Qué sucede si queremos que el registrarse y el log in, se encuentren bien a la
derecha y la fecha bien a la izquierda? Veamos entonces, cómo agrupar elementos.
7. Crea un div que agrupe al div .signup y al div .login, y que ponle como clase links. Debería quedar así.
8. Para que los div de registrarse y login queden a la misma altura, debemos agregar al div con la clase links
un display:flex;
Agrega el siguiente código:
📌 Hasta aquí deberían ver algo como esto
➕ Alineamiento vertical: Además de ubicar los elementos de manera horizontal, flexbox permite ubicar los
elementos de manera vertical
9. Agrega el siguiente HTML al que ya tenías.
10. Agrega el siguiente CSS al que ya tenías.

📌align-items:center; ubicará los elementos en el centro. Revisa el resto de opciones para alinear los items,
como flex-start, flex-end, stretch, baseline.
➕ Agrupar elementos: Veremos cómo agrupar los elementos cuando se achica la ventana del navegador.
11. Agrega el siguiente html al que ya tenías
12. Agrega el siguiente css al que ya tenías y prueba ocultar flex-wrap: wrap; y achica la ventana del navegador
para ver qué ocurre
Ahora, tómate el tiempo de practicar display:flex; 🚀

Front 03

Cargado por

Copyright:

Formatos disponibles

Front 03

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Front 03

Cargado por

Copyright:

Formatos disponibles

👣 Paso 8 - Construyendo el sitio web -

¡No te preocupes que siempre hay tiempo para modificarlo!

Construyendo la sección principal del sitio - HTML

Tomamos como referencia la siguiente imagen:

Para lograrlo vamos a seguir estos pasos:

 Dentro de la seccion-1, crea un <div> con la clase acerca-de.

Sección 2: Imagen de Carrusel

¡Hola! Seguimos avanzando 👟

👉 Posicionamiento en CSS - Flexbox

Otras herramientas útiles al momento de programar son los comentarios.

 Guardar el material teórico para futuros repasos.

El objetivo de esta actividad es crear un mini sitio cómo el siguiente:

2. Crea un archivo styles.css y coloca el siguiente código

3. Descarga la siguiente carpeta de imágenes y colócala dentro de la carpeta flexbox

4. Agrega la propiedad display:flex; al selector .menu-container

5. Agrega la propiedad justify-content:center; al selector .menu-container. Luego prueba modificar la propiedad

6. Agrega el siguiente CSS al elemento .menu

Agrega el siguiente código:

📌 Hasta aquí deberían ver algo como esto

9. Agrega el siguiente HTML al que ya tenías.

10. Agrega el siguiente CSS al que ya tenías.

11. Agrega el siguiente html al que ya tenías

También podría gustarte