BUENO-1

 

Visión General

El código crea una página web de documentación o tutorial. Tiene una estructura de tres columnas muy común en la web:

  1. Un menú de navegación superior horizontal.

  2. Un menú lateral izquierdo con los temas.

  3. Un área de contenido principal que ocupa el resto del espacio y centra el texto.

Lo más importante es que todo el posicionamiento se logra únicamente con el flujo natural de los elementos y Flexbox, sin usar position: absolute o fixed.

1. La Maquetación de Cajas (La Estructura Visual)

Visualmente, la página se divide en estas "cajas" contenedoras:

  • body: Es la caja principal que lo contiene todo. Se le ha dado un height: 100vh para que ocupe el alto completo de la ventana del navegador. Con display: flex y flex-direction: column, convertimos a sus hijos directos en elementos flexibles que se apilarán en columna (uno encima del otro).

  • <div class="menu-superior">: Es la primera caja hija del body. Por el flujo de column, se coloca en la parte superior. Contiene los enlaces (<a>), que son los elementos del menú.

  • <div class="contenedor-flex">: Es la segunda caja hija del body. Con flex: 1, le decimos que ocupe todo el espacio vertical restante que no haya ocupado el menu-superior. A su vez, con display: flex (sin direction, por lo tanto es fila por defecto), crea una estructura de dos columnas para sus hijos.

  • <div class="menu-lateral">: Es el primer hijo del contenedor-flex. Tiene un width: 180px fijo, por lo que siempre ocupará ese ancho. Es la columna izquierda.

  • <div class="contenedor-centrado">: Es el segundo hijo del contenedor-flex. Al no tener un ancho definido y estar dentro de un flexbox, ocupará el espacio restante. Su trabajo es centrar el contenido que tiene dentro.

  • <div class="contenido">: Es la caja que está dentro del contenedor-centrado. Tiene un max-width: 800px y width: 100%. Esto significa que, en pantallas grandes, su ancho máximo será de 800px, pero en pantallas más pequeñas se encogerá para adaptarse.

2. El Flujo Natural de las Cajas (Bloque vs. Línea)

Observa cómo el comportamiento por defecto de los elementos HTML es la base sobre la que se construye todo.

  • Elementos de Bloque (display: block):

    • <body>, <div>, <h1>, <h2>, <p>, <pre> son elementos de bloque por defecto. Esto significa que, uno detrás de otro, se apilan verticalmente, ocupando el 100% del ancho de su contenedor.

    • Ejemplo: Los <h2> y los <p> dentro de .contenido se colocan uno debajo del otro de forma natural. No necesitamos nada especial para que eso ocurra.

  • Elementos en Línea (display: inline):

    • <a>, <code>, <strong> son elementos en línea. Se colocan uno al lado del otro en la misma línea, como las palabras de un párrafo, y solo ocupan el espacio necesario para su contenido.

    • Ejemplo: Las etiquetas <code> dentro de los párrafos fluyen con el texto. No rompen la línea a menos que el texto sea muy largo.

  • Modificando el Flujo: display: inline-block:

    • .menu-superior a: Aquí vemos un caso muy común. A los enlaces del menú superior se les aplica display: inline-block. Esto es clave:

      • Siguen fluyendo en línea, por lo que los enlaces se colocan uno al lado del otro horizontalmente.

      • Pero, a diferencia de inline, podemos darles un padding (relleno) respetado y un ancho/alto, dándoles la forma de un botón rectangular.

    • .menu-lateral a: En este caso, se usa display: block en los enlaces. Esto hace que cada enlace se convierta en un bloque, ocupando todo el ancho del menú lateral y apilándose verticalmente, que es el comportamiento deseado para una lista de temas.

3. La Agrupación de Elementos (Relaciones Visuales)

Los contenedores agrupan elementos que están relacionados visual y conceptualmente.

  • menu-superior: Agrupa todos los enlaces de navegación principales. Visualmente, están juntos en una franja de color oscuro, indicando que son un conjunto homogéneo de acciones globales.

  • menu-lateral: Agrupa los enlaces relacionados con los temas de JavaScript. El título "Temas de JavaScript" y la lista de enlaces debajo forman una unidad visual clara. El borde inferior azul del título ayuda a conectar el encabezado con la lista.

  • contenido: Agrupa todo el texto del tutorial. Los encabezados (<h1>, <h2>), párrafos, bloques de código, etc., forman una unidad coherente de información. El espacio en blanco alrededor (gracias a .contenedor-centrado) lo separa del menú lateral y le da protagonismo.

4. La Jerarquía Padre-Hijo (Herencia y Contención)

Esta es la parte más importante. Las propiedades del "padre" afectan directamente a los "hijos".

  • Herencia (Propiedades que se transmiten):

    • body: Al definir font-family en el body, esta propiedad se hereda a todos los elementos de la página a menos que un elemento más específico la sobrescriba (como code, que usa monospace). Lo mismo pasa con el color y otras propiedades de texto.

    • .contenido: Se le aplica font-size: 20px. Todos los textos dentro de .contenido (los títulos, párrafos, enlaces, etc.) serán más grandes, porque heredan este tamaño de su padre. Esto crea una jerarquía visual donde el contenido principal es más prominente que el texto de los menús.

  • Contención y Espacio (Cómo el padre condiciona a los hijos):

    • body (Padre) y .menu-superior + .contenedor-flex (Hijos): Al poner display: flex y flex-direction: column en el body, forzamos a que sus dos hijos directos se coloquen en columna.

    • .contenedor-flex (Padre) y .menu-lateral + .contenedor-centrado (Hijos): Con display: flex en este padre, condiciona a sus dos hijos a colocarse en fila (uno al lado del otro). El ancho del padre se reparte entre ellos: uno toma 180px, el otro toma el resto (flex: 1).

    • .contenedor-centrado (Padre) y .contenido (Hijo): Este es un ejemplo muy claro. El padre tiene display: flex y justify-content: center. Esto no hace que el texto dentro de .contenido se centre, sino que centra la caja .contenido dentro del espacio del padre. El hijo se coloca en el medio horizontalmente. El padding: 20px del padre evita que el hijo quede pegado a los bordes si la pantalla se vuelve muy pequeña.

    • overflow-y: auto: En .menu-lateral y .contenedor-centrado, esta propiedad es crucial. Si el contenido de estas cajas es más alto que el espacio que les asigna su padre (.contenedor-flex), aparecerá una barra de desplazamiento dentro de esa caja, sin que toda la página se desplace. Esto es posible porque el padre .contenedor-flex tiene min-height: 0, que anula el comportamiento por defecto de Flexbox y permite que los hijos se encojan y muestren barras de scroll internas.

En resumen, el código demuestra cómo, partiendo del flujo natural de bloque y línea, y aplicando Flexbox de manera estratégica en los contenedores padres, se puede crear un layout complejo, limpio y responsivo. La clave está en entender que los padres definen cómo se colocan y se distribuyen el espacio entre sus hijos, y los hijos definen su contenido y comportamiento interno.

Por supuesto! Te voy a reescribir el código completo con explicaciones detalladas de cada parte, como si estuviéramos haciendo una revisión línea por línea.

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript - Tutorial</title>
    <style>
        /* ===== RESET Y ESTILOS BASE ===== */
        /* Este es el primer nivel de la jerarquía: el PADRE de todos */
        body {
            margin: 0;  /* Elimina el margen por defecto que trae el body */
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;  /* Se HEREDA a todos los hijos */
            height: 100vh;  /* Ocupa el 100% del alto de la ventana del navegador */
            display: flex;  /* Convierte el body en un CONTENEDOR FLEXIBLE */
            flex-direction: column;  /* Sus hijos directos se apilarán en COLUMNA (uno arriba del otro) */
        }
        
        /* ===== CAJA 1: MENÚ SUPERIOR ===== */
        /* Este es el PRIMER HIJO DIRECTO del body */
        .menu-superior {
            background-color: #333;  /* Fondo gris oscuro */
            padding: 0;  /* Sin relleno interno */
            line-height: 0;  /* Elimina espacio extra que a veces añaden los navegadores */
        }
        
        /* Los enlaces dentro del menú superior - son HIJOS de .menu-superior */
        .menu-superior a {
            color: white;  /* Texto blanco (se hereda a los hijos de <a> pero no hay) */
            text-decoration: none;  /* Quita el subrayado de los enlaces */
            padding: 12px 15px;  /* Relleno: 12px arriba/abajo, 15px izquierda/derecha */
            display: inline-block;  /* ¡CLAVE! Se comportan como línea (uno al lado del otro) pero permiten padding */
            font-size: 14px;  /* Tamaño de fuente */
            line-height: normal;  /* Restaura el line-height normal para el texto */
        }
        
        /* Efecto al pasar el ratón por encima de los enlaces */
        .menu-superior a:hover {
            background-color: #555;  /* Gris más claro al hacer hover */
        }
        
        /* Enlace activo (página actual) */
        .menu-superior a.activo {
            background-color: #007bff;  /* Azul brillante para destacar */
        }
        
        /* ===== CONTENEDOR FLEX PRINCIPAL ===== */
        /* Este es el SEGUNDO HIJO DIRECTO del body */
        .contenedor-flex {
            display: flex;  /* Convierte ESTE elemento en un contenedor flexible */
            flex: 1;  /* ¡IMPORTANTE! Ocupa TODO el espacio vertical restante */
            min-height: 0;  /* Permite que los hijos tengan scroll interno */
        }
        
        /* ===== CAJA 2: MENÚ LATERAL ===== */
        /* PRIMER HIJO de .contenedor-flex */
        .menu-lateral {
            width: 180px;  /* Ancho fijo de 180 píxeles */
            background-color: #f0f0f0;  /* Gris muy claro */
            padding: 10px;  /* Relleno interno de 10px por todos lados */
            overflow-y: auto;  /* Si el contenido es muy largo, aparece scroll VERTICAL */
        }
        
        /* Título del menú lateral */
        .menu-lateral h3 {
            margin-top: 0;  /* Quita el margen superior por defecto */
            color: #333;  /* Texto gris oscuro */
            border-bottom: 2px solid #007bff;  /* Línea azul debajo del título */
            padding-bottom: 10px;  /* Espacio entre el texto y la línea */
        }
        
        /* Enlaces del menú lateral - HIJOS de .menu-lateral */
        .menu-lateral a {
            display: block;  /* ¡CLAVE! Cada enlace ocupa TODO el ancho disponible y se apilan verticalmente */
            padding: 8px 10px;  /* Relleno interno */
            color: #333;  /* Texto gris oscuro */
            text-decoration: none;  /* Sin subrayado */
            margin: 2px 0;  /* Margen vertical de 2px entre enlaces */
            border-left: 2px solid transparent;  /* Borde izquierdo transparente (para efecto hover) */
            font-size: 14px;  /* Tamaño de fuente */
        }
        
        /* Efecto hover en enlaces del menú lateral */
        .menu-lateral a:hover {
            background-color: #ddd;  /* Fondo gris más claro */
            border-left-color: #007bff;  /* El borde izquierdo se vuelve azul */
        }
        
        /* ===== CAJA 3: CONTENEDOR CENTRADOR ===== */
        /* SEGUNDO HIJO de .contenedor-flex */
        .contenedor-centrado {
            flex: 1;  /* Ocupa el espacio restante después del menú lateral */
            display: flex;  /* Se convierte en contenedor flexible */
            justify-content: center;  /* Centra horizontalmente a su HIJO (.contenido) */
            padding: 20px;  /* Relleno interno para que el contenido no toque los bordes */
            overflow-y: auto;  /* Scroll vertical si el contenido es muy largo */
        }
        
        /* ===== CAJA 4: CONTENIDO PRINCIPAL ===== */
        /* HIJO ÚNICO de .contenedor-centrado */
        .contenido {
            max-width: 800px;  /* Ancho máximo de 800px */
            width: 100%;  /* En pantallas pequeñas, ocupa el 100% disponible */
            font-size: 20px;  /* Texto más grande para el contenido principal - se HEREDA a los hijos */
        }
        
        /* ===== ESTILOS DEL CONTENIDO ===== */
        /* Todos estos elementos son HIJOS (directos o indirectos) de .contenido */
        
        /* Título principal */
        h1 {
            margin-top: 0;  /* Quita el margen superior por defecto */
            color: #333;  /* Texto gris oscuro */
        }
        
        /* Subtítulos */
        h2 {
            border-bottom: 2px solid #007bff;  /* Línea azul decorativa */
            padding-bottom: 10px;  /* Espacio entre el texto y la línea */
            margin-top: 30px;  /* Espacio superior para separar secciones */
            color: #333;  /* Texto gris oscuro */
        }
        
        /* El primer h2 dentro del contenido */
        h2:first-of-type {
            margin-top: 0;  /* Quita el margen superior al primer subtítulo */
        }
        
        /* Código en línea */
        code {
            background-color: #f4f4f4;  /* Fondo gris claro */
            padding: 2px 5px;  /* Relleno pequeño alrededor del código */
            border-radius: 3px;  /* Bordes ligeramente redondeados */
            font-family: monospace;  /* Fuente monoespaciada para código */
        }
        
        /* Bloques de código */
        pre {
            background-color: #f4f4f4;  /* Fondo gris claro */
            padding: 10px;  /* Relleno interno */
            border-radius: 5px;  /* Bordes redondeados */
            overflow-x: auto;  /* Scroll horizontal si el código es muy ancho */
            font-family: monospace;  /* Fuente monoespaciada */
        }
    </style>
</head>
<body>
    <!-- ========================================= -->
    <!-- ESTRUCTURA HTML - JERARQUÍA DE CAJAS      -->
    <!-- ========================================= -->
    
    <!-- CAJA 1: Menú superior - HIJO DIRECTO del body -->
    <div class="menu-superior">
        <!-- Estos enlaces son HIJOS de .menu-superior y se colocan en LÍNEA -->
        <a href="index.html">Inicio</a>
        <a href="php.html">PHP</a>
        <a href="js.html" class="activo">JavaScript</a>  <!-- Este tiene la clase "activo" -->
        <a href="css.html">CSS</a>
        <a href="html.html">HTML</a>
    </div>
    
    <!-- Contenedor flex - HIJO DIRECTO del body -->
    <div class="contenedor-flex">
        <!-- CAJA 2: Menú lateral - HIJO DIRECTO de .contenedor-flex -->
        <div class="menu-lateral">
            <!-- Estos elementos son HIJOS de .menu-lateral -->
            <h3>Temas de JavaScript</h3>  <!-- Elemento de BLOQUE -->
            <a href="#js-intro">Introducción a JS</a>  <!-- Elemento de BLOQUE (por display:block) -->
            <a href="#js-sintaxis">Sintaxis Básica</a>
            <a href="#js-variables">Variables y Tipos</a>
            <a href="#js-funciones">Funciones en JS</a>
            <a href="#js-objetos">Objetos y Arrays</a>
            <a href="#js-dom">Manipulación del DOM</a>
        </div>
        
        <!-- CAJA 3: Contenedor que centra - HIJO DIRECTO de .contenedor-flex -->
        <div class="contenedor-centrado">
            <!-- CAJA 4: Contenido centrado - HIJO DIRECTO de .contenedor-centrado -->
            <div class="contenido">
                <!-- ========================================= -->
                <!-- CONTENIDO DEL TUTORIAL                   -->
                <!-- Todos estos son HIJOS (directos) de .contenido -->
                <!-- ========================================= -->
                
                <h1>Tutorial de JavaScript</h1>  <!-- Elemento de BLOQUE -->
                
                <h2 id="js-intro">Introducción a JavaScript</h2>  <!-- Elemento de BLOQUE -->
                <p>JavaScript es un lenguaje de programación interpretado, orientado a objetos, utilizado principalmente en el lado del cliente (navegador web).</p>  <!-- Elemento de BLOQUE -->
                <p>Creado por Brendan Eich en 1995, JavaScript permite crear páginas web interactivas y dinámicas.</p>
                <p>No debe confundirse con Java - son lenguajes completamente diferentes.</p>
                
                <h2 id="js-sintaxis">Sintaxis Básica</h2>
                <p>JavaScript usa una sintaxis similar a C. Las sentencias terminan con punto y coma (opcional pero recomendado).</p>
                <p><strong>Ejemplo:</strong> <code>console.log("Hola Mundo");</code></p>  <!-- <strong> y <code> son elementos en LÍNEA -->
                <p>Los comentarios pueden ser de una línea (//) o múltiples líneas (/* */).</p>
                
                <h2 id="js-variables">Variables y Tipos de Datos</h2>
                <p>En JavaScript moderno se usa 'let' y 'const' para declarar variables. 'var' es la forma antigua.</p>
                <p><strong>Tipos:</strong> number, string, boolean, object, undefined, null, symbol.</p>
                <p><strong>Ejemplo:</strong></p>
                <pre>let nombre = "Ana";  <!-- Elemento de BLOQUE -->
const edad = 30;
let esEstudiante = true;
let colores = ["rojo", "azul", "verde"];</pre>
                
                <h2 id="js-funciones">Funciones en JavaScript</h2>
                <p>Las funciones se pueden declarar de varias formas:</p>
                <p><strong>Declaración de función:</strong></p>
                <pre>function suma(a, b) {
    return a + b;
}</pre>
                <p><strong>Función flecha:</strong> <code>const resta = (a, b) => a - b;</code></p>
                
                <h2 id="js-objetos">Objetos y Arrays</h2>
                <p><strong>Objetos:</strong> colecciones de propiedades</p>
                <pre>let persona = {
    nombre: "Juan",
    edad: 25,
    saludar: function() {
        return "Hola, soy " + this.nombre;
    }
};</pre>
                <p><strong>Arrays:</strong> listas ordenadas</p>
                <pre>let frutas = ["manzana", "banana", "naranja"];
frutas.push("uva"); // Añadir elemento</pre>
                
                <h2 id="js-dom">Manipulación del DOM</h2>
                <p>JavaScript puede manipular el DOM (Document Object Model) para cambiar el contenido de la página.</p>
                <p><strong>Ejemplos:</strong></p>
                <pre>// Seleccionar elementos
document.getElementById("miId");
document.querySelector(".miClase");

// Modificar contenido
elemento.textContent = "Nuevo texto";
elemento.innerHTML = "&lt;b&gt;Texto en negrita&lt;/b&gt;";

// Eventos
boton.addEventListener("click", function() {
    alert("¡Hiciste clic!");
});</pre>
            </div>  <!-- Cierra .contenido -->
        </div>  <!-- Cierra .contenedor-centrado -->
    </div>  <!-- Cierra .contenedor-flex -->
</body>
</html>

Explicación de Conceptos Clave con este Código

1. Maquetación de Cajas (Visualmente)

text
┌─────────────────────────────────┐  ← body (flex, column)
│  ┌───────────────────────────┐  │
│  │  .menu-superior           │  │  ← Caja 1 (hijo del body)
│  │  [Inicio] [PHP] [JS] ...  │  │
│  └───────────────────────────┘  │
│  ┌───────────────────────────┐  │
│  │  .contenedor-flex         │  │  ← Caja contenedora (hijo del body)
│  │  ┌──────┬──────────────┐  │  │
│  │  │      │.contenedor-   │  │  │
│  │  │.menu-│ centrado      │  │  │
│  │  │lateral│ ┌─────────┐  │  │  │
│  │  │      │ │.contenido│  │  │  │
│  │  │      │ │         │  │  │  │
│  │  │      │ └─────────┘  │  │  │
│  │  └──────┴──────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

2. Flujo Natural de las Cajas

Elementos de Bloque en acción:

  • <h1>: Ocupa todo el ancho y empuja lo siguiente abajo

  • <h2>: Lo mismo, crea separación visual

  • <p>: Cada párrafo es un bloque nuevo

  • <pre>: Bloque para código, con su propio fondo

Elementos en Línea en acción:

  • <strong>: "Ejemplo:" dentro del párrafo, no rompe la línea

  • <code>: console.log(...) fluye con el texto

  • <a> en menú superior: inline-block permite padding manteniendo flujo horizontal

3. Jerarquía Padre-Hijo (Ejemplos Concretos)

Herencia (propiedades que pasan de padres a hijos):

  • body → font-family → Todos los textos la heredan

  • .contenido → font-size: 20px → Todos los títulos y párrafos dentro son más grandes

  • .menu-superior → color: white → Los enlaces heredan el color blanco

Contención (cómo el padre limita/controla a los hijos):

  • body con height: 100vh y flex: 1 en su hijo → El hijo sabe cuánto espacio puede ocupar

  • .menu-lateral con width: 180px → Define el espacio exacto para sus hijos

  • .contenedor-centrado con justify-content: center → Centra a su único hijo

  • overflow-y: auto en varias cajas → Los hijos pueden ser más altos que el padre y se podrá hacer scroll

4. Agrupación de Elementos (Relaciones Visuales)

.menu-superior agrupa: Enlaces de navegación global

  • Todos tienen el mismo estilo

  • Están en la misma franja horizontal

  • Comparten el mismo fondo oscuro

  • El hover afecta a todos igual

.menu-lateral agrupa: Navegación específica de JavaScript

  • Título que explica el grupo

  • Lista de enlaces relacionados

  • Mismo estilo de hover (borde azul) que los une visualmente

.contenido agrupa: Todo el material del tutorial

  • Mismo tamaño de fuente (20px)

  • Mismo estilo de encabezados

  • Bloques de código con estilo consistente

Resumen Final

Este código es un excelente ejemplo de maquetación limpia y semántica porque:

  1. Usa el flujo natural: No fuerza posiciones con absolute o fixed

  2. Aprovecha la herencia: Establece propiedades en padres que benefician a todos los hijos

  3. Crea jerarquías claras: Cada contenedor tiene una responsabilidad específica

  4. Agrupa lógicamente: Elementos relacionados están en el mismo contenedor

  5. Flexbox estratégico: Solo donde se necesita para distribuir espacio

La página resultante es robusta, fácil de mantener y se adapta bien a diferentes tamaños de pantalla gracias a esta arquitectura basada en cajas anidadas.

Comentarios

Publicar un comentario

Entradas más populares de este blog

Tutorial de CSS: De Cero a Estilizar tu Primera Página Web

1. ¿Qué es CSS? CSS son las siglas de  Cascading Style Sheets  (Hojas de Estilo en Cascada). Es un lenguaje que usamos para describir la  presentación  de un documento escrito en HTML. Mientras que HTML se encarga de la estructura y el contenido (títulos, párrafos, imágenes), CSS se encarga de cómo se ve ese contenido (colores, fuentes, tamaños, posición). 2. ¿Cómo se integra CSS con HTML? Hay tres formas principales de incluir CSS en tu proyecto: CSS en línea (Inline):  Se aplica directamente a una etiqueta HTML usando el atributo  style . Es el método menos recomendado porque mezcla contenido con presentación y es difícil de mantener. html < p style = " color : blue ; font-size : 18px ; " > Este es un párrafo azul. </ p > CSS interno (Internal):  Se escribe dentro de la etiqueta  <style>  en la sección  <head>  del documento HTML. Es útil para páginas individuales o para hacer pruebas rápidas. html <...
Leer más

layouts

   "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). f Tutorial: Creando una Plantilla de Registro HTML/CSS Objetivo del Proyecto Vamos a crear la estructura básica de una página web que contiene: Un menú de navegación con 4 opciones. Un formulario de registro de usuario. Estilos CSS para que todo se vea ordenado y profesional. Paso 1: Entendiendo la Estructura...
Leer más

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 pa...
Leer más