Página nosotros.html CURSO HTML+CSS PÁGINA WEB BÁSICA parte 06

Summary

En este video, el tutorial guía al espectador a través del proceso de creación de una página 'Nosotros' utilizando HTML y CSS. Comienza con la estructura básica de la página y la personalización de contenidos como texto e imágenes. Luego, se introduce Flexbox para crear una disposición flexible, ajustando el diseño para que sea completamente responsivo mediante el uso de medias queries. Se finaliza con un toque de estilo adicional, como la asignación de colores y pruebas de visualización en diferentes dispositivos, asegurando que la página se vea bien tanto en pantallas grandes como pequeñas.

Takeaways

• 😀 Se está trabajando en la creación de una página web, específicamente en la creación de nuevas páginas HTML y la modificación de la estructura base de la web.
• 😀 El contenido de las páginas se mantendrá en la misma estructura, pero se actualizarán las URL y el contenido de cada página (por ejemplo, cambiando 'index' a 'nosotros').
• 😀 Para crear una distribución similar a una página de ejemplo, se utilizarán dos 'div' dentro de una clase contenedora, uno para texto y otro para imágenes.
• 😀 La imagen colocada en la página debe tener un atributo 'src' adecuado, y en este caso se usó una imagen de paisaje como ejemplo.
• 😀 Para que la distribución se vea como la de una página de ejemplo, es necesario ajustar los estilos CSS, especialmente utilizando la propiedad 'display: flex' para organizar los elementos de manera flexible.
• 😀 Al trabajar con 'flexbox', se ajustaron los anchos de los elementos para que tengan un diseño más equilibrado y agradable visualmente.
• 😀 Un pequeño error se detectó en el código al colocar un párrafo dentro de un 'div' que no estaba bien estructurado, lo que causaba problemas en la visualización.
• 😀 Para asegurar que la página sea responsiva, se aplicaron cambios en los estilos CSS usando media queries, ajustando el ancho de los elementos según el tamaño de la pantalla.
• 😀 Se aplicaron estilos específicos a las imágenes dentro de los 'div' para que ocupen el 100% del ancho disponible en pantallas pequeñas.
• 😀 También se utilizaron estilos como 'overflow' y 'width' para mejorar la disposición de los elementos en pantallas de menor tamaño y garantizar una visualización correcta.
• 😀 Finalmente, se mostró cómo agregar color y personalizar aún más el diseño con flexbox, permitiendo que cada uno elija el estilo que más le guste, como el uso de un color verde agua para el fondo.

Q & A

¿Qué se va a crear en el sexto vídeo?

En el sexto vídeo, se va a crear una nueva página web en HTML, donde se establecerá una estructura básica con secciones como 'Inicio' y 'Nosotros'.

¿Qué se modifica principalmente en el diseño de la página?

El contenido y posiblemente algunas clases CSS serán modificadas, pero la estructura general de la página no cambia. Se realizan ajustes en el contenido específico de cada página como la de 'Nosotros'.

¿Cómo se organiza el contenido dentro de la página 'Nosotros'?

En la página 'Nosotros', se crea una sección con un título 'Quiénes Somos', seguido de un bloque con dos divs: uno para el texto descriptivo y otro para la imagen. Luego, se agrega más texto informativo en la parte inferior.

¿Qué significa que la página sea 'responsiva'?

Que la página se adapta a diferentes tamaños de pantalla, como dispositivos móviles, ajustando el diseño de los elementos para que se vean bien en todas las resoluciones.

¿Qué es lo que se hace para asegurar que la página sea responsiva?

Se utilizan reglas CSS con 'media queries' para cambiar la disposición de los elementos, como hacer que los divs se apilen en lugar de estar en fila en pantallas pequeñas. También se ajustan anchos y se configura la imagen para que sea flexible.

¿Qué significa el uso de 'display: flex' en CSS?

El 'display: flex' en CSS es una propiedad que permite organizar los elementos dentro de un contenedor de manera flexible, distribuyendo el espacio entre ellos y permitiendo una alineación más controlada.

¿Cómo se resuelve el error de los elementos dentro del contenedor 'caja'?

El error se resuelve moviendo el párrafo fuera de la clase 'caja' para que no sea tratado como un hijo dentro del contenedor. Esto permite que el párrafo y otros elementos se ubiquen correctamente.

¿Cómo se hace que las imágenes sean responsivas en la página?

Se asigna un ancho del 100% a la imagen dentro de su contenedor para que se ajuste al tamaño de su contenedor y se redimensione adecuadamente en pantallas más pequeñas.

¿Qué sucede cuando se ajusta el ancho de los elementos a un 100% en dispositivos móviles?

Cuando se ajusta el ancho de los elementos a un 100% en dispositivos móviles, los elementos ocupan todo el ancho disponible, lo que ayuda a que el diseño sea más accesible y legible en pantallas pequeñas.

¿Cómo se aplica un color a la caja que contiene los elementos 'Nosotros'?

Se puede agregar un color de fondo a la clase '.caja' utilizando la propiedad 'background-color', como en el ejemplo donde se utiliza un color verde agua (#e0f7fa) para darle un fondo atractivo a la sección.