hola hay casos de paginas web que empiezan la seccion hero con dos elementos de div osea dos divisione en esos casos se empieza con el contenedor de izquierda luego el de la derecha porque no enseñan eso ???
hola hay casos de paginas web que empiezan la seccion hero con dos elementos de div osea dos divisione en esos casos se empieza con el contenedor de izquierda luego el de la derecha porque no enseñan eso ???
¡Hola Rocio! Qué buena observación haces.
Tienes razón: en muchos diseños modernos, la sección Hero se divide en dos grandes bloques. La razón por la que no siempre se enseña un 'orden obligatorio' es por la flexibilidad del diseño responsivo.
Aquí te explico los puntos clave que resuelven tu duda:
El flujo del documento: Por estándar, el navegador lee el código de arriba hacia abajo. Por eso, lo más natural es colocar primero el div que quieres que aparezca a la izquierda (en pantallas grandes) o arriba (en móviles).
Flexbox : Aunque en tu HTML el texto esté primero y la imagen después, con CSS puedes usar flex-direction: row-reverse; y ¡listo!, visualmente se invierten sin tocar el HTML.
Accesibilidad: tambien es importante tomar en cuenta que el orden del HTML debe priorizar lo más importante para alguien que usa un lector de pantalla (generalmente el título y el texto antes que una imagen decorativa).
<section class="hero">
<div class="hero-content">
<h1>Título impactante</h1>
<p>Descripción del servicio.</p>
</div>
<div class="hero-image">
<img src="banner.jpg" alt="Descripción de la imagen">
</div>
</section>
Al usar display: flex; en el contenedor padre, logras ese control total que mencionas. ¡Sigue cuestionando todo, esa curiosidad es la que hace a los mejores desarrolladores!
¡Mucho éxito en tus estudios!"