1. Estructura y Flexbox
La estructura de una página web empieza con etiquetas como <html> y <body>.
Para el diseño, utilizamos Flexbox, una técnica de CSS muy potente.
Al usar display: flex, convertimos el contenedor padre en un "flex container", lo que nos permite alinear sus elementos hijos fácilmente.
La propiedad flex: 1 es la clave para que las columnas tengan exactamente el mismo tamaño, ya que les indica que deben ocupar el espacio disponible de manera equitativa.
.contenedor {
display: flex;
}
.columna {
flex: 1;
}
2. Agregando Imágenes
Para insertar una imagen en una página, usamos la etiqueta <img>. Es importante usar los atributos correctos:
-
src: Define la URL o la ruta de la imagen. -
alt: Proporciona un texto alternativo que se muestra si la imagen no carga o para lectores de pantalla. -
class: Para aplicar estilos de Tailwind, como el ancho y los bordes.