Proyecto Práctico: Tarjeta de Perfil

"Explica el siguiente código HTML y CSS poniendo especial énfasis en:

La maquetación de cajas: cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón).
El flujo natural de las cajas: cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros.
La agrupación de elementos: cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor.
La jerarquía padre-hijo: cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos).

Creando una Tarjeta de Perfil con HTML y CSS

Descripción del Proyecto

Vamos a crear una tarjeta de perfil profesional que contiene:

Foto de perfil circular
Nombre de la persona
Descripción breve
Ubicación
Botón interactivo con efectos

Al final, tendremos una tarjeta moderna y responsive que se centra en la pantalla.

PARTE 1: ESTRUCTURA HTML

Paso 1: El Esqueleto Básico

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Tarjeta de Perfil</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Aquí irá todo el contenido visible -->
</body>
</html>

Explicación línea por línea:

<!DOCTYPE html>: Indica que es un documento HTML5
<html lang="es">: La página está en español (bueno para SEO y accesibilidad)
<meta charset="UTF-8">: Soporta caracteres especiales (acentos, ñ, etc.)
<meta name="viewport"...>: Hace que la página sea responsive en móviles
<title>: Título que aparece en la pestaña del navegador
<link rel="stylesheet" href="style.css">: Conecta el archivo CSS externo

Paso 2: El Contenido de la Tarjeta

<div class="tarjeta">
    <img src="https://via.placeholder.com/150" alt="Foto de perfil" class="foto-perfil">
    <h2 class="nombre">Ana García</h2>
    <p class="descripcion">Desarrolladora web apasionada por crear experiencias digitales hermosas y funcionales.</p>
    <p class="ciudad">📍 Madrid, España</p>
    <button class="boton">Seguir</button>
</div>

Explicación de cada elemento:

<div class="tarjeta">: Contenedor principal de toda la tarjeta
<img>: La imagen de perfil (usamos placeholder de ejemplo)
- src: URL de la imagen
- alt: Texto alternativo (accesibilidad)
- class: Para aplicar estilos CSS
<h2>: Nombre de la persona (título)
<p>: Párrafos para descripción y ciudad
<button>: Botón interactivo

PARTE 2: ESTILOS CSS

Paso 3: Reset y Estilos Globales

/* Reinicio básico (selector universal) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

¿Por qué necesitamos esto?

Los navegadores añaden márgenes y rellenos por defecto
margin: 0; padding: 0; elimina esos valores predeterminados
box-sizing: border-box; hace que el padding y borde se incluyan en el ancho/alto total
Esto nos da un "lienzo en blanco" para trabajar

Paso 4: Centrando la Tarjeta en la Pantalla

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f4f4f4;
    /* Centrar la tarjeta en la pantalla */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

Conceptos clave de Flexbox:

display: flex;: Activa el modo Flexbox en el body
justify-content: center;: Centra horizontalmente
align-items: center;: Centra verticalmente
min-height: 100vh;: El body ocupa al menos el 100% del alto de la pantalla
vh significa "viewport height" (altura de la ventana)

Analogía visual:

┌─────────────────────┐
│                     │
│                     │
│       ┌─────┐      │
│       │TARJ.│      │  ← Centrada perfectamente
│       └─────┘      │
│                     │
│                     │
└─────────────────────┘

Paso 5: Diseñando la Tarjeta Principal

.tarjeta {
    width: 350px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 30px 20px;
    text-align: center;
}

Desglose de propiedades:

width: 350px;: Ancho fijo para la tarjeta
border-radius: 10px;: Esquinas redondeadas
box-shadow: Sombra para dar profundidad
- 0 4px 8px: Desplazamiento X=0, Y=4px, difuminado=8px
- rgba(0,0,0,0.1): Negro con 10% de opacidad
padding: 30px 20px;: Espacio interno
- 30px arriba/abajo, 20px izquierda/derecha
text-align: center;: Centra todo el texto dentro

Paso 6: La Foto de Perfil Circular

.foto-perfil {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid #4CAF50;
}

El truco de la imagen circular:

width y height iguales (120px) crean un cuadrado
border-radius: 50%; convierte el cuadrado en círculo
object-fit: cover; evita que la imagen se deforme
border: 3px solid #4CAF50; añade un borde verde alrededor

