¿Te has fijado que casi todas las webs modernas (como Facebook, Amazon o Netflix) usan “tarjetas” para mostrar información? En este tutorial aprenderás a crear una desde cero. Es el ejercicio perfecto para entender cómo las etiquetas de HTML se convierten en cajas visuales gracias a CSS.
Requisitos:
Un editor de código (como VS Code).
Un navegador web.
Ganas de ensuciarte las manos con código.
Paso 1: Estructura el HTML (El esqueleto)
Primero, necesitamos definir qué contenido tendrá nuestra tarjeta. Crea un archivo index.html y añade este bloque dentro del <body>:
HTML
<div class=“card”>
<img src=“tu-foto.jpg” alt=“Foto de perfil” class=“card-img”>
<h1 class=“card-title”>Hola, soy Blas</h1>
<p class=“card-text”>Estudiante de Ingeniería de Sistemas y apasionado por el desarrollo web.</p>
<button class=“card-btn”>Contactar</button>
</div>
Tip: La etiqueta div funciona como un contenedor o una “caja” que agrupa todo lo demás.
Paso 2: Dale estilo con CSS (La piel)
Ahora, vamos a hacer que esa lista de elementos se vea profesional. Crea un archivo style.css (no olvides enlazarlo en tu HTML) y añade estas reglas básicas:
CSS
/* Centramos la tarjeta en la pantalla */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f2f5;
font-family: sans-serif;
}
/* Diseñamos la caja /
.card {
background-color: white;
width: 300px;
padding: 20px;
border-radius: 15px; / Bordes redondeados /
box-shadow: 0 4px 8px rgba(0,0,0,0.1); / Sombra suave */
text-align: center;
}
/* Ajustamos la imagen /
.card-img {
width: 100px;
height: 100px;
border-radius: 50%; / Foto circular */
object-fit: cover;
}
Paso 3: El toque final (Interactividad)
Para que el botón se sienta “vivo”, añadiremos un efecto cuando pases el mouse por encima (hover):
CSS
.card-btn {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.card-btn:hover {
background-color: #0056b3;
transform: scale(1.05); /* Se agranda un poquito */
}
Curso de Frontend Developer
COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE
