02/100: Blog Preview Card
Codifica una tarjeta de blog usando Bootstrap 5 con estilos personalizados paso a paso.
¡Hola, desarrolladores! Hoy aprenderé a construir este hermoso proyecto diseñado por Frontend Mentor, usando el framework Bootstrap en su versión más reciente.
Este proyecto es parte del desafío #100DaysOfProjects ofrecido por Frontend Club.
¡Empecemos!🚀
Paso 1: Carpeta inicial del proyecto
/blog-preview-card
│
│── /images # Imágenes utilizadas en la página
│ ├── illustration-article.svg
| |── image-avatar.webp
│ └── favicon-32x32.png
|
└── index.html # Documentación del proyecto
Paso 2: Estructura básica HTML
En el archivo index.html enlazaré Bootstrap 5 desde CDN y crearé la estructura HTML.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- etiquetas meta -->
<meta name="description" content="Tarjeta de blog con Bootstrap">
<meta name="keywords" content="tarjeta, blog, bootstrap">
<meta name="author" content="Santos Romero">
<link rel="shortcut icon" href="images/favicon-32x32.png" type="image/x-icon">
<!-- fuente -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
<!-- bootstrap 5 -->
<link rel="stylesheet" href="css/reducido.css">
<title>Blog Preview Card</title>
</head>
<body>
<!-- aquí va el marcado html -->
</body>
</html>
Paso 3: Contenedor principal
<main>
<section class="container-fluid bg-primary d-flex justify-content-center align-items-center vh-100">
<!-- tarjeta -->
</section>
</main>
Paso 4: La tarjeta
<div class="card border border-black border-1 p-3 rounded-3 sombra" style="width: 20rem;">
<img src="./images/illustration-article.svg" class="rounded-2" alt="Imagen de tarjeta" />
<div class="card-body p-0 m-0">
<span class="fw-bold rounded-2 bg-primary mt-3 py-1 px-2 d-inline-block">Learning</span>
<p class="pt-2">
<small>Published <time datetime="21-12-2023">21 Dec 2023</time></small>
</p>
<h5 class="fw-bold text-hover">HTML & CSS foundations</h5>
<p class="text-secondary">These languages are the backbone of every website, defining structure, content, and presentation.</p>
<img src="./images/image-avatar.webp" width="30" alt="Foto de perfil" />
<small class="fw-bold">Greg Hooper</small>
</div>
</div>
Paso 5: Integramos todo
<main>
<section class="container-fluid bg-primary d-flex justify-content-center align-items-center vh-100">
<div class="card border border-black border-1 p-3 rounded-3 sombra" style="width: 20rem;">
<img src="./images/illustration-article.svg" class="rounded-2" alt="Imagen de tarjeta" />
<div class="card-body p-0 m-0">
<span class="fw-bold rounded-2 bg-primary mt-3 py-1 px-2 d-inline-block">Learning</span>
<p class="pt-2">
<small>Published <time datetime="21-12-2023">21 Dec 2023</time></small>
</p>
<h5 class="fw-bold text-hover">HTML & CSS foundations</h5>
<p class="text-secondary">These languages are the backbone of every website, defining structure, content, and presentation.</p>
<img src="./images/image-avatar.webp" width="30" alt="Foto de perfil" />
<small class="fw-bold">Greg Hooper</small>
</div>
</div>
</section>
</main>
Referencias
Agradecimiento y gratitud a los siguientes recursos que me ayudaron a completar este proyecto.
Frontend Mentor - Blog Preview Card
W3Schools - Bootstrap 5 Tutorial
Puedes ver el resultado final del proyecto blog preview card y descargar el código fuente para saber más.
Conclusión
Hoy hemos aprendido a construir una tarjeta de blog usando el framework Bootstrap mediante una CDN.
Puedo imaginar todo lo que puedo aprender si codifico un proyecto todos los días durante los próximos 100 días.