Visualización del proceso:

Cuadrado original → border-radius:50% → Círculo perfecto
   ┌─────┐                  ╭─────╮
   │     │         →         │     │
   │  ■  │                  ╱       ╲
   │     │                 │    ●    │
   └─────┘                  ╲       ╱
                             ╰─────╯

Paso 7: Estilos de Texto

.nombre {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
}

.descripcion {
    color: #666;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 15px;
}

.ciudad {
    color: #999;
    font-size: 14px;
    margin-bottom: 20px;
    font-style: italic;
}

Jerarquía visual:

.nombre: Más grande (24px) y oscuro (#333) → Mayor importancia
.descripcion: Mediano (16px) y gris medio (#666)
.ciudad: Pequeño (14px), gris claro (#999) y cursiva → Menor importancia

line-height: 1.5; mejora la legibilidad separando las líneas.

Paso 8: El Botón Interactivo

.boton {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.boton:hover {
    background-color: #45a049;
}

Explicación del botón:

border: none;: Elimina el borde por defecto del botón
padding: 12px 30px;: Botón alargado (horizontal) con buen espacio
cursor: pointer;: Cambia el cursor a manita al pasar
transition: background-color 0.3s ease;: Animación suave de 0.3 segundos
:hover: Estilo cuando el ratón está encima (verde más oscuro)

PARTE 3: CONCEPTOS CLAVE EXPLICADOS

Selectores CSS utilizados

Selector	Ejemplo	Qué selecciona
Universal	`*`	Todos los elementos
Etiqueta	`body`	La etiqueta body
Clase	`.tarjeta`	Elementos con class="tarjeta"

Unidades de medida

px (píxeles): Medida fija y exacta
vh (viewport height): 1vh = 1% del alto de la pantalla
% (porcentaje): Relativo al elemento padre

Colores en CSS

#4CAF50: Código hexadecimal (verde)
rgba(0,0,0,0.1): Rojo, Verde, Azul, Alpha (transparencia)

Flexbox (el superpoder)

display: flex;
justify-content: center;  ← Eje horizontal
align-items: center;      ← Eje vertical

PARTE 4: EJERCICIOS PARA PRACTICAR

Nivel 1 - Principiante

Cambia los colores: Haz el botón azul y el borde de la foto rojo
Modifica el texto: Cambia el nombre y la descripción
Ajusta tamaños: Haz la tarjeta más ancha (400px) y la foto más grande (150px)

Nivel 2 - Intermedio

Añade iconos sociales: Agrega iconos de Twitter, LinkedIn, GitHub debajo del botón
Estadísticas: Agrega "Publicaciones: 42 · Seguidores: 128 · Siguiendo: 89"
Modo oscuro: Crea una versión con fondo oscuro y texto claro

Nivel 3 - Avanzado

Animaciones: Haz que la tarjeta "flote" al pasar el ratón
Responsive: En móvil, que la tarjeta ocupe el 90% de la pantalla
Múltiples tarjetas: Crea un grid de 3 tarjetas

CÓDIGO COMPLETO CON DOCUMENTACIÓN

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Tarjeta de Perfil</title>
    <style>
        /* ===== RESET GLOBAL ===== */
        /* Elimina todos los márgenes y rellenos predeterminados del navegador */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box; /* Facilita el cálculo de tamaños */
        }

        /* ===== ESTILOS DEL BODY ===== */
        body {
            font-family: Arial, Helvetica, sans-serif; /* Fuente legible y universal */
            background-color: #f4f4f4; /* Gris muy claro de fondo */
            
            /* ACTIVAMOS FLEXBOX PARA CENTRAR */
            display: flex;           /* Sistema de layout flexible */
            justify-content: center; /* Centra horizontalmente */
            align-items: center;     /* Centra verticalmente */
            min-height: 100vh;       /* Altura mínima = toda la pantalla */
            margin: 0;               /* Asegura que no haya márgenes */
        }

        /* ===== TARJETA PRINCIPAL ===== */
        .tarjeta {
            width: 350px;            /* Ancho fijo */
            background-color: white;  /* Fondo blanco */
            border-radius: 10px;      /* Esquinas redondeadas */
            
            /* Sombra: derecha abajo difuminado color */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
            
            padding: 30px 20px;       /* 30px arriba/abajo, 20px izq/der */
            text-align: center;       /* Todo el texto centrado */
        }

        /* ===== FOTO DE PERFIL ===== */
        .foto-perfil {
            width: 120px;            /* Mismo ancho que alto */
            height: 120px;           /* para hacer un cuadrado perfecto */
            border-radius: 50%;      /* Convierte el cuadrado en círculo */
            object-fit: cover;       /* La imagen cubre todo sin deformarse */
            margin-bottom: 15px;      /* Espacio debajo de la foto */
            border: 3px solid #4CAF50; /* Borde verde alrededor */
        }

        /* ===== NOMBRE ===== */
        .nombre {
            font-size: 24px;         /* Tamaño grande para el nombre */
            color: #333;             /* Gris muy oscuro (casi negro) */
            margin-bottom: 10px;      /* Espacio debajo del nombre */
        }

        /* ===== DESCRIPCIÓN ===== */
        .descripcion {
            color: #666;             /* Gris medio */
            font-size: 16px;         /* Tamaño normal */
            line-height: 1.5;        /* Espacio entre líneas: 1.5 veces el tamaño */
            margin-bottom: 15px;      /* Espacio debajo */
        }

        /* ===== CIUDAD ===== */
        .ciudad {
            color: #999;             /* Gris claro */
            font-size: 14px;         /* Tamaño pequeño */
            margin-bottom: 20px;      /* Espacio antes del botón */
            font-style: italic;       /* Texto en cursiva */
        }

        /* ===== BOTÓN ===== */
        .boton {
            background-color: #4CAF50; /* Verde */
            color: white;              /* Texto blanco */
            border: none;              /* Sin borde */
            padding: 12px 30px;        /* 12px arriba/abajo, 30px izq/der */
            font-size: 16px;           /* Tamaño de texto */
            border-radius: 5px;        /* Bordes ligeramente redondeados */
            cursor: pointer;            /* Cursor tipo manita al pasar */
            
            /* Transición suave para el cambio de color */
            transition: background-color 0.3s ease;
        }

        /* ===== EFECTO HOVER DEL BOTÓN ===== */
        .boton:hover {
            background-color: #45a049; /* Verde más oscuro */
        }

        /* ===== NOTAS ADICIONALES ===== */
        /*
        ¿Qué significa 100vh?
        vh = viewport height. 100vh = 100% del alto de la pantalla.
        
        ¿Por qué object-fit: cover?
        Evita que la imagen se estire o deforme. La recorta si es necesario.
        
        ¿Qué hace box-sizing: border-box?
        Normalmente, el padding se suma al width. Con border-box, 
        el padding se resta internamente.
        Ej: width:100px + padding:10px = 100px totales (no 120px)
        */
    </style>
</head>
<body>
    <!-- 
        TARJETA DE PERFIL
        Cada elemento tiene una clase específica para estilizar
    -->
    <div class="tarjeta">
        <!-- Foto de perfil (placeholder) -->
        <img src="https://via.placeholder.com/150" alt="Foto de perfil" class="foto-perfil">
        
        <!-- Información personal -->
        <h2 class="nombre">Ana García</h2>
        <p class="descripcion">Desarrolladora web apasionada por crear experiencias digitales hermosas y funcionales.</p>
        <p class="ciudad">📍 Madrid, España</p>
        
        <!-- Botón interactivo -->
        <button class="boton">Seguir</button>
    </div>

    <!-- 
        POSIBLES MEJORAS:
        1. Añadir más botones (Mensaje, Contactar)
        2. Incluir iconos de redes sociales
        3. Hacer la tarjeta responsive
        4. Añadir animación de entrada
    -->
</body>
</html>

Resumen de lo aprendido

✅ Estructura semántica de HTML
✅ Uso de clases para estilizar elementos
✅ Flexbox para centrar contenido
✅ Imágenes circulares con border-radius
✅ Jerarquía visual con tamaños y colores
✅ Efectos interactivos con :hover
✅ Transiciones suaves
✅ Box model (padding, margin, border)
✅ Unidades relativas (vh) y absolutas (px)

¡Ahora tienes las bases para crear tus propias tarjetas de perfil y muchos otros componentes! ¿Qué te gustaría aprender a continuación?

6. Proyecto Práctico: Tarjeta de Perfil

Vamos a crear una tarjeta de perfil simple para poner en práctica lo aprendido.

Paso 1: Crea la estructura HTML (index.html)

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Tarjeta de Perfil</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="tarjeta">
        <img src="https://via.placeholder.com/150" alt="Foto de perfil" class="foto-perfil">
        <h2 class="nombre">Ana García</h2>
        <p class="descripcion">Desarrolladora web apasionada por crear experiencias digitales hermosas y funcionales.</p>
        <p class="ciudad">📍 Madrid, España</p>
        <button class="boton">Seguir</button>
    </div>
</body>
</html>

Paso 2: Añade los estilos CSS (style.css)

/* Reinicio básico (selector universal) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilos generales para el cuerpo de la página */
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f4f4f4;
    /* Centrar la tarjeta en la pantalla */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Ocupa al menos el alto total de la ventana */
    margin: 0;
}

/* Estilos para la tarjeta (selector de clase) */
.tarjeta {
    width: 350px;
    background-color: white;
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    padding: 30px 20px; /* 30px arriba/abajo, 20px izquierda/derecha */
    text-align: center;
}

.foto-perfil {
    width: 120px;
    height: 120px;
    border-radius: 50%; /* ¡Hace la imagen circular! */
    object-fit: cover; /* Asegura que la imagen cubra el espacio sin deformarse */
    margin-bottom: 15px;
    border: 3px solid #4CAF50; /* Borde verde alrededor de la foto */
}

.nombre {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
}

.descripcion {
    color: #666;
    font-size: 16px;
    line-height: 1.5; /* Espacio entre líneas */
    margin-bottom: 15px;
}

.ciudad {
    color: #999;
    font-size: 14px;
    margin-bottom: 20px;
    font-style: italic;
}

.boton {
    background-color: #4CAF50; /* Verde */
    color: white;
    border: none; /* Quita el borde por defecto */
    padding: 12px 30px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer; /* Cambia el cursor a una manita */
    transition: background-color 0.3s ease; /* Transición suave para el hover */
}

/* Efecto al pasar el ratón por encima del botón */
.boton:hover {
    background-color: #45a049; /* Verde un poco más oscuro */
}

Paso 3: Abre index.html en tu navegador.
¡Deberías ver tu tarjeta de perfil con todos los estilos aplicados!

1. La Jerarquía de Cajas (Padres e Hijos)

Antes de ver los estilos, debemos entender el árbol de familia de nuestro HTML. Esto es crucial porque los hijos heredan propiedades de los padres y se posicionan dentro de ellos.

El Bisabuelo: <body>
El Abuelo (Padre directo): <div class="tarjeta"> (Es el hijo directo de body).
Los Hijos (dentro de la tarjeta):
- <img class="foto-perfil">
- <h2 class="nombre">
- <p class="descripcion">
- <p class="ciudad">
- <button class="boton">

Concepto clave: La caja de body contiene a la caja de tarjeta. La caja de tarjeta, a su vez, contiene a las otras cinco. Todo lo que le pase a una caja padre, afectará al espacio que tienen sus hijos para moverse.

2. El Flujo Natural y la Maquetación de las Cajas

Aquí vemos cómo se crean y organizan las cajas desde el nivel más externo al más interno.

Nivel 1: La Caja `<body>` (El Lienzo Principal)

¿Qué es? Es el contenedor de toda la página.
Maquetación como Padre: Se convierte en un contenedor flexible (Flexbox) gracias a display: flex;. Esto cambia su comportamiento por defecto.
Efecto en los Hijos: Al ser flex y tener justify-content: center y align-items: center, le está diciendo a su único hijo directo (.tarjeta): "Colócate perfectamente en el centro de mí, tanto horizontal como verticalmente".
Flujo: Normalmente, los elementos de bloque (como <div>) se apilan uno debajo del otro. Pero al convertir a body en un contenedor flex, su hijo directo (.tarjeta) ignora ese flujo de bloque tradicional y se convierte en un "ítem flex", obedeciendo las reglas de centrado de su padre.

Nivel 2: La Caja `.tarjeta` (El Contenedor Principal)

¿Qué es? Es la tarjeta blanca que lo engloba todo. Es un elemento de bloque (por ser un <div>), pero dentro de su padre flex, se comporta como un ítem flexible y centrado.
Maquetación como Padre: Esta caja no usa Flexbox ni Grid. Su maquetación es la más simple de todas: Flujo de bloque natural. Esto significa que sus hijos se colocarán uno debajo del otro, en el orden en que aparecen en el HTML.
Su propia caja:
- width: 350px;: Le da un ancho fijo.
- background-color: white;, border-radius, box-shadow: Son propiedades de "decoración" de la caja.
- padding: 30px 20px;: Este es un punto clave. El padding es el espacio interno entre el borde de la caja .tarjeta y su contenido (sus hijos). Crea un "colchón" para que el texto y la imagen no estén pegados a los bordes de la tarjeta.

Nivel 3: Las Cajas Hijas (El Contenido)

Todas estas cajas están DENTRO de .tarjeta y, al no haber un sistema de maquetación complejo en el padre, siguen el flujo de bloque por defecto: se apilan verticalmente.

Caja .foto-perfil (<img>): Es un elemento en línea (inline), pero como le hemos dado un ancho y alto definidos y es la primera hija, se coloca en su propia línea (gracias a ser un elemento reemplazado y por el flujo del padre). Su margin-bottom: 15px separa esta caja de la siguiente.
Caja .nombre (<h2>): Es un elemento de bloque por naturaleza. Ocupa todo el ancho disponible de su padre (.tarjeta) y se coloca justo debajo de la imagen, respetando el margin-bottom de la imagen y su propio margin-bottom: 10px.
Caja .descripcion (<p>): Otro elemento de bloque. Se coloca debajo del <h2>.
Caja .ciudad (<p>): Otro elemento de bloque. Se coloca debajo de la descripción.
Caja .boton (<button>): Es un elemento en línea (originalmente), pero los navegadores lo tratan como un elemento en bloque a nivel de línea. En el flujo, como sus hermanos anteriores son de bloque, él también termina ocupando su propia línea. Su margin no afecta a los demás en este contexto más que para separarse de .ciudad.

Resumen de la Interacción Padre-Hijo

Para entender visualmente cómo se afectan entre sí, imagina muñecas rusas (matrioskas):

body (El estuche exterior)
- Acción como Padre: "Voy a estirarme para medir al menos 100% del alto de la pantalla (min-height: 100vh) y voy a sujetar a mi única muñeca interior (tarjeta) para dejarla perfectamente centrada dentro de mí."
- Herencia: Les pasa a sus hijos (como tarjeta) propiedades de fuente como font-family.
tarjeta (La muñeca mediana)
- Acción como Hijo: Obedece a body y se coloca en el centro.
- Acción como Padre: "Yo soy una caja de 350px de ancho con paredes acolchadas (padding). Mis hijas (imagen, títulos, botón) vivirán dentro de este espacio, y mi padding evita que toquen mis paredes. Las colocaré una detrás de otra, en orden de llegada (flujo de bloque)."
- Herencia: Les pasa a sus hijos el text-align: center. Por eso el texto de los hijos aparece centrado sin necesidad de ponerles esa propiedad a cada uno individualmente.
Los Hijos (Las muñecas pequeñas)
- Acción como Hijos: Viven dentro del espacio que les deja el padding de .tarjeta. Se colocan en fila vertical (apiladas). Sus propios margin (como margin-bottom) crean espacio entre ellos, pero ese espacio está contenido dentro de la caja del padre.
- Ejemplo: El margin-bottom: 15px de .foto-perfil no empuja a la tarjeta hacia abajo, sino que empuja a los siguientes elementos (.nombre) para que estén 15 píxeles más separados de la foto.

En una frase: El <body> crea el escenario centrado, la <div class="tarjeta"> es la caja principal que contiene y apila a todos los elementos con un espacio interior (padding), y cada elemento hijo (imagen, textos, botón) son piezas individuales que se colocan respetando ese apilamiento vertical y sus propios márgenes para separarse entre ellos.

Buscar este blog

css-grid