📋 Referencia Rápida

Consulta las etiquetas, propiedades y métodos más usados en el desarrollo web

🏗️ Estructura Base

Plantilla básica que debe tener cualquier documento HTML5.

<!DOCTYPE html>
<html lang="es">
 <head>
  <meta charset="UTF-8">
  <title>Título</title>
 </head>
 <body>...</body>
</html>

🏷️ Etiquetas Semánticas

Etiquetas que le dan significado al contenido para navegadores y motores de búsqueda.

<header> <nav> <main> <section> <article> <aside> <footer> <figure>

🔗 Enlace e Imagen

Etiquetas para vincular páginas y mostrar imágenes.

<!-- Enlace -->
<a href="url" target="_blank">Texto</a>

<!-- Imagen -->
<img src="img.png" alt="descripción">

📝 Formularios

Elementos básicos para capturar datos del usuario.

<form action="">
 <input type="text" placeholder="Nombre">
 <input type="email">
 <select><option>Opción</option></select>
 <button type="submit">Enviar</button>
</form>

📋 Listas

Ordenadas y no ordenadas.

<!-- Lista con viñetas -->
<ul>
 <li>Elemento</li>
</ul>

<!-- Lista numerada -->
<ol>
 <li>Primero</li>
</ol>

📊 Tabla

Estructura básica para presentar datos en filas y columnas.

<table>
 <thead>
  <tr><th>Col 1</th></tr>
 </thead>
 <tbody>
  <tr><td>Dato</td></tr>
 </tbody>
</table>

🎨 Selectores

Las formas de seleccionar elementos del DOM para aplicar estilos.

/* Por etiqueta */
p { color: red; }

/* Por clase (.) */
.mi-clase { font-size: 16px; }

/* Por ID (#) */
#mi-id { display: flex; }

/* Descendiente */
nav a { text-decoration: none; }

📦 Box Model

Cada elemento es una caja con las siguientes capas.

.caja {
 width: 200px;
 padding: 20px; /* interior */
 border: 1px solid #ccc;
 margin: 10px; /* exterior */
 box-sizing: border-box;
}

↔️ Flexbox

Sistema de diseño unidimensional para alinear elementos en una fila o columna.

.container {
 display: flex;
 justify-content: center; /* eje X */
 align-items: center; /* eje Y */
 gap: 20px;
 flex-wrap: wrap;
}

⊞ CSS Grid

Sistema de diseño bidimensional para crear cuadrículas complejas.

.grid {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 /* o con auto-fit: */
 grid-template-columns:
  repeat(auto-fit, minmax(200px, 1fr));
 gap: 20px;
}

✨ Transiciones

Animaciones suaves entre estados CSS.

.btn {
 transition: all 0.3s ease;
}
.btn:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(0,0,0,.2);
}

🖥️ Media Queries

Estilos condicionales según el tamaño de pantalla (Responsive Design).

/* Tablet y menores */
@media (max-width: 768px) {
 .sidebar {
  display: none;
 }
}
/* Móvil */
@media (max-width: 480px) {
 h1 { font-size: 1.5rem; }
}

🔍 Seleccionar del DOM

Cómo acceder a elementos HTML desde JavaScript.

// Un elemento por ID
const el = document.getElementById('mi-id');

// Primero que coincida
const el = document.querySelector('.clase');

// Todos los que coincidan
const items = document.querySelectorAll('li');

🖱️ Eventos

Cómo escuchar acciones del usuario sobre los elementos.

const btn = document.querySelector('#btn');

btn.addEventListener('click', (e) => {
 console.log('¡Clic!');
 e.preventDefault(); // evita recarga
});

🔁 Array.map()

Crea un nuevo array transformando cada elemento.

const nums = [1, 2, 3, 4];

const dobles = nums.map(n => n * 2);
// → [2, 4, 6, 8]

🔍 Array.filter()

Filtra elementos que cumplen una condición.

const nums = [1, 2, 3, 4, 5, 6];

const pares = nums.filter(n => n % 2 === 0);
// → [2, 4, 6]

📡 Fetch API

Realiza peticiones HTTP para consumir APIs externas.

fetch('https://api.ejemplo.com/datos')
 .then(res => res.json())
 .then(data => {
  console.log(data);
 })
 .catch(err => console.error(err));

💾 localStorage

Guarda datos en el navegador que persisten al recargar.

// Guardar
localStorage.setItem('clave', 'valor');

// Recuperar
const val = localStorage.getItem('clave');

// Eliminar
localStorage.removeItem('clave');