HTML
HyperText Markup Language
01 / 08
¿Qué es? HTML es el lenguaje de marcado que define la estructura y el contenido de una página web. No es un lenguaje de programación: no tiene lógica ni condiciones. Es como el esqueleto de tu sitio.
ejemplo básico
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi Página</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Mi primer párrafo.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi Página</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Mi primer párrafo.</p>
</body>
</html>
document└── <html>├── <head>│ └── <title>└── <body> ├── <h1> └── <p>
Concepto
Elemento
Todo lo que está entre una etiqueta de apertura y cierre. <p>texto</p> es un elemento párrafo.
Concepto
Atributo
Información extra dentro de la etiqueta de apertura. href, class, id, src son los más comunes.
Concepto
DOM
Document Object Model. El árbol de objetos que el navegador construye a partir del HTML. Es lo que JavaScript manipula.
árbol de nodosConcepto
DOCTYPE
Declaración en la primera línea que le dice al navegador qué versión de HTML usar. <!DOCTYPE html> es para HTML5.
CSS
Cascading Style Sheets
02 / 08
¿Qué es? CSS controla cómo se ve la página: colores, tipografía, tamaños, posiciones, animaciones. Si HTML es el esqueleto, CSS es la piel y el estilo.
anatomía de una regla
/* selector { propiedad: valor; } */
h1 {
color: #38bdf8;
font-size: 2rem;
font-weight: bold;
}
.mi-clase {
background: linear-gradient(
90deg, #a78bfa, #f472b6
);
border-radius: 8px;
}
/* selector { propiedad: valor; } */
h1 {
color: #38bdf8;
font-size: 2rem;
font-weight: bold;
}
.mi-clase {
background: linear-gradient(
90deg, #a78bfa, #f472b6
);
border-radius: 8px;
}
Box Model
Todo elemento HTML es una caja: content → padding → border → margin. Entender esto resuelve el 80% de los problemas de layout.
layout fundamentalCascada & Especificidad
Cuando dos reglas compiten, gana la más específica. Orden: inline > id > clase > etiqueta.
Flexbox & Grid
Los dos sistemas modernos de layout. flex para una dimensión, grid para dos dimensiones.
layout modernoJavaScript
El lenguaje de la web
03 / 08
¿Qué es? JavaScript es el lenguaje de programación del navegador. Agrega comportamiento e interactividad: validar formularios, llamar APIs, actualizar el DOM sin recargar la página.
conceptos clave
// Variables
const nombre = "GeekCorp";
let contador = 0;
// Función
function saludar(persona) {
return `Hola, ${persona}!`;
}
// Manipular el DOM
document.querySelector("h1")
.textContent = "Cambiado!";
// Fetch API (CRUD)
const data = await fetch("/api/items");
// Variables
const nombre = "GeekCorp";
let contador = 0;
// Función
function saludar(persona) {
return `Hola, ${persona}!`;
}
// Manipular el DOM
document.querySelector("h1")
.textContent = "Cambiado!";
// Fetch API (CRUD)
const data = await fetch("/api/items");
Variable
Caja para guardar datos. const no cambia, let sí.
Función
Bloque de código reutilizable que puede recibir datos y retornar un resultado.
Evento
Acción del usuario (click, tecla, scroll) que dispara código.
Async / Await
Permite esperar operaciones lentas (APIs) sin bloquear la página.
LocalStorage
Persistencia de datos en el navegador sin servidor. Lo que vimos en Sesión 2.
sesión 2JSON
Formato de datos estándar para enviar/recibir info entre frontend y backend.
Frameworks
Herramientas que aceleran el desarrollo
04 / 08
¿Qué es un framework? Es un conjunto de herramientas, convenciones y código preescrito que te da una base sólida para construir aplicaciones más rápido. En lugar de reinventar la rueda, sigues sus reglas y te enfocas en tu lógica.
⚛️
React
LIBRERÍA UI · META
Construye interfaces con componentes reutilizables. El más popular del mercado. Todo es JavaScript.
💚
Vue.js
FRAMEWORK PROGRESIVO
Más fácil de aprender que React. Separa HTML, CSS y JS en un solo archivo .vue.
🅰️
Angular
FRAMEWORK COMPLETO · GOOGLE
Solución todo-en-uno para apps grandes. Usa TypeScript y tiene más estructura y curva de aprendizaje.
🔷
Next.js
META-FRAMEWORK · REACT
Construido sobre React. Agrega routing, SSR y generación estática. Ideal para apps de producción.
🌊
Tailwind CSS
FRAMEWORK CSS
CSS con clases utilitarias directamente en el HTML. Sin escribir CSS personalizado para cada elemento.
🟣
Bootstrap
FRAMEWORK CSS
El más veterano. Componentes listos para usar (botones, modales, grids). Ideal para prototipar rápido.
Etiquetas Semánticas
HTML que describe su propio significado
05 / 08
¿Por qué importan? Las etiquetas semánticas le dicen al navegador, a los motores de búsqueda y a lectores de pantalla qué tipo de contenido contienen. Mejoran el SEO y la accesibilidad.
<header> — Logo, Nav
<nav> — Menú de navegación
<main> <article>
<aside>
<footer> — Copyright, links
<header>
Encabezado de la página o sección. Contiene logo, título, navegación principal.
<nav>
Bloque de navegación con links. Los lectores de pantalla lo identifican como menú.
<main>
Contenido principal de la página. Solo debe haber uno por página.
<article>
Contenido independiente y autocontenido: una noticia, un post de blog, un comentario.
<section>
Agrupa contenido temáticamente relacionado. Siempre lleva un encabezado.
<aside>
Contenido secundario relacionado. Sidebars, anuncios, información extra.
<footer>
Pie de página: copyright, links legales, contacto.
Etiquetas de Línea
inline vs block
06 / 08
La diferencia clave: Los elementos block (<div>, <p>) ocupan toda la fila y empujan lo siguiente hacia abajo. Los elementos inline fluyen dentro del texto sin romper el párrafo.
VISUAL: inline vs block
← <div> ocupa todo el ancho →
← <p> también ocupa todo →
Texto normal con<span><strong><em>fluyen dentro del párrafo sin saltar de línea.
inline
<span>
Contenedor genérico sin significado. Para aplicar estilos a texto específico.
inline
<a>
Enlace o hipervínculo. Atributo href indica el destino.
inline
<strong>
Texto en negrita con importancia semántica. SEO lo valora.
inline
<em>
Énfasis en cursiva. El lector de pantalla cambia la entonación.
inline
<img>
Imagen. Es inline pero se comporta como inline-block naturalmente.
inline
<code>
Fragmento de código inline. Renderiza en fuente monoespaciada.
inline
<label>
Etiqueta de formulario. Vinculada a un input mejora accesibilidad.
inline
<button>
Botón interactivo. Inline por defecto pero puede contener bloques.
Métodos de Envío HTTP
Cómo el cliente habla con el servidor
07 / 08
¿Qué es HTTP? HyperText Transfer Protocol. Es el protocolo que define cómo se comunican el navegador (cliente) y el servidor. Cada solicitud tiene un método que indica la intención de la acción.
FLUJO CLIENTE → SERVIDOR
BROWSER
GET /productos →
API
BROWSER
POST /crear →
API
API
← 200 OK / 404 / 500
BROWSER
fetch en JS
// GET - leer datos
const res = await fetch("/api/items");
// POST - crear
await fetch("/api/items", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ nombre: "Laptop" })
});
// DELETE - eliminar
await fetch(`/api/items/${id}`, {
method: "DELETE"
});
// GET - leer datos
const res = await fetch("/api/items");
// POST - crear
await fetch("/api/items", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ nombre: "Laptop" })
});
// DELETE - eliminar
await fetch(`/api/items/${id}`, {
method: "DELETE"
});
Códigos de Respuesta
2xx — Éxito
200 OK · 201 Created · 204 No Content
Códigos de Respuesta
4xx — Error del cliente
400 Bad Request · 401 Unauthorized · 404 Not Found
Códigos de Respuesta
5xx — Error del servidor
500 Internal Server Error · 503 Service Unavailable
Bases de Datos
Donde vive la información de forma persistente
08 / 08
¿Qué es? Un sistema organizado para almacenar, consultar y manipular datos de forma estructurada y persistente. A diferencia de LocalStorage, los datos viven en un servidor y pueden ser accedidos por múltiples usuarios.
BASE NO-RELACIONAL (NoSQL) — documento MongoDB
// Documento JSON en MongoDB
{
"_id": ObjectId("abc123"),
"nombre": "Ana García",
"email": "ana@gc.com",
"rol": "admin",
"preferencias": {
"tema": "oscuro",
"idioma": "es"
},
"tags": ["js", "react"]
}
{
"_id": ObjectId("abc123"),
"nombre": "Ana García",
"email": "ana@gc.com",
"rol": "admin",
"preferencias": {
"tema": "oscuro",
"idioma": "es"
},
"tags": ["js", "react"]
}
No requiere esquema fijo. Cada documento puede tener campos distintos. Ideal para datos variables o jerárquicos.
Tipo SQL
Bases Relacionales
Datos en tablas con filas y columnas. Las tablas se relacionan entre sí con llaves. Ejemplos: PostgreSQL, MySQL, SQLite.
estructura fijaTipo NoSQL
Bases de Documentos
Datos como documentos JSON. Flexible, sin esquema rígido. Ejemplo: MongoDB, Firebase Firestore.
flexibleConcepto
CRUD
Las 4 operaciones básicas: Create · Read · Update · Delete. Todo sistema de datos las implementa.
sesión 2 ✦Concepto
LocalStorage (mock)
Simula persistencia en el navegador usando el storage del browser. Perfecto para practicar CRUD antes de conectar un backend real.
sesión 2 ✦Concepto
Primary Key
Identificador único de cada registro. Garantiza que no existan duplicados. En JS suele generarse con Date.now() o crypto.randomUUID().
Concepto
ORM
Object Relational Mapper. Capa que permite interactuar con la BD usando objetos JS en lugar de SQL puro. Ej: Prisma, Sequelize.