Tema 3.0: Preámbulo CSS - Conceptos Fundamentales

Antes de aprender CSS en detalle, necesitas entender sus conceptos fundamentales, su relación con HTML y cómo funciona en conjunto.

🎨 ¿Qué es CSS?

CSS = Cascading Style Sheets (Hojas de Estilo en Cascada)

Si HTML es el esqueletoRecordatorio: HTML proporciona la estructura. Módulo 2 de tu página web, CSS es la ropa, los colores, el peinado y el maquillaje. CSS transforma HTML de aburrido a hermoso.

📋 Ejemplos de lo que CSS puede hacer:

Cambiar colores de texto y fondos
Ajustar tamaños de fuente y espacios
Posicionar elementos en la página
Crear diseños responsivos (que funcionen en móvil)
Añadir efectos visuales (sombras, bordes redondeados, etc.)
Crear animaciones y transiciones

🔗 La Relación HTML + CSS

HTML dice: "Aquí hay un párrafo"

CSS responde: "Ese párrafo será azul, tamaño 18px, con margen de 10px y fuente cursiva"

HTML y CSS trabajan en equipo. HTML sin CSS es como una persona sin ropa. CSS sin HTML no tiene sentido porque no hay nada que estilizar.

⚙️ Conceptos Fundamentales de CSS

1. Selector = ¿A QUÉ apuntamos?

p {  /* <-- "p" es el selector */
    color: blue;
}

El selector te dice cuál elemento HTML vas a estilizar.

2. Propiedad = ¿QUÉ cambiamos?

p {
    color: blue;  /* <-- "color" es la propiedad */
}

Las propiedades son atributos que puedes cambiar (color, tamaño, posición, etc.)

3. Valor = ¿CÓMO lo cambiamos?

p {
    color: blue;  /* <-- "blue" es el valor */
}

El valor es la respuesta específica a la propiedad.

📐 Sintaxis Básica de CSS

selector {
    propiedad: valor;
    propiedad: valor;
}

Ejemplo completo:

h1 {
    color: red;
    font-size: 32px;
    text-align: center;
}

📁 Las 3 Formas de Escribir CSS

1. CSS INLINE (En la etiqueta HTML)

<p style="color: red; font-size: 18px;">Texto rojo</p>

❌ NO RECOMENDADO: Mezcla HTML con CSS. Difícil de mantener.

2. CSS INTERNO (En el mismo archivo HTML)

<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>

⚠️ ACEPTABLE: Para páginas pequeñas. No es reutilizable.

3. CSS EXTERNO (En un archivo .css separado) ✅ RECOMENDADO

En tu index.html:

<head>
    <link rel="stylesheet" href="css/style.css">
</head>

En tu css/style.css:

p {
    color: green;
    font-size: 18px;
}

✅ MEJOR PRÁCTICA: Separación clara. Reutilizable. Fácil de mantener.

🎯 La Cascada y Especificidad (¿Por qué "Cascading"?)

Cascada significa que CSS se aplica de arriba a abajo. Si defines el color rojo arriba y azul abajo, el azul gana.

p { color: red; }   /* Primero */
p { color: blue; }  /* Gana este (está abajo) */

Especificidad significa que unos selectores tienen más "poder" que otros:

Menos específico: Elemento (p, div, h1)
Más específico: Clase (.mi-clase)
Más específico aún: ID (#mi-id)
Más específico que todo: Inline style (style="")

📁 Tu Estructura de Carpetas para CSS

Recuerda que tu archivo CSS está en esta ruta:

Proyecto/
├── index.html
├── css/
│   └── style.css  ← Tu archivo CSS va aquí
└── js/
    └── script.js

Y lo enlazas en el HTML así:

✅ Checklist Antes de Continuar

☐ Entiendo que CSS estiliza elementos HTML
☐ Sé qué es un selector, una propiedad y un valor
☐ Entiendo por qué CSS externo es mejor
☐ Tengo mi archivo css/style.css creado
☐ He enlazado correctamente el CSS en mi index.html
☐ Entiendo la cascada y especificidad básica

Si no has verificado todo esto, hazlo ahora antes de continuar.

Tema 3.1: Selectores - Apuntando a los Elementos Correctos

Objetivo: Aprender a seleccionar elementos HTML con precisión para estilizarlos.

Step 1: Te Explico

¿Qué son los selectores?

Un selector es el apuntador en CSS. Te dice: "A qué elementos le doy estilo."

Imagina que tienes 5 párrafos en tu página. Si escribes p { color: red; }, TODOS los párrafos se vuelven rojos. Pero ¿qué si quiero que solo UNO sea rojo?

Ahí es donde necesitamos selectores más específicos como clases e IDs.

Step 2: Te Enseño

Tipos de Selectores

1. Selector de Elemento (más general)

p {
    color: blue;
}
/* Todos los párrafos serán azules */

2. Selector de Clase (más específico)

HTML:

<p class="importante">Este párrafo es importante</p>
<p>Este párrafo es normal</p>

CSS:

.importante {
    color: red;
    font-weight: bold;
}

3. Selector de ID (muy específico)

HTML:

<h1 id="titulo-principal">Título Principal</h1>

CSS:

#titulo-principal {
    color: green;
    font-size: 40px;
}

4. Selector de Atributo

input[type="text"] {
    border: 2px solid blue;
}

5. Selectores Combinados

/* Elemento con clase */
p.importante { color: red; }

/* Elemento con ID */
h1#titulo { font-size: 48px; }

/* Múltiples selectores */
h1, h2, h3 { color: navy; }

Step 3: Te Explico (Análisis Detallado)

Entendiendo Cada Selector

Selector de Elemento

Estiliza todos los elementos del tipo que especifiques.

p { } /* Todos los <p> */
div { } /* Todos los <div> */
a { } /* Todos los enlaces */

Selector de Clase (. punto)

Estiliza elementos que tienen esa clase. Múltiples elementos pueden tener la misma clase.

.rojo { color: red; }

/* En HTML */
<p class="rojo">Rojo</p>
<p class="rojo">También rojo</p>
<h1 class="rojo">También rojo</h1>

Selector de ID (# numeral)

Estiliza un elemento ESPECÍFICO. Un ID es único - solo un elemento puede tener ese ID.

#principal { color: gold; }

/* En HTML */
<h1 id="principal">Solo este es oro</h1>

Diferencia Clave: Clase vs ID

Clase (.): Reutilizable. Múltiples elementos pueden tener la misma clase.
ID (#): Único. Solo un elemento debe tener ese ID.

Step 4: Prácticas (Guiado)

Ejercicios paso a paso

Ejercicio 1: Estilizar todos los párrafos

HTML:

<p>Párrafo 1</p>
<p>Párrafo 2</p>

CSS:

p {
    font-size: 16px;
    line-height: 1.5;
}

Ejercicio 2: Usar clases para diferenciar

HTML:

<p class="exito">¡Aprobado!</p>
<p class="error">Reprobado</p>

CSS:

.exito { color: green; }
.error { color: red; }

Ejercicio 3: Usar ID para elemento único

HTML:

<h1 id="titulo-sitio">Mi Sitio Web</h1>

CSS:

#titulo-sitio {
    font-size: 48px;
    color: navy;
    text-align: center;
}

Step 5: Resuelves (Reto)

🚀 Reto Progresivo Nivel 1: Sistema de Alertas

Objetivo: Crear 3 clases para diferentes tipos de mensajes.

HTML:

<p class="info">Información</p>
<p class="advertencia">Advertencia</p>
<p class="error">Error</p>

CSS (crea esto en tu style.css):

.info {
    color: blue;
    background-color: lightblue;
    padding: 10px;
}

.advertencia {
    color: orange;
    background-color: lightyellow;
    padding: 10px;
}

.error {
    color: red;
    background-color: lightcoral;
    padding: 10px;
}

Abre en el navegador y verás 3 párrafos con colores diferentes.

Step 6: Lo Expones

Sube tu código HTML y CSS mostrando los 3 tipos de selectores: elemento, clase e ID.

Step 7: Lo Autoevalúas

Demuestra lo aprendido respondiendo este breve cuestionario. (Las preguntas cambiarán si lo reinicias).

Tema 3.2: Texto, Colores y Fondos

Objetivo: Aprender a estilizar texto, trabajar con colores y fondos.

Step 1: Te Explico

Propiedades de Texto

El texto es el corazón de tu página web. CSS te permite transformarlo completamente. Puedes cambiar el tipo de letra, su tamaño, color, peso, y mucho más.

Step 2: Te Enseño

Propiedades Principales

Propiedades de Texto:

p {
    color: blue;                 /* Color del texto */
    font-size: 18px;             /* Tamaño de la letra */
    font-weight: bold;           /* Peso: normal, bold, 700, etc */
    font-family: Arial, sans-serif; /* Tipo de letra */
    text-align: center;          /* Alineación: left, center, right, justify */
    text-decoration: underline;  /* Subrayado, overline, line-through */
    line-height: 1.5;            /* Altura de línea */
    letter-spacing: 2px;         /* Espacio entre letras */
}

Colores (3 formas):

p { color: red; }              /* Nombre */
p { color: #FF0000; }          /* Código hexadecimal */
p { color: rgb(255, 0, 0); }   /* RGB */

Fondos:

div {
    background-color: yellow;   /* Color de fondo */
    background-image: url('imagen.jpg'); /* Imagen de fondo */
    background-size: cover;     /* Cómo ajustar la imagen */
    background-position: center; /* Posición de la imagen */
}

Step 3: Te Explico (Análisis Detallado)

Entendiendo Cada Propiedad

Font-size

Unidades comunes: px (píxeles), em, rem, %

font-size: 16px;   /* Píxeles - fijo */
font-size: 1.5em;  /* Relativo al tamaño del padre */
font-size: 100%;   /* Porcentaje */

Font-weight

font-weight: normal;  /* 400 */
font-weight: bold;    /* 700 */
font-weight: 900;     /* Muy grueso */

Font-family

Siempre proporciona un fallback (alternativa):

font-family: Arial, sans-serif;
/* Intenta Arial, si no existe, usa sans-serif */

Text-align

text-align: left;     /* Por defecto */
text-align: center;   /* Centrado */
text-align: right;    /* Derecha */
text-align: justify;  /* Justificado */

Colores Hexadecimales

#FF0000 significa Rojo (FF), Verde (00), Azul (00)

#FF0000 = Rojo
#00FF00 = Verde
#0000FF = Azul
#FFFFFF = Blanco
#000000 = Negro

Step 4: Prácticas (Guiado)

Ejercicios paso a paso

Ejercicio 1: Estilizar un párrafo

p {
    color: #333333;
    font-size: 16px;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

Ejercicio 2: Títulos llamativos

h1 {
    color: darkblue;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
}

Ejercicio 3: Fondo de página

body {
    background-color: #f0f0f0;
}

Ejercicio 4: Caja con fondo de color

.destacado {
    background-color: lightyellow;
    color: darkred;
    padding: 15px;
    font-weight: bold;
}

Step 5: Resuelves (Reto)

🚀 Reto Progresivo Nivel 2: Tarjeta de Presentación

Objetivo: Crear una tarjeta estilizada con texto, colores y fondo.

HTML:

<div class="tarjeta">
    <h2>Juan Pérez</h2>
    <p class="titulo">Desarrollador Web</p>
    <p class="email">juan@example.com</p>
</div>

CSS:

.tarjeta {
    background-color: #e8f4f8;
    padding: 20px;
    color: #333;
}

.tarjeta h2 {
    color: #0066cc;
    text-align: center;
    font-size: 24px;
}

.titulo {
    font-weight: bold;
    color: #666;
    text-align: center;
}

.email {
    text-align: center;
    color: #0066cc;
    font-size: 14px;
}

Step 6: Lo Expones

Sube tu tarjeta estilizada mostrando texto, colores y fondos.

Step 7: Lo Autoevalúas

Demuestra lo aprendido respondiendo este breve cuestionario. (Las preguntas cambiarán si lo reinicias).

Tema 3.3: El Modelo de Caja - Espacios y Dimensiones

Objetivo: Entender cómo CSS maneja el espacio alrededor y dentro de los elementos.

Step 1: Te Explico

¿Qué es el Modelo de Caja?

En CSS, cada elemento es una caja rectangular. Esa caja tiene diferentes capas:

Content (Contenido): El texto o imagen adentro
Padding: Espacio DENTRO de la caja, entre el contenido y el borde
Border (Borde): La línea alrededor de la caja
Margin: Espacio FUERA de la caja, entre ella y otros elementos

Step 2: Te Enseño

Propiedades del Modelo de Caja

div {
    width: 200px;           /* Ancho */
    height: 100px;          /* Alto */
    padding: 20px;          /* Espacio interior (arriba, derecha, abajo, izquierda) */
    border: 2px solid black; /* Borde */
    margin: 10px;           /* Espacio exterior */
}

Valores por lado (más específico):

/* Arriba, Derecha, Abajo, Izquierda */
padding: 10px 15px 10px 15px;

/* Top-Bottom, Left-Right */
padding: 10px 15px;

/* Solo uno */
margin-top: 20px;
margin-left: 30px;

Border (Borde):

border: 2px solid blue;
/* Grosor, Estilo (solid, dashed, dotted), Color */

/* O especificar por lado */
border-top: 2px solid red;
border-bottom: 2px dashed blue;

Width y Height:

width: 300px;        /* Píxeles */
width: 50%;          /* Porcentaje del padre */
max-width: 500px;    /* Ancho máximo */
min-width: 100px;    /* Ancho mínimo */

Step 3: Te Explico (Análisis Detallado)

Desglosando el Modelo de Caja

Content

El espacio interior donde va tu contenido (texto, imágenes, etc.)

Padding (Relleno)

Espacio DENTRO, entre el contenido y el borde. El fondo del elemento se extiende aquí.

padding: 20px; /* 20px en todos lados */
padding: 10px 20px; /* 10px arriba-abajo, 20px izquierda-derecha */
padding-top: 15px;

Border (Borde)

La línea alrededor de tu elemento.

border: 2px solid black;
border: 5px dashed red;
border: 1px dotted blue;

Margin (Margen)

Espacio FUERA, entre tu elemento y otros elementos. NO tiene fondo.

margin: 20px; /* 20px en todos lados */
margin-bottom: 30px; /* Solo abajo */

Box-sizing

⚠️ IMPORTANTE: Por defecto, padding y border se suman al width. Para que no suceda:

* {
    box-sizing: border-box;
}

Step 4: Prácticas (Guiado)

Ejercicios paso a paso

Ejercicio 1: Caja básica

div {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    border: 2px solid navy;
}

Ejercicio 2: Agregar padding

div {
    width: 200px;
    padding: 20px;
    background-color: lightyellow;
}

Ejercicio 3: Agregar margin

div {
    width: 200px;
    margin: 20px;
    border: 2px solid red;
}

Ejercicio 4: Caja completa

.caja {
    width: 300px;
    padding: 15px;
    border: 3px solid navy;
    margin: 20px;
    background-color: #f0f0f0;
}

Step 5: Resuelves (Reto)

🚀 Reto Progresivo Nivel 3: Caja con Espacio Perfecto

Objetivo: Crear una caja con padding, border y margin específicos.

HTML:

<div class="articulo">
    <h3>Título del Artículo</h3>
    <p>Contenido del artículo aquí...</p>
</div>

CSS:

.articulo {
    width: 400px;
    padding: 20px;
    border: 2px solid #0066cc;
    margin: 15px;
    background-color: #f9f9f9;
}

Step 6: Lo Expones

Sube tu caja mostrando padding, border, margin claramente visibles.

Step 7: Lo Autoevalúas

Demuestra lo aprendido respondiendo este breve cuestionario. (Las preguntas cambiarán si lo reinicias).

Tema 3.4: Posicionamiento y Display

Objetivo: Aprender a controlar cómo los elementos se distribuyen en la página.

Step 1: Te Explico

Display: Cómo se comportan los elementos

Por defecto, los elementos HTML tienen diferentes comportamientos:

Block: Ocupan todo el ancho, salto de línea (div, p, h1)
Inline: Solo ocupan lo necesario, no salto (span, a, strong)
Inline-block: Lo mejor de ambos mundos
Flex: Sistema flexible para diseño responsivo

Step 2: Te Enseño

Display y Posicionamiento

Display Block:

div {
    display: block;  /* Ocupa todo el ancho */
}

Display Inline:

span {
    display: inline; /* Solo lo necesario */
}

Display Inline-block:

.caja {
    display: inline-block;  /* Comportamiento de ambos */
    width: 200px;
    height: 200px;
}

Display Flex (muy útil):

.contenedor {
    display: flex;
    justify-content: center;  /* Centra horizontalmente */
    align-items: center;      /* Centra verticalmente */
}

Posicionamiento:

div {
    position: static;     /* Por defecto */
    position: relative;   /* Relativo a su posición normal */
    position: absolute;   /* Relativo al padre */
    position: fixed;      /* Relativo a la ventana */
}

Step 3: Te Explico (Análisis Detallado)

Desglose de Display y Posicionamiento

Display: Block

El elemento ocupa TODO el ancho disponible y comienza en una nueva línea.

Display: Inline

El elemento solo ocupa el espacio necesario y NO crea nueva línea.

Display: Inline-block

Combina ambos: respeta ancho/alto como block, pero se alinea en línea como inline.

Display: Flex

Sistema flexible de distribución. Perfecto para layouts responsivos.

Posicionamiento

Static: Posición por defecto en el flujo normal
Relative: Se desplaza desde su posición normal
Absolute: Se posiciona relative a su padre (si existe)
Fixed: Se queda fijo respecto a la ventana

Step 4: Prácticas (Guiado)

Ejercicios paso a paso

Ejercicio 1: Display Block vs Inline

/* Block */
div { display: block; }  /* Ancho completo */

/* Inline */
span { display: inline; } /* Solo lo necesario */

Ejercicio 2: Display Inline-block

.item {
    display: inline-block;
    width: 150px;
    height: 150px;
    margin: 10px;
}

Ejercicio 3: Flex para centrar

.contenedor {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

Ejercicio 4: Posicionamiento

.fixed {
    position: fixed;
    top: 0;
    right: 0;
}

Step 5: Resuelves (Reto)

🚀 Reto Progresivo Nivel 4: Layout con Flex

Objetivo: Crear un layout simple con flex.

HTML:

<div class="galeria">
    <div class="imagen">Imagen 1</div>
    <div class="imagen">Imagen 2</div>
    <div class="imagen">Imagen 3</div>
</div>

CSS:

.galeria {
    display: flex;
    justify-content: space-around;
}

.imagen {
    width: 200px;
    height: 200px;
    background-color: lightgray;
}

Step 6: Lo Expones

Sube tu layout con flex mostrando elementos distribuidos correctamente.

Step 7: Lo Autoevalúas

Demuestra lo aprendido respondiendo este breve cuestionario. (Las preguntas cambiarán si lo reinicias).

Tema 3.5: Diseño Responsivo - Tu Sitio en Cualquier Dispositivo

Objetivo: Aprender a hacer que tu página se vea bien en móvil, tablet y escritorio.

Step 1: Te Explico

¿Qué es Diseño Responsivo?

Responsive Design = Tu sitio se adapta al tamaño de pantalla.

Hoy en día, las personas usan múltiples dispositivos:

📱 Teléfono (320px - 480px)
📱 Tablet (481px - 768px)
💻 Escritorio (769px +)

Tu sitio web debe verse bien en TODOS ellos. Eso es responsive design.

Step 2: Te Enseño

Media Queries: La Clave del Responsive

Viewport Meta Tag (OBLIGATORIO en HTML):

Media Queries (CSS):

/* Para pantallas pequeñas (móvil) */
@media (max-width: 768px) {
    body { font-size: 14px; }
    div { width: 100%; }
}

/* Para pantallas medianas (tablet) */
@media (min-width: 769px) and (max-width: 1024px) {
    body { font-size: 16px; }
    div { width: 50%; }
}

/* Para pantallas grandes (escritorio) */
@media (min-width: 1025px) {
    body { font-size: 18px; }
    div { width: 33%; }
}

Enfoque Mobile-First (RECOMENDADO):

/* Primero: móvil (por defecto) */
body { font-size: 14px; }
div { width: 100%; }

/* Luego: tablet */
@media (min-width: 769px) {
    body { font-size: 16px; }
    div { width: 50%; }
}

/* Finalmente: escritorio */
@media (min-width: 1025px) {
    body { font-size: 18px; }
    div { width: 33%; }
}

Step 3: Te Explico (Análisis Detallado)

Entendiendo Media Queries

max-width vs min-width

max-width: Se aplica HASTA ese ancho (de menor a mayor)

@media (max-width: 768px) {
    /* Se aplica en pantallas de 768px o MENOS */
}

min-width: Se aplica DESDE ese ancho (de mayor a menor)

@media (min-width: 769px) {
    /* Se aplica en pantallas de 769px o MÁS */
}

Breakpoints Comunes

📱 Móvil: 320px - 480px
📱 Tablets pequeñas: 481px - 768px
📱 Tablets grandes: 769px - 1024px
💻 Escritorio: 1025px +

Mobile-First

Comienza con el diseño móvil (base) y añade complejidad para pantallas mayores.

Step 4: Prácticas (Guiado)

Ejercicios paso a paso

Ejercicio 1: Viewport Meta Tag

En tu HTML, dentro de <head>:

Ejercicio 2: Media Query Básica

/* Móvil */
.contenedor {
    width: 100%;
    font-size: 14px;
}

/* Tablet */
@media (min-width: 769px) {
    .contenedor {
        width: 80%;
        font-size: 16px;
    }
}

Ejercicio 3: Columnas Responsivas

/* Móvil: 1 columna */
.columna {
    width: 100%;
}

/* Tablet: 2 columnas */
@media (min-width: 769px) {
    .columna {
        width: 50%;
    }
}

/* Escritorio: 3 columnas */
@media (min-width: 1025px) {
    .columna {
        width: 33.333%;
    }
}

Ejercicio 4: Menú Responsivo

/* Móvil: menú vertical */
nav { display: block; }

/* Escritorio: menú horizontal */
@media (min-width: 1025px) {
    nav { display: flex; }
}

Step 5: Resuelves (Reto)

🚀 Reto Progresivo Nivel 5: Página Responsiva Completa

Objetivo: Crear una página que se adapte a móvil y escritorio.

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>Mi Sitio Responsivo</h1>
    </header>
    <main>
        <article>Artículo 1</article>
        <article>Artículo 2</article>
        <article>Artículo 3</article>
    </main>
</body>
</html>

CSS (Mobile-First):

/* Móvil por defecto */
article {
    width: 100%;
    margin: 10px 0;
}

/* Tablet */
@media (min-width: 769px) {
    article {
        width: 48%;
        display: inline-block;
    }
}

/* Escritorio */
@media (min-width: 1025px) {
    article {
        width: 31%;
        display: inline-block;
    }
}

Step 6: Lo Expones

Sube tu página responsiva. Abre en diferentes tamaños de pantalla (redimensiona) y verifica que se adapta.

Step 7: Lo Autoevalúas

Demuestra lo aprendido respondiendo este breve cuestionario. (Las preguntas cambiarán si lo reinicias).

M3: La Ropa y Estilo (CSS3)

Tema 3.0: Preámbulo CSS - Conceptos Fundamentales

🎨 ¿Qué es CSS?

📋 Ejemplos de lo que CSS puede hacer:

🔗 La Relación HTML + CSS

⚙️ Conceptos Fundamentales de CSS

📐 Sintaxis Básica de CSS

📁 Las 3 Formas de Escribir CSS

🎯 La Cascada y Especificidad (¿Por qué "Cascading"?)

📁 Tu Estructura de Carpetas para CSS

✅ Checklist Antes de Continuar

Tema 3.1: Selectores - Apuntando a los Elementos Correctos

¿Qué son los selectores?

Tipos de Selectores

Entendiendo Cada Selector

Selector de Elemento

Selector de Clase (. punto)

Selector de ID (# numeral)

Diferencia Clave: Clase vs ID

Ejercicios paso a paso

🚀 Reto Progresivo Nivel 1: Sistema de Alertas

Tema 3.2: Texto, Colores y Fondos

Propiedades de Texto

Propiedades Principales

Entendiendo Cada Propiedad

Font-size

Font-weight

Font-family

Text-align

Colores Hexadecimales

Ejercicios paso a paso

🚀 Reto Progresivo Nivel 2: Tarjeta de Presentación

Tema 3.3: El Modelo de Caja - Espacios y Dimensiones

¿Qué es el Modelo de Caja?

Propiedades del Modelo de Caja

Desglosando el Modelo de Caja

Content

Padding (Relleno)

Border (Borde)

Margin (Margen)

Box-sizing

Ejercicios paso a paso

🚀 Reto Progresivo Nivel 3: Caja con Espacio Perfecto

Tema 3.4: Posicionamiento y Display

Display: Cómo se comportan los elementos

Display y Posicionamiento

Desglose de Display y Posicionamiento

Display: Block

Display: Inline

Display: Inline-block

Display: Flex

Posicionamiento

Ejercicios paso a paso

🚀 Reto Progresivo Nivel 4: Layout con Flex

Tema 3.5: Diseño Responsivo - Tu Sitio en Cualquier Dispositivo

¿Qué es Diseño Responsivo?

Media Queries: La Clave del Responsive

Entendiendo Media Queries

max-width vs min-width

Breakpoints Comunes

Mobile-First

Ejercicios paso a paso

🚀 Reto Progresivo Nivel 5: Página Responsiva Completa

Configuración avanzada