Maquetación de Secciones y Tarjetas en HTML con CSS

¿Cómo iniciar la maquetación de la sección principal?

La sección principal del sitio web se divide en dos partes fundamentales: un input de búsqueda y las tarjetas de blog. Nuestro objetivo es lograr que cada elemento del diseño esté bien estructurado y se vea profesional, por lo cual comenzaremos delineando la importancia del uso de etiquetas semánticas.

¿Qué etiquetas semánticas utilizar?

Usaremos la etiqueta <main> para englobar el contenido importante de la página, dividiendo esta en dos secciones. La primera sección servirá para colocar una barra de navegación donde los usuarios podrán buscar entre los posts del blog por diferentes temas. La segunda, alojará las tarjetas de blog que permitirán a los usuarios acceder a cada post.

<main>
  <section></section> <!-- Sección de búsqueda -->
  <section></section> <!-- Sección de posts -->
</main>

¿Cómo organizamos el contenido?

Es esencial limitar el ancho del contenido para que no se extienda a lo largo de toda la pantalla. Creamos una clase llamada container para manejar esto y asegurar que la estructura se mantenga ordenada.

<div class="container">
  <!-- Contenido -->
</div>

¿Cómo construir la barra de búsqueda?

La barra de búsqueda es clave, su implementación se logra con un input acompañado de un ícono de búsqueda:

Creación del contenedor de búsqueda

Utilizaremos un div con la clase row para indicar que estamos empezando una fila con varias columnas.

<div class="row">
  <div class="col-md-7">
    <input type="text" class="input" placeholder="Buscar">
  </div>
</div>

En este código, indicamos que en pantallas medianas el input ocupará 7 de las 12 columnas disponibles. Es importante destacar el uso de col-md-* para lograr un diseño adaptable.

Agregar un ícono de búsqueda

Para añadir un ícono de búsqueda, nos apoyamos en librerías de íconos como Material Icons utilizando la clase material-icons.

<i class="material-icons">search</i>

¿Cómo estructurar las tarjetas de blog?

La segunda sección contendrá cada tarjeta de blog, que se implementa como un artículo dentro de un div con clase row:

<section>
  <div class="row">
    <article class="col-lg-4 col-md-6 col-sm-12">
      <div class="card">
        <img src="path/to/image.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Título del Blog</h5>
          <p class="card-text">Descripción breve del post.</p>
          <a href="#" class="btn btn-primary">Leer más</a>
        </div>
      </div>
    </article>
  </div>
</section>

Asegúrate de asignar correctamente las clases a las columnas (col-lg-4, col-md-6, col-sm-12) de modo que las tarjetas se organicen apropiadamente dependiendo del tamaño de la pantalla.

Uso de las tarjetas

Las tarjetas son elementos visuales que combinan imágenes, texto, y botones para ofrecer un acceso intuitivo al contenido del blog. Aquí se utilizan tanto imágenes como botones de forma estratégica.

¿Cómo se integran los estilos?

El uso de clases y estilos CSS personalizados es fundamental para evitar conflictos con las clases genéricas de la librería utilizada:

• Establece nombres específicos para tus clases.
• Ejemplo: input-custom, search-bar, card-custom.

Recomendamos ser explícitos en la nomenclatura y propósitos de las clases para evitar colisiones con los estilos predeterminados de las librerías. Además, la personalización permite un control total sobre el aspecto visual.

Ejemplo de personalización en CSS

.input-custom {
  /* Estilos personalizados */
}
.search-bar {
  /* Estilos específicos */
}
.card-custom {
  /* Estilos de tarjeta */
}

La maquetación es un paso esencial para garantizar que el contenido se despliegue de manera clara y coherente, mejorando así la experiencia del usuario. ¡Avanza con confianza y aprovecha cada detalle para enriquecer tu proyecto web!