Este cheatsheet de JavaScript te proporciona una referencia rápida y práctica, abarcando desde variables y funciones hasta manejo de eventos y promesas. Úsalo como guía para mejorar y desarrollar aplicaciones web utilizando JavaScript de manera efectiva.

<p>Aquí tienes un cheatsheet básico y organizado de JavaScript que abarca diversos aspectos fundamentales para desarrollar aplicaciones web:</p><hr><h3>Variables y Tipos de Datos</h3><pre><code class="language-javascript">// Declaración de variables
let nombre = 'Juan';
const PI = 3.14;
var edad = 30;

// Tipos de datos
let numero = 10; // Number
let texto = 'Hola'; // String
let esVerdadero = true; // Boolean
let arreglo = [1, 2, 3]; // Array
let objeto = { nombre: 'Juan', edad: 30 }; // Object
let funcion = function() {}; // Function</code></pre><hr><h3>Estructuras de Control</h3><pre><code class="language-javascript">// If-else
if (edad &gt;= 18) {
    console.log('Es mayor de edad');
} else {
    console.log('Es menor de edad');
}

// Switch
let dia = 'Lunes';
switch (dia) {
    case 'Lunes':
        console.log('Primer día de la semana');
        break;
    case 'Martes':
        console.log('Segundo día de la semana');
        break;
    default:
        console.log('Día no reconocido');
        break;
}</code></pre><hr><h3>Funciones</h3><pre><code class="language-javascript">// Declaración de función
function saludar(nombre) {
    return 'Hola, ' + nombre;
}

// Función flecha
let sumar = (a, b) =&gt; a + b;

// Llamada a función
console.log(saludar('Juan')); // Imprime: Hola, Juan
console.log(sumar(5, 3)); // Imprime: 8</code></pre><hr><h3>Arrays y Métodos</h3><pre><code class="language-javascript">// Declaración de array
let numeros = [1, 2, 3, 4, 5];

// Métodos de array
numeros.push(6); // Agrega al final
numeros.pop(); // Elimina el último
numeros.unshift(0); // Agrega al inicio
numeros.shift(); // Elimina el primero

console.log(numeros); // Imprime: [1, 2, 3, 4, 5]</code></pre><hr><h3>Objetos y Propiedades</h3><pre><code class="language-javascript">// Declaración de objeto
let persona = {
    nombre: 'Juan',
    edad: 30,
    ciudad: 'México'
};

// Acceder a propiedades
console.log(persona.nombre); // Imprime: Juan
console.log(persona['edad']); // Imprime: 30

// Añadir nueva propiedad
persona.trabajo = 'Desarrollador';

// Eliminar propiedad
delete persona.ciudad;

console.log(persona); // Imprime: { nombre: 'Juan', edad: 30, trabajo: 'Desarrollador' }</code></pre><hr><h3>Promesas y Asincronía</h3><pre><code class="language-javascript">// Creación de promesa
let miPromesa = new Promise((resolve, reject) =&gt; {
    setTimeout(() =&gt; {
        resolve('Datos recibidos');
    }, 2000);
});

// Consumo de promesa
miPromesa.then(resultado =&gt; {
    console.log(resultado); // Imprime: Datos recibidos
}).catch(error =&gt; {
    console.log(error);
});</code></pre><hr><h3>Manipulación del DOM</h3><pre><code class="language-javascript">// Selección de elementos
let boton = document.getElementById('miBoton');
let lista = document.querySelectorAll('ul &gt; li');

// Evento click
boton.addEventListener('click', () =&gt; {
    console.log('Botón clickeado');
});

// Modificación de contenido
lista.forEach(item =&gt; {
    item.textContent = 'Nuevo texto';
});</code></pre><hr><h3>Gestión de Errores</h3><pre><code class="language-javascript">// Try-catch
try {
    // Código que puede lanzar un error
    let resultado = 10 / 0;
} catch (error) {
    console.log('Error:', error.message);
}</code></pre><p>Este cheatsheet de JavaScript te proporciona una referencia rápida y práctica, abarcando desde variables y funciones hasta manejo de eventos y promesas. Úsalo como guía para mejorar y desarrollar aplicaciones web utilizando JavaScript de manera efectiva.</p>

Cheatsheet completo de JavaScript: Desde fundamentos básicos hasta promesas y manipulación del DOM

Este cheatsheet organizado abarca una amplia variedad de propiedades y técnicas de CSS, desde selectores básicos hasta animaciones avanzadas y layouts responsivos. Úsalo como referencia rápida y práctica para mejorar tus habilidades en CSS y diseñar sitios web más atractivos y funcionales.

<p>Este cheatsheet organizado abarca una amplia variedad de propiedades y técnicas de CSS, desde selectores básicos hasta animaciones avanzadas y layouts responsivos. Úsalo como referencia rápida y práctica para mejorar tus habilidades en CSS y diseñar sitios web más atractivos y funcionales.</p><h3>Selectores CSS</h3><pre><code class="language-css">/* Selector universal */
* {
    margin: 0;
    padding: 0;
}

/* Selector de clase */
.clase {
    font-size: 16px;
}

/* Selector de ID */
#miId {
    background-color: yellow;
}

/* Selector de atributo */
input[type="text"] {
    border: 1px solid #ccc;
}

/* Selector de pseudo-clase :hover */
a:hover {
    color: #FF0000;
}

/* Selector de pseudo-elemento ::before */
p::before {
    content: "Antes de ";
    font-weight: bold;
}</code></pre><hr><h3>Propiedades de Texto y Fuente</h3><pre><code class="language-css">/* Color de texto */
color: red;

/* Tamaño de fuente */
font-size: 18px;

/* Familia de fuente */
font-family: Arial, sans-serif;

/* Estilo de fuente */
font-style: italic;

/* Peso de fuente */
font-weight: bold;

/* Decoración de texto */
text-decoration: underline;

/* Espacio entre letras */
letter-spacing: 1px;

/* Espacio entre líneas */
line-height: 1.5;</code></pre><hr><h3>Propiedades de Caja (Box Model)</h3><pre><code class="language-css">/* Margen */
margin: 10px;

/* Relleno */
padding: 20px;

/* Borde */
border: 1px solid #000;

/* Ancho */
width: 300px;

/* Alto */
height: 200px;

/* Modelo de caja flexible */
box-sizing: border-box;

/* Radios de borde */
border-radius: 5px;

/* Sombras */
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);</code></pre><hr><h3>Propiedades de Diseño y Visualización</h3><pre><code class="language-css">/* Mostrar u ocultar */
display: block;
display: inline;
display: none;

/* Modelo de caja flexible */
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;

/* Alineación de texto */
text-align: center;

/* Columnas múltiples */
column-count: 3;
column-gap: 20px;

/* Superposición */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);</code></pre><hr><h3>Animaciones y Transiciones</h3><pre><code class="language-css">/* Transición */
transition: width 2s, height 2s, transform 2s;

/* Animación */
@keyframes mover {
    from {left: 0;}
    to {left: 200px;}
}

/* Aplicación de animación */
div {
    animation: mover 4s infinite;
}

/* Animación de rotación */
@keyframes girar {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

/* Aplicación de animación de rotación */
img {
    animation: girar 2s linear infinite;
}</code></pre><hr><h3>Unidades y Medios Responsivos</h3><pre><code class="language-css">/* Unidades relativas */
font-size: 1.2em;
width: 50%;
padding: 10vw;

/* Medios responsivos */
@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}</code></pre><hr><h3>Filtros y Efectos Visuales</h3><pre><code class="language-css">/* Filtros de imagen */
img {
    filter: grayscale(50%);
}

/* Filtros de color */
div {
    background-color: rgba(255, 0, 0, 0.5);
}

/* Transparencia */
opacity: 0.8;

/* Mezcla de fondo */
background-blend-mode: multiply;</code></pre><hr><h3>Flexbox y Grid Layout</h3><pre><code class="language-css">/* Flexbox */
.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* Grid Layout */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 20px;
}</code></pre><p></p>

Cheatsheet completo de CSS: Desde selectores básicos hasta animaciones y diseño responsivo

Descubre en nuestro cheatsheet definitivo de HTML una guía completa para dominar los elementos y atributos esenciales de HTML. Ideal para desarrolladores que buscan una referencia rápida y efectiva para crear páginas web dinámicas y accesibles.

<hr><p>Este cheat sheet te proporciona una base sólida para trabajar con una amplia variedad de elementos y atributos HTML. Utiliza estos recursos según las necesidades específicas de tu proyecto para crear contenido web dinámico, accesible y atractivo.</p><hr><h3>Estructura Básica</h3><ul><li><p><strong>Documento HTML básico:</strong></p><ul><li><p><code>&lt;!DOCTYPE html&gt;</code>: Declara el tipo de documento como HTML5.</p></li><li><p><code>&lt;html lang="es"&gt;</code>: Define el idioma principal del documento.</p></li><li><p><code>&lt;head&gt;</code>: Contiene metadatos, enlaces a estilos y scripts.</p><ul><li><p><code>&lt;meta charset="UTF-8"&gt;</code>: Especifica la codificación de caracteres (UTF-8 es común).</p></li><li><p><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</code>: Controla la escala y el ancho en dispositivos móviles.</p></li><li><p><code>&lt;title&gt;Título de la página&lt;/title&gt;</code>: Define el título del documento.</p></li><li><p><code>&lt;link rel="stylesheet" href="estilos.css"&gt;</code>: Enlaza una hoja de estilos externa.</p></li><li><p><code>&lt;script src="script.js" defer&gt;&lt;/script&gt;</code>: Enlaza un archivo de script JavaScript diferido.</p></li></ul></li><li><p><code>&lt;body&gt;</code>: Contiene el contenido visible de la página.</p></li></ul></li></ul><hr><h3>Atributos Globales</h3><p>Los atributos globales son aquellos que pueden ser utilizados con la mayoría de los elementos HTML. Son muy útiles para aplicar estilos, identificar elementos para scripts, o añadir metadata útil para accesibilidad.</p><ul><li><p><strong>Ejemplo de </strong><code>class</code> y <code>style</code>:</p><pre><code class="language-xml">&lt;p class="destacado" style="color: red; font-size: 18px;"&gt;Este es un texto destacado.&lt;/p&gt;</code></pre><p>En este ejemplo, la clase <code>destacado</code> y el estilo CSS inline se aplican al párrafo para cambiar el color y el tamaño del texto.</p></li><li><p><strong>Ejemplo de </strong><code>id</code>:</p><pre><code class="language-xml">&lt;div id="contenedor-principal"&gt;
  &lt;!-- Contenido del contenedor principal --&gt;
&lt;/div&gt;
</code></pre><p>El <code>id</code> "contenedor-principal" se utiliza para identificar de forma única este elemento, lo que permite referenciarlo fácilmente desde CSS o JavaScript.</p></li><li><p><strong>Atributos de datos personalizados (</strong><code>data-*</code>):</p><pre><code class="language-xml">&lt;button id="btn-accion" data-accion="guardar"&gt;Guardar&lt;/button&gt;</code></pre><p>El atributo <code>data-accion</code> permite almacenar datos personalizados que pueden ser utilizados por scripts para realizar acciones específicas.</p></li></ul><h3>Comentarios en HTML</h3><p>Los comentarios en HTML son útiles para documentar partes del código, hacer notas para ti mismo o para otros desarrolladores, o desactivar temporalmente partes del código sin eliminarlas por completo.</p><ul><li><p><strong>Ejemplo de comentario simple:</strong></p><pre><code class="language-xml">&lt;!-- Este es un comentario que describe el propósito de esta sección --&gt;
&lt;section&gt;
    &lt;!-- Contenido de la sección --&gt;
&lt;/section&gt;
</code></pre></li><li><p><strong>Comentario multilínea:</strong></p></li></ul><pre><code class="language-xml">&lt;!--
    Este es un comentario
    que ocupa varias líneas
    para explicar un bloque de código más extenso.
--&gt;
&lt;div&gt;
    &lt;!-- Contenido del div --&gt;
&lt;/div&gt;</code></pre><p>Los comentarios en HTML no afectan la visualización ni el comportamiento de la página web, por lo que son seguros para incluir notas útiles sin alterar la funcionalidad del sitio.</p><hr><h3>Texto y Encabezados</h3><ul><li><p><strong>Texto y estilos:</strong></p><ul><li><p><code>&lt;h1&gt;</code>, <code>&lt;h2&gt;</code>, <code>&lt;h3&gt;</code>, <code>&lt;h4&gt;</code>, <code>&lt;h5&gt;</code>, <code>&lt;h6&gt;</code>: Encabezados de nivel 1 a 6.</p></li><li><p><code>&lt;p&gt;</code>: Párrafo de texto.</p></li><li><p><code>&lt;strong&gt;</code>: Texto en negrita.</p></li><li><p><code>&lt;em&gt;</code>: Texto en cursiva.</p></li><li><p><code>&lt;mark&gt;</code>: Texto resaltado.</p></li><li><p><code>&lt;del&gt;</code>: Texto tachado.</p></li></ul></li></ul><hr><h3>Enlaces e Imágenes</h3><ul><li><p><strong>Enlaces:</strong></p><ul><li><p><code>&lt;a href="https://www.ejemplo.com"&gt;Enlace a otra página&lt;/a&gt;</code>: Enlace a una URL externa.</p></li><li><p><code>&lt;a href="#seccion1"&gt;Enlace interno&lt;/a&gt;</code>: Enlace a una sección dentro del mismo documento.</p></li></ul></li><li><p><strong>Imágenes:</strong></p><ul><li><p><code>&lt;img src="ruta_de_la_imagen.jpg" alt="Texto alternativo"&gt;</code>: Inserta una imagen con texto alternativo.</p></li></ul></li></ul><hr><h3>Listas y Tablas</h3><ul><li><p><strong>Listas:</strong></p><ul><li><p><code>&lt;ul&gt;</code>: Lista desordenada.</p><ul><li><p><code>&lt;li&gt;</code>: Elemento de lista desordenada.</p></li></ul></li><li><p><code>&lt;ol&gt;</code>: Lista ordenada.</p><ul><li><p><code>&lt;li&gt;</code>: Elemento de lista ordenada.</p></li></ul></li><li><p><code>&lt;dl&gt;</code>: Lista de definición.</p><ul><li><p><code>&lt;dt&gt;</code>: Término.</p></li><li><p><code>&lt;dd&gt;</code>: Definición del término.</p></li></ul></li></ul></li><li><p><strong>Tablas:</strong></p><ul><li><p><code>&lt;table&gt;</code>: Tabla.</p><ul><li><p><code>&lt;caption&gt;</code>: Título de la tabla.</p></li><li><p><code>&lt;thead&gt;</code>, <code>&lt;tbody&gt;</code>, <code>&lt;tfoot&gt;</code>: Encabezado, cuerpo y pie de la tabla.</p></li><li><p><code>&lt;tr&gt;</code>: Fila de la tabla.</p></li><li><p><code>&lt;th&gt;</code>: Celda de encabezado.</p></li><li><p><code>&lt;td&gt;</code>: Celda de datos.</p></li></ul></li></ul></li></ul><hr><h3>Formularios y Elementos Semánticos</h3><ul><li><p><strong>Formularios:</strong></p><ul><li><p><code>&lt;form action="/submit-datos" method="post"&gt;</code>: Formulario con método de envío.</p><ul><li><p><code>&lt;label for="nombre"&gt;Nombre:&lt;/label&gt;</code>: Etiqueta para un campo de entrada.</p></li><li><p><code>&lt;input type="text" id="nombre" name="nombre" required&gt;</code>: Campo de entrada de texto obligatorio.</p></li><li><p><code>&lt;input type="email" id="email" name="email" autocomplete="email"&gt;</code>: Campo de entrada de email con autocompletado.</p></li><li><p><code>&lt;input type="submit" value="Enviar"&gt;</code>: Botón de envío.</p></li><li><p><code>&lt;input type="reset" value="Limpiar"&gt;</code>: Botón para limpiar el formulario.</p></li></ul></li></ul></li><li><p><strong>Elementos semánticos:</strong></p><ul><li><p><code>&lt;article&gt;</code>: Contenido autónomo, como un artículo.</p></li><li><p><code>&lt;section&gt;</code>: Sección de contenido.</p></li><li><p><code>&lt;aside&gt;</code>: Contenido relacionado.</p></li><li><p><code>&lt;header&gt;</code>: Encabezado de una sección o de toda la página.</p></li><li><p><code>&lt;footer&gt;</code>: Pie de página.</p></li><li><p><code>&lt;nav&gt;</code>: Navegación principal.</p></li><li><p><code>&lt;main&gt;</code>: Contenido principal de la página.</p></li></ul></li></ul><hr><h3>Multimedia:</h3><ul><li><p><strong>Elementos multimedia:</strong></p><ul><li><p><code>&lt;audio controls&gt;</code>: Reproductor de audio.</p><ul><li><p><code>&lt;source src="audio.mp3" type="audio/mpeg"&gt;</code>: Fuente de audio con formato y tipo MIME.</p></li></ul></li><li><p><code>&lt;video controls width="400"&gt;</code>: Reproductor de video.</p><ul><li><p><code>&lt;source src="video.mp4" type="video/mp4"&gt;</code>: Fuente de video con formato y tipo MIME.</p></li></ul></li></ul></li></ul><hr><h3>Elementos de Texto y Estilos</h3><ul><li><p><strong>Estilos de texto avanzados:</strong></p><ul><li><p><code>&lt;abbr title="Texto completo"&gt;ABBR&lt;/abbr&gt;</code>: Abreviatura con título.</p></li><li><p><code>&lt;cite&gt;Título de una obra citada&lt;/cite&gt;</code>: Cita de un título de trabajo.</p></li><li><p><code>&lt;code&gt;Código fuente&lt;/code&gt;</code>: Texto formateado para código.</p></li><li><p><code>&lt;kbd&gt;Ctrl&lt;/kbd&gt;</code>: Tecla o entrada de teclado.</p></li><li><p><code>&lt;sup&gt;2&lt;/sup&gt;</code>: Texto sobrescrito (por ejemplo, para exponentes).</p></li><li><p><code>&lt;sub&gt;H&lt;sub&gt;2&lt;/sub&gt;O&lt;/sub&gt;</code>: Texto subíndice (por ejemplo, para fórmulas químicas).</p></li><li><p><code>&lt;pre&gt;Código preformateado&lt;/pre&gt;</code>: Bloque de texto preformateado.</p></li></ul></li></ul><hr><h3>Formularios Avanzados y Atributos</h3><ul><li><p><strong>Campos de formulario avanzados:</strong></p><ul><li><p><code>&lt;textarea rows="4" cols="50"&gt;Texto largo aquí&lt;/textarea&gt;</code>: Área de texto multilínea.</p></li><li><p><code>&lt;select&gt;</code> y <code>&lt;option&gt;</code>: Listas desplegables.</p><pre><code class="language-xml">&lt;select name="opciones"&gt;
  &lt;option value="opcion1"&gt;Opción 1&lt;/option&gt;
  &lt;option value="opcion2"&gt;Opción 2&lt;/option&gt;
  &lt;option value="opcion3"&gt;Opción 3&lt;/option&gt;
&lt;/select&gt;
</code></pre></li><li><p><code>&lt;fieldset&gt;</code> y <code>&lt;legend&gt;</code>: Agrupación de campos con leyenda.</p><pre><code class="language-xml">&lt;fieldset&gt;
  &lt;legend&gt;Datos personales&lt;/legend&gt;
  &lt;!-- Campos de formulario aquí --&gt;
&lt;/fieldset&gt;</code></pre></li></ul></li><li><p><strong>Atributos de formulario adicionales:</strong></p><ul><li><p><code>disabled</code>: Deshabilita un elemento de formulario.</p></li><li><p><code>readonly</code>: Hace que un campo de texto sea de solo lectura.</p></li><li><p><code>placeholder="Texto de ejemplo"</code>: Muestra un texto de ejemplo en un campo de entrada.</p></li><li><p><code>autofocus</code>: Establece el foco automáticamente en un campo al cargar la página.</p></li></ul></li></ul><hr><h3>Multimedia y Elementos Interactivos</h3><ul><li><p><strong>Elementos multimedia avanzados:</strong></p><ul><li><p><code>&lt;iframe src="https://www.youtube.com/embed/VIDEO_ID"&gt;&lt;/iframe&gt;</code>: Inserta contenido embebido como videos.</p></li><li><p><code>&lt;canvas width="200" height="100"&gt;&lt;/canvas&gt;</code>: Área para gráficos y dibujos generados con JavaScript.</p></li><li><p><code>&lt;svg width="100" height="100"&gt;...&lt;/svg&gt;</code>: Gráficos vectoriales escalables.</p></li></ul></li><li><p><strong>Elementos interactivos:</strong></p><ul><li><p><code>&lt;details&gt;</code> y <code>&lt;summary&gt;</code>: Elementos de detalles y su resumen.</p><pre><code class="language-xml">&lt;details&gt;
  &lt;summary&gt;Detalles&lt;/summary&gt;
  &lt;p&gt;Contenido de los detalles.&lt;/p&gt;
&lt;/details&gt;</code></pre></li><li><p><code>&lt;progress value="70" max="100"&gt;70%&lt;/progress&gt;</code>: Barra de progreso.</p></li><li><p><code>&lt;meter value="3" min="1" max="5"&gt;3 de 5&lt;/meter&gt;</code>: Medidor para valores dentro de un rango.</p></li></ul></li></ul><hr><h3>Elementos de Sección y Navegación</h3><ul><li><p><strong>Elementos de sección avanzados:</strong></p><ul><li><p><code>&lt;figure&gt;</code> y <code>&lt;figcaption&gt;</code>: Figura con leyenda.</p></li><li><p><code>&lt;address&gt;Dirección de contacto&lt;/address&gt;</code>: Información de contacto.</p></li></ul></li><li><p><strong>Elementos de navegación:</strong></p><ul><li><p><code>&lt;nav&gt;</code> con listas de navegación:</p><pre><code class="language-xml">&lt;nav&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Inicio&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Servicios&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Contacto&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/nav&gt;</code></pre></li></ul></li></ul><hr><h3>Elementos Semánticos y Accesibilidad</h3><ul><li><p><strong>Elementos semánticos avanzados:</strong></p><ul><li><p><code>&lt;main&gt;</code>: Contenido principal de la página.</p></li><li><p><code>&lt;article&gt;</code> y <code>&lt;section&gt;</code>: Partes específicas de un documento.</p></li><li><p><code>&lt;header&gt;</code>, <code>&lt;footer&gt;</code> y <code>&lt;aside&gt;</code>: Para encabezado, pie de página y contenido relacionado respectivamente.</p></li></ul></li><li><p><strong>Mejoras de accesibilidad:</strong></p><ul><li><p><code>aria-*</code> atributos: Mejoran la accesibilidad para usuarios con discapacidades.</p><pre><code class="language-xml">&lt;button aria-expanded="false" aria-controls="menu"&gt;Menú&lt;/button&gt;</code></pre></li></ul></li></ul><hr><h3>Otros Elementos y Atributos Útiles</h3><ul><li><p><strong>Otros elementos útiles:</strong></p><ul><li><p><code>&lt;time datetime="2024-06-25"&gt;25 de junio de 2024&lt;/time&gt;</code>: Fecha y hora.</p></li><li><p><code>&lt;mark&gt;Texto resaltado&lt;/mark&gt;</code>: Texto destacado.</p></li><li><p><code>&lt;br&gt;</code>: Oportunidad de salto de palabra.</p></li></ul></li></ul>

Contenido

Cheatsheet completo de JavaScript: Desde fundamentos básicos hasta promesas y manipulación del DOM

@codechappie

Cheatsheet completo de CSS: Desde selectores básicos hasta animaciones y diseño responsivo

@codechappie

Cheatsheet definitivo de HTML: Domina elementos y atributos esenciales

@codechappie