Volver a las rutas
🎨

Frontend

Aprende a crear interfaces web modernas y responsivas

Temas de esta ruta

1 HTML semántico
2 CSS3 y diseño responsivo
3 JavaScript moderno
4 React básico

Artículos de esta ruta

Aprende a usar Fetch en Javascript con estos 3 Tips

Domina la Fetch API en JavaScript con 3 tips prácticos. Aprende a hacer peticiones HTTP, manejar respuestas y consumir cualquier API REST como un profesional.

Javascript

8 Buenas prácticas en Javascript que todos deberían saber

Domina 8 buenas prácticas esenciales de JavaScript para escribir código más limpio, eficiente y profesional que eleve la calidad de tu desarrollo frontend.

Javascript

Async Await Javascript Fetch Api Avanzado

Domina el asincronismo en JavaScript. Aprende a manejar múltiples peticiones simultáneas sin bloquear el navegador.

JavaScript

Algoritmos de búsqueda y ordenamiento en JavaScript

Aprende algoritmos de búsqueda lineal y binaria, Bubble Sort y Selection Sort con ejemplos en JavaScript y análisis de complejidad Big O.

Programacion

Bootstrap Cards: muestra contenido con tarjetas elegantes

Bootstrap 5 Cards: guía con ejemplos de tarjetas, grids y diseños. Muestra artículos, productos y perfiles con estilo profesional.

Bootstrap

Bootstrap Grid System: domina el diseño responsive

Aprende a usar el sistema de Grid de Bootstrap 5 para crear layouts responsivos con filas, columnas y breakpoints. Ejemplos prácticos incluidos.

Bootstrap

Bootstrap Navbar: crea menús de navegación responsivos

Aprende a crear navbars responsivos con Bootstrap 5. Menú con logo, enlaces, hamburguesa para móvil, dropdown y modo oscuro con ejemplos de código.

Bootstrap

Clonación profunda de objetos con structuredClone en JS

¿Modificaste un objeto sin querer? 😵 Aprende structuredClone, la forma nativa de hacer copias profundas en JS sin perder tipos de datos ni referencias.

programacion

Buscador Tiempo Real Php Mysql Fetch Api

Crea un buscador instantáneo que filtre resultados mientras el usuario escribe, sin recargar la página y de forma ultra rápida.

PHP JavaScript

Guía para hacer tablas en HTML desde cero

Cómo hacer tablas en HTML: curso desde cero. Aprende etiquetas table, th, td, rowspan y colspan para estructurar datos en tu web.

HTML

Cómo hacer un login en javascript, HTML y PHP

Crea un sistema de login seguro con JavaScript, HTML y PHP: guía paso a paso con validación frontend y backend. Autenticación profesional en tus aplicaciones.

HTML Javascript MySQL PHP

Cómo hacer una maquetación web en HTML desde cero

Domina la maquetación web desde cero con HTML y CSS. Guía completa paso a paso para estructurar páginas web profesionales y optimizar tu layout. ¡Empieza hoy!

HTML

map is not a function: solución en JavaScript

Corrige el error map is not a function en JavaScript: identifica el tipo de dato, valida con Array.isArray y maneja respuestas de APIs de forma segura.

programacion

Soluciona TypeError: Cannot read property of null en JavaScript

¿Tu JS se rompe con 'Cannot read property of null'? 🛑 Aprende a depurar este error común, validar el DOM y usar Optional Chaining como un pro. ¡Entra ya!

programacion

Dominando npx: Ejecuta Paquetes npm Sin Instalarlos

Domina npx para ejecutar paquetes npm sin instalarlos permanentemente. Aprende a usar comandos temporales y mantener tu sistema sin dependencias innecesarias.

Contexto de apilamiento CSS: explicación definitiva

Entiende de una vez por todas el stacking context en CSS. Descubre cómo funciona la superposición visual de elementos y por qué determina el orden de las capas.

CSS

CRUD con Bootstrap 5, PHP y MySQL en modales

Crea una interfaz de administración moderna utilizando ventanas modales de Bootstrap 5.3 para realizar operaciones CRUD sin salir de la vista principal.

PHP MySQL Bootstrap

CSS Animations: cómo crear animaciones sin JavaScript

Domina CSS Animations con @keyframes y transition. Crea efectos hover, loaders, fade-in y animaciones responsivas sin JavaScript. Guía completa con ejemplos prácticos.

CSS

CSS Flexbox desde cero: guía para principiantes

CSS Flexbox desde cero: guía con ejemplos prácticos. Domina justify-content, align-items y crea layouts responsivos sin floats.

CSS

CSS Grid Layout: el sistema de diseño más poderoso de CSS

CSS Grid Layout: tutorial desde cero con ejemplos. Crea layouts 2D profesionales, dashboards y galerías responsive sin frameworks.

CSS

2.6: CSS Grid - El tablero de estrategia

Domina CSS Grid: grid-template-columns, grid-template-rows y grid-area para crear layouts 2D profesionales como dashboards, galerías y sitios web completos.

Frontend Ninja

CSS Position: absolute, relative, fixed y sticky explicados

Entiende CSS Position con ejemplos visuales: relative, absolute, fixed y sticky. Controla el posicionamiento de elementos como un profesional del desarrollo frontend.

CSS

Curso: Aprende HTML y CSS Paso a Paso

Inicia en el desarrollo web con esta guía completa de HTML y CSS paso a paso. Estructura contenido con HTML y diseña páginas profesionales con CSS desde cero.

HTML CSS Tutorial

2.5: Flexbox - Alineación sin sufrimiento

Domina CSS Flexbox desde cero: display flex, justify-content, align-items y más. Aprende a alinear y distribuir elementos sin esfuerzo ni floats innecesarios.

Frontend Ninja

Curso de PHP MySQL y Bootstrap para principiantes

Curso completo de PHP, MySQL y Bootstrap desde cero. Aprende desarrollo web paso a paso y crea sitios dinámicos sin experiencia previa. ¡Inscríbete gratis!

PHP MySQL Tutorial Bootstrap

Delegación de eventos (Event Delegation) para optimizar el DOM

¡Optimiza tu DOM hoy! 🚀 Aprende Delegación de Eventos en JavaScript para manejar cientos de elementos con un solo listener. Mejora el rendimiento y el INP.

programacion

Eloquent ORM: Domina las Relaciones como un Maestro

Domina Eloquent ORM en Laravel: modelos, relaciones, scopes y técnicas avanzadas. Maneja tus datos con elegancia y potencia. Guía completa para desarrolladores PHP.

Evitar el 'Callback Hell' con Promesas y Async/Await en JS

Escapa de la 'Pirámide de la Perdición' 🕸️. Aprende a transformar el Callback Hell en código limpio con Async/Await y Promesas. ¡Mejora la legibilidad ya!

programacion

Cómo evitar inyecciones XSS al usar innerHTML en JS

¿Usas innerHTML? ⚠️ ¡Tu web podría ser vulnerable a ataques XSS! Aprende a usar textContent y saneamiento para proteger los datos de tus usuarios.

programacion

Formularios con Bootstrap: diseño profesional sin esfuerzo

Crea formularios con Bootstrap 5: diseño responsive, validación visual y componentes reutilizables. Aprende a construir forms de contacto, login y registro.

Bootstrap HTML

Cómo funcionan los formularios en HTML desde cero

Aprende a crear formularios en HTML: campos de texto, radio buttons, checkboxes y más. Descubre cómo los formularios interactúan con el backend de tu sitio.

HTML

Guía completa de fundamentos de JavaScript

Domina los fundamentos de JavaScript y crea apps web interactivas. Aprende DOM, eventos y más con esta guía completa para principiantes. ¡Empieza a programar!

Javascript

Fundamentos: Validación de login con Javascript

Valida formularios de login con JavaScript: crea autenticación segura y robusta desde el frontend. Aprende a proteger tus aplicaciones web de forma efectiva.

Javascript

Guía Completa de HTML y CSS: De Cero a Profesional en 2026

Guía completa de HTML y CSS 2026: de cero a profesional. Cubre HTML5, semántica, Flexbox, Grid, responsive design y mejores prácticas actuales. Más de 3,000 palabras de contenido.

HTML CSS Tutorial

Form Bootstrap: Guía completa de diseño y validación avanzada

Domina el diseño de formularios con Bootstrap 5. Desde layouts básicos hasta validación visual avanzada. Guía completa con ejemplos para mejorar la experiencia de usuario.

Guía definitiva de JavaScript en 2026 para principiantes

Guía definitiva de JavaScript 2026: de principiante a desarrollador funcional. Aprende variables, DOM, eventos, APIs, async/await y buenas prácticas modernas.

Javascript Tutorial

Position Absolute y Relative en CSS: Cómo se usan correctamente

Domina a fondo position absolute y relative en CSS con ejemplos reales de UI. Guía práctica para controlar el posicionamiento de elementos en tus proyectos web.

Anatomía del HTML: etiquetas, atributos y sintaxis

Domina la estructura de las etiquetas HTML: sintaxis, atributos y cierre correcto. Aprende los fundamentos esenciales para construir páginas web profesionales.

Frontend Ninja

Curso de HTML desde cero: crea páginas web prácticas

Curso de HTML desde cero para principiantes. Crea tus primeras páginas web paso a paso con este tutorial práctico. Iníciate en el desarrollo web sin conocimientos previos.

HTML

Curso HTML: inserta imágenes, listas y enlaces

Domina cómo insertar imágenes, listas y enlaces en HTML. Curso práctico desde cero para principiantes. Aprende a estructurar contenido visual en tus páginas web.

HTML

3.5: Arrays y Objetos - Listas y descripciones

Domina arrays y objetos en JavaScript: map, filter, reduce y más. Aprende a manejar datos complejos como un profesional del frontend con ejemplos prácticos.

Frontend Ninja

JS: Cómo detectar cerrar pestañas y borrar sessionStorage

Aprende a gestionar el ciclo de vida de tus datos en el navegador. Guía para detectar el cierre de pestañas y limpiar sessionStorage de forma efectiva.

3.6: El DOM - Atrapando elementos

Manipula el DOM con JavaScript: querySelector, innerHTML, classList y más. Aprende a interactuar con HTML dinámicamente. Guía práctica para desarrolladores frontend.

Frontend Ninja

LocalStorage vs SessionStorage vs Cookies: Cuándo usar cada uno

¿Dónde guardar tus datos? 💾 Comparamos LocalStorage, SessionStorage y Cookies. Aprende cuál elegir según seguridad y persistencia en JavaScript moderno.

programacion

localStorage vs sessionStorage en JavaScript: ¿cuál usar?

localStorage vs sessionStorage en JavaScript: descubre sus diferencias, cuándo usar cada uno y cómo almacenar datos en el navegador de forma eficiente y segura.

Javascript

Manejo de errores en Fetch API: Cómo detectar 404 y 500

Manejo de errores en Fetch API: 404 y 500 no lanzan errores automáticos. Aprende a usar response.ok para detectar fallos HTTP correctamente y proteger tu aplicación.

programacion

Manipulación del DOM en JavaScript de alto rendimiento

Manipulación del DOM en JavaScript de alto rendimiento. Evita reflows innecesarios y aprende a insertar cientos de elementos con DocumentFragment. Fluidez garantizada.

JavaScript

4.2: npm - El Arsenal Oficial del Ninja JavaScript

Domina npm desde cero: instalación de paquetes, scripts personalizados y dependencias de desarrollo. Flujo de trabajo profesional para proyectos JavaScript.

Gestores de Paquetes Ninja

Notificaciones Toast Bootstrap 5 Php Ajax

Implementa notificaciones Toast con Bootstrap 5, PHP y AJAX. Aprende a mostrar alertas no intrusivas para optimizar la experiencia de usuario en tu sitio web.

Frontend Bootstrap

6 cosas de Objetos en Javascript que debes saber

Aprende 6 aspectos fundamentales de los objetos en JavaScript que todo desarrollador debe dominar para escribir código más limpio y eficiente.

Javascript

Paginación dinámica con PHP, MySQL y Fetch API

Implementa paginación moderna con PHP 8.3, MySQL y Fetch API. Navegación sin recargas de página que mejora la experiencia de usuario y el rendimiento de tu web.

PHP MySQL Javascript

Patrón Factory en PHP: crea objetos dinámicos

Evita el uso excesivo de 'new' en tu código. Aprende a centralizar la creación de objetos complejos con el patrón de diseño Factory.

Backend Patrones de Diseño

Programación orientada a objetos: encapsulamiento y herencia en PHP

POO en PHP: encapsulamiento y herencia explicados con ejemplos. Constructores, modificadores de acceso, extends y parent. Domina la programación orientada a objetos.

Programacion PHP

Problemas con z-index CSS: Guía completa de soluciones

¿Tu z-index no funciona? 😤 Descubre por qué ocurren los problemas de apilamiento en CSS y aprende las soluciones definitivas con ejemplos prácticos.

CSS

Programación orientada a Objetos: ¡5 conceptos que debes conocer!

Descubre 5 conceptos clave de la Programación Orientada a Objetos: clases, objetos, herencia, encapsulamiento y polimorfismo. Domina POO desde cero con ejemplos claros.

PHP

Guía completa de async/await en JavaScript

Aprende a usar async/await en JavaScript para manejar código asíncrono de forma sencilla y legible. Adiós al callback hell.

Javascript

¿Qué es Bootstrap y cómo usarlo? Guía desde cero

Aprende qué es Bootstrap, el framework CSS más popular del mundo. Cómo incluirlo en tu proyecto, usar su sistema de grid, componentes y clases de utilidad.

Bootstrap Tutorial

¿Qué es el DOM y cómo manipularlo con JavaScript?

Aprende qué es el DOM y cómo manipularlo con JavaScript para crear páginas web dinámicas e interactivas. Manipulación del Document Object Model desde cero.

Javascript

Domina los arreglos en PHP: guía completa

Domina los arreglos en PHP: tipos de arrays, funciones de gestión y manipulación de datos. Aprende a trabajar con esta estructura fundamental en el lenguaje.

PHP

Valida múltiples elementos del login con querySelectorAll

Domina querySelector y querySelectorAll en JavaScript. Aprende a seleccionar elementos del DOM y validar formularios de login como un desarrollador profesional.

Javascript

SessionStorage en Javascript: 6 cosas que no sabías

Guía práctica de SessionStorage en JavaScript: guarda y gestiona datos en el navegador durante la sesión del usuario. Descubre 6 claves sobre almacenamiento web.

Javascript

SQL Puro vs ORM: La Batalla por la Integridad de tus Datos

Compara SQL puro vs ORMs como Eloquent: cuándo usar cada enfoque y por qué los mapeadores objeto-relacionales son esenciales para el desarrollo web moderno.

PHP MySQL

Terminal avanzada con ZSH: domina la línea de comandos

Configura ZSH y Oh My Zsh como un profesional. Atajos, plugins y trucos para maximizar tu productividad en la terminal. Domina la línea de comandos avanzada.

Herramientas

Domina Makefile: automatiza tareas de compilación

Domina Makefile: aprende qué es, cómo funciona y cómo automatizar tareas de compilación y desarrollo con este poderoso archivo de configuración para proyectos.

Herramientas Productividad

TypeScript vs JavaScript en 2026: ¿sigue valiendo la pena aprender JS puro?

TypeScript superó a JavaScript en GitHub por primera vez en 2025. ¿Significa esto que JS puro está muerto? Comparativa completa con datos, ejemplos de código y casos de uso.

JavaScript

Uso de DocumentFragment para inserciones masivas en el DOM

¿Tu web se congela al insertar datos? 🧊 Usa DocumentFragment para realizar inserciones masivas en el DOM con un solo Reflow. ¡Velocidad ninja en Vanilla JS!

programacion

Validar Formularios Bootstrap 5 Javascript Nativo

Validación de formularios Bootstrap 5 con JavaScript nativo. Implementa validación en tiempo real y mejora la UX sin librerías externas.

Frontend Bootstrap

Variables CSS: custom properties que debes dominar

Domina las variables CSS o custom properties. Crea temas dinámicos, gestiona colores y escribe CSS mantenible. Ejemplos prácticos con modo oscuro incluidos.

CSS