No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
5 Hrs
9 Min
4 Seg

Estilizando el Hero: información del hero

12/27
Recursos

¿Cómo mejorar la apariencia de un elemento superpuesto?

Al ajustar el diseño de nuestro sitio web, podemos aumentar la elegancia y eficiencia visual aplicando ciertos cambios a los elementos superpuestos. Al seguir algunos pasos clave, podemos estilizar nuestros componentes para que queden ordenados y atractivos.

¿Cómo ajustar márgenes y colores en CSS?

Para empezar, podemos modificar los márgenes y colores de los textos e imágenes en CSS. Definiendo propiedades como width, color, y padding, podemos posicionar y estilizar elementos para mejorar su visibilidad y disposición en el navegador.

.informacion .contenedor {
  width: 100%;
  color: white; /* Texto en color blanco */
  padding: 0 50px; /* Margen izquierdo y derecho de 50px */
}

¿Cómo alinear imágenes y texto con Flexbox?

Usar Flexbox es una técnica eficaz para alinear elementos. Con Flexbox, podemos asegurar que los componentes como imágenes y textos estén uno al lado del otro fácilmente.

.contenedor {
  display: flex; /* Aplicando Flexbox */
}

¿Cómo ajustar márgenes específicos de elementos?

Una forma de separar un texto de una imagen es utilizando márgenes específicos, por ejemplo, margin-left para distanciar el texto de la imagen.

.informacion {
  margin-left: 20px; /* Margen izquierdo de 20px */
  font-weight: bold; /* Texto en negrita */
}

¿Cómo aplicar estilos a elementos específicos?

Algunos elementos requerirán estilos únicos, como colores específicos o márgenes adicionales. Es importante saber aplicar estos estilos de forma que resalten sin desentonar con el diseño general.

¿Cómo dar estilo a un texto dentro de un span?

Los span usualmente tienen un display de tipo inline, lo cual limita el uso de ciertos estilos como márgenes. Cambiar su display a inline-block puede ser la solución adecuada.

.informacion span {
  color: #B5B5B5; /* Color gris */
  display: inline-block;
  margin-bottom: 70px; /* Margen inferior */
}

¿Cómo centrar elementos verticalmente con CSS?

Una técnica efectiva para centrar elementos es utilizar transform combinado con translate sobre el eje Y (translateY). Este método ajusta el elemento para que esté perfectamente centrado, sobre todo cuando se posiciona usando position: absolute.

¿Cómo aplicar transform y translate para centrar?

Se puede modificar el posicionamiento de los elementos utilizando transform: translateY(-50%), lo que asegura que el elemento se centre completamente en su contenedor.

.informacion .contenedor {
  top: 50%; /* Posiciona al 50% desde arriba */
  transform: translateY(-50%); /* Centra el elemento */
}

Al aplicar estos estilos, podemos empezar a ver cómo CSS nos permite transformar una página desordenada en una presentación visualmente armoniosa. Experimentar con diferentes configuraciones y estilos te ayudará a desarrollar un sentido más intuitivo sobre cómo funcionarán tus cambios de CSS en un sitio web real. ¡Sigue explorando y practicando! La práctica es fundamental para el dominio de CSS y el desarrollo web en general.

Aportes 23

Preguntas 15

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Va genial el curso, en mi caso, ya tengo conocimientos de HTML y CSS, pero sigo aprendiendo con estos tips que muy acertadamente da el profesor.
Para los que recién inician, apenas acaben este curso les recomiendo iniciar el curso definitivo de html y css con el gran profesor Diego De Granda.

La idea de usar top y transform es… bastante ingeniosa, cuanto capte la idea me sorprendí 👀

Este es mi primer acercamiento a CSS y la verdad me está encantando. Creo que he encontrado algo en lo que enfocarme.

_!!Qué manera de explicar bacana!! _👌😎

LES COMPARTO COMO SE VE MI HERO, ME ENCANTÓ ESTA IMAGEN DE LA COMPUTADORA POR QUE ASÍ PUEDO PONER LA INFORMACIÓN COMO SI ESTUVIERA EN LA PANTALLA!!

  • margin-left: es una propiedad que establece el margen izquierdo de un elemento.
  • font-weight: es una propiedad que establece el grosor de la fuente de un elemento. Los valores comunes son “normal” (predeterminado) y “bold” (negrita).
  • margin-bottom: es una propiedad que establece el margen inferior de un elemento.
  • transform: es una propiedad que se utiliza para aplicar transformaciones 2D o 3D a un elemento. Por ejemplo, se puede rotar, escalar, trasladar, sesgar y deformar elementos con esta propiedad.
  • top: es una propiedad que establece la posición superior de un elemento posicionado.

probablemente aún no estamos listos para hablar de esto

{
display: grid;
place-items: center;
}

Es la magia que más me ha gustado para centrar un elemento!!

Me encanta todo lo que se puede hacer con CSS

por fin entendi por qué no me funcionaban los margenes!!

ciertos conceptos me hacen sentir super confundido pero en la practica todo cambia y se ve muy bien esteticamente.

“¡Oh Toodles!”

Para definir el padding y el margin, cada unidad tiene sus ventajas: - **px (píxeles)**: Fija y no escalará con el tamaño del texto o el contenedor. Útil para elementos que requieren un tamaño preciso. - **em**: Relativo al tamaño de la fuente del elemento. Ideal para diseños flexibles que necesitan adaptarse a diferentes tamaños de texto. - **% (porcentaje)**: Relativo al tamaño del contenedor padre. Muy útil para diseños fluidos que deben adaptarse a diferentes tamaños de pantalla. Se recomienda elegir según el contexto y diseño deseado.
En esta clase se enseñó a estilizar la sección "Hero" de una página web usando HTML y CSS. Se explicó cómo organizar elementos en capas, aplicar colores, usar padding para espacio interno, y cómo utilizar Flexbox para alinear la imagen y texto. También se mostró cómo centrar verticalmente el contenido con propiedades como `top` y `transform`. La práctica con estas propiedades es crucial para dominar el diseño web.
Me encanta este curso, es la segunda vez que lo veo y me sigue pareciendo genial cada clase. La verdad para quienes estamos iniciando en este mundillo cada cosa por sencilla que parezca logra sorprendernos.
![](https://ibb.co/5nG2F1L)Saludos compañeros, no se por que las imágenes en el navegador no me salen bien. ![](https://ibb.co/5nG2F1L) he echo todo tal cual.![]()![](escritorio/captura2)

Quiero aprender más con este profe:
https://platzi.com/profes/retaxmaster/

.

Translate me aparece como una propiedad inválida
transform: translate Y (-50%);

Si hace falta mas practica para poder entender más esta parte de translateY, trabajare en ello.

ya me estoy emocionando mucho con este curso y orita lo que veo es que cuando ago zoom al navedador la imagen del profe se alarga como un huevo y no se queda como circulo ,

crear display para modificar el espacio del span display-block

Muy interesante, tengo algo de tiempo utilizando CSS y HTML y no recuerdo haber visto antes ese “truco” con el translateY, excelente explicación =)

yaaaa que bien jajaja por fin quedo bien mi css