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

Aprende a usar Fetch en Javascript con estos 3 Tips

Javascript

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

Aprende buenas prácticas en Javascript, aquí te muestro como

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

Bootstrap Cards: muestra contenido con tarjetas elegantes

Aprende a usar el componente Card de Bootstrap 5 para mostrar artículos, productos y perfiles. Ejemplos de grids de cards, cards con imagen y más.

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

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

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

3️⃣ ¿Cómo hacer tablas en HTML?  Curso De HTML Desde Cero

Aprende a crear tablas en HTML, desde lo más básico a lo avanzado. Estructura datos de manera clara y visual en tus páginas web.

HTML

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

Construye un sistema de login completo usando JavaScript, HTML y PHP. Asegura tus páginas y gestiona la autenticación de usuarios.

HTML Javascript MySQL PHP

5️⃣ ¿Cómo hacer una maquetación web en HTML desde cero?

Crea una maquetación web desde cero usando solo HTML. Aprende a estructurar tus páginas con la etiqueta div y a usar CSS para los estilos.

HTML

Cómo solucionar el error 'x.map is not a function' en JavaScript

❌ Error 'map is not a function'? ¡Soluciónalo en segundos! Aprende a validar tus arrays y manejar datos de APIs de forma segura para evitar crashes en JS.

programacion

Cómo solucionar 'Uncaught TypeError: Cannot read property of null' en JavaScript nativo

¿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

Aprende a usar npx para ejecutar comandos de forma temporal sin contaminar tu sistema. El poder de los paquetes instantáneos.

Contexto de apilamiento CSS (Stacking Context) - Explicación definitiva

Entiende de una vez por todas qué es el stacking context en CSS y por qué determina completamente cómo se superponen tus elementos.

CSS

Crud Bootstrap 5 Modals Php Mysql

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

Aprende a crear animaciones en CSS con @keyframes, transition y animation. Ejemplos de efectos hover, loaders, fade-in y animaciones responsivas sin JavaScript.

CSS

CSS Flexbox desde cero: guía para principiantes

Aprende CSS Flexbox desde cero con ejemplos prácticos. Domina las propiedades más importantes para crear layouts modernos y responsivos.

CSS

2.5: Flexbox - Alineación sin sufrimiento

Display flex, justify-content, align-items. Alinea elementos como nunca antes. Adiós floats.

Frontend Ninja

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

Aprende CSS Grid desde cero con ejemplos prácticos. Crea layouts complejos con filas y columnas, áreas con nombre y diseños completamente responsivos.

CSS

2.6: CSS Grid - El tablero de estrategia

Grid-template-columns/rows, grid-area. Layouts 2D profesionales. Dashboards, galerías, todo.

Frontend Ninja

CSS Position: absolute, relative, fixed y sticky explicados

Entiende cómo funciona CSS Position con ejemplos visuales. Aprende a usar position relative, absolute, fixed y sticky para controlar el posicionamiento de elementos.

CSS

Curso: Aprende HTML y CSS Paso a Paso

Inicia tu camino en el desarrollo web. Esta guía completa te enseña los fundamentos de HTML para estructurar tu contenido y CSS para darle estilo y diseño a tus páginas.

HTML CSS Tutorial

Curso de PHP, MySQL y Bootstrap desde Cero: ¡Aprende Desarrollo Web Fácilmente!

Inicia tu camino en el desarrollo web con nuestro curso completo y gratuito de PHP, MySQL y Bootstrap. Aprende paso a paso a construir sitios web dinámicos y atractivos, sin necesidad de experiencia previa.

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

Aprende Eloquent de Laravel: modelos, relaciones, scopes y técnicas avanzadas para manejar datos con elegancia.

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

4️⃣ Como funcionan los formularios en html Curso De HTML Desde Cero

Aprende a crear formularios en HTML, usar campos de texto, botones de radio, checkboxes y más. Descubre cómo interactúan con el backend.

HTML

Formularios con Bootstrap: diseño profesional sin esfuerzo

Aprende a crear formularios de contacto, login y registro usando las clases de Bootstrap 5. Con validación visual y estilos responsivos incluidos.

Bootstrap HTML

Fundamentos de Javascript

Domina los fundamentos de JavaScript. Aprende a manipular el DOM, manejar eventos y crear aplicaciones web interactivas desde cero.

Javascript

Fundamentos: Validación de login con Javascript

Valida formularios de login con JavaScript. Aprende a crear un proceso de autenticación seguro y robusto en tus aplicaciones web.

Javascript

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

Aprende HTML y CSS desde cero hasta nivel profesional. Guía definitiva con más de 3,000 palabras que cubre estructura HTML, semántica, CSS moderno, Flexbox, Grid, responsive design y mejores prácticas actuales.

HTML CSS Tutorial

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

Domina la creación de formularios con Bootstrap 5. Desde el diseño básico hasta layouts complejos y validación visual para mejorar la UX.

Guía Definitiva de JavaScript en 2026: De Principiante a Desarrollador Funcional

Aprende JavaScript desde cero hasta nivel funcional. Guía completa con más de 3,000 palabras que cubre variables, funciones, DOM, eventos, APIs, async/await, y las mejores prácticas actuales del lenguaje.

Javascript Tutorial

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

Aprende a dominar el posicionamiento en CSS. Guía práctica sobre el uso de position absolute y relative con ejemplos reales de componentes de UI.

1️⃣ Curso de HTML desde cero: crea páginas web con este curso práctico de HTML

Iníciate en el desarrollo web creando tus primeras páginas con este curso práctico de HTML. ¡Aprende desde cero y paso a paso!

HTML

2️⃣ Curso de HTML desde cero: Aprende a Insertar Imagen En HTML, crear listas y enlaces

Aprende a insertar imágenes, crear listas y enlaces en tus páginas web. Sigue el curso de HTML desde cero para principiantes.

HTML

3.5: Arrays y Objetos - Listas y descripciones

Arrays para listas, objetos para estructuras. Map, filter, reduce. Datos complejos ninja.

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 HTML con JavaScript. querySelector, innerHTML, classList. Interacción ninja.

Frontend Ninja

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

Aprende las diferencias entre localStorage y sessionStorage en JavaScript, cuándo usar cada uno y cómo guardar y recuperar datos en el navegador.

Javascript

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

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

¿Crees que Fetch lanza errores en 404 o 500? 🛑 ¡Cuidado! Aprende a usar response.ok para manejar errores HTTP correctamente y evitar fallos en tu App.

programacion

Manipulacion Dom Javascript Alto Rendimiento

Evita el reflow innecesario del navegador. Aprende a insertar cientos de elementos en el DOM de forma eficiente y fluida.

JavaScript

4.2: npm - El Arsenal Oficial del Ninja JavaScript

Domina npm desde cero: instalación de paquetes, scripts, dependencias de desarrollo y flujo de trabajo profesional

Gestores de Paquetes Ninja

Notificaciones Toast Bootstrap 5 Php Ajax

Aprende a mostrar alertas no intrusivas tipo Toast. Mejora el feedback de tu aplicación al guardar o eliminar datos.

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

Paginacion Php Mysql Ajax Fetch Api

Aprende a implementar una paginación moderna y fluida usando PHP 8.3 y Fetch API para mejorar la experiencia de usuario sin recargas de página.

PHP MySQL Javascript

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

Aprende encapsulamiento y herencia en la programación orientada a objetos con PHP. Constructores, modificadores de acceso, extends y parent con ejemplos prácticos.

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.

PHP

¿Qué es 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 (Document Object Model) y cómo manipularlo con JavaScript para hacer tus páginas web dinámicas e interactivas.

Javascript

Valida múltiples elementos del login con querySelectorAll

Aprende en este sencillo artículo, como utilizar el selector querySelectorAll de Javascript

Javascript

SessionStorage en Javascript: 6 cosas que no sabías

Sabes como utilizar sessionStorage y localStorage, aqu´te cuento como usar la memoria del navegador

Javascript

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

Compara SQL puro con ORMs como Eloquent. Aprende cuándo usar cada enfoque y por qué los ORMs son esenciales para el desarrollo moderno.

PHP MySQL

Terminal Avanzada con ZSH: Domina tu Línea de Comandos como un Ninja

Aprende a configurar ZSH y Oh My Zsh para maximizar tu productividad en la terminal. Atajos, plugins y configuración profesional.

Herramientas

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

Aprende a implementar validaciones en tiempo real usando los estilos nativos de Bootstrap 5 y JavaScript. Mejora la UX de tus formularios al instante.

Frontend Bootstrap

Variables CSS (Custom Properties): el CSS moderno que debes dominar

Aprende a usar variables CSS o custom properties para crear temas, gestionar colores y escribir CSS más mantenible. Ejemplos prácticos con modo oscuro.

CSS