Learn JavaScript for Designers

Bring your websites to life with interactive elements using JavaScript. These tutorials are tailored to web designers and are full of practical examples and tips.
  1. Cómo Crear un Slider de Pantalla Dividida con JavaScript

    Cómo Crear un Slider de Pantalla Dividida con JavaScript

    Tutorial Intermediate

    En video tutorial de hoy voy a mostrar cómo crear un elemento Slider de "pantalla dividida" (o UI, lo que usted prefiere llamarlo) utilizando JavaScript....

  2. Elaborando una Línea de Tiempo Horizontal Con  CSS y JavaScript

    Elaborando una Línea de Tiempo Horizontal Con  CSS y JavaScript

    Tutorial Intermediate

    En un post previo, te mostré cómo crear una línea de tiempo vertical responsiva desde cero. Hoy, cubriré el proceso de crear la línea de tiempo horizontal...

  3. ¿Cómo hacer un Efecto Hover de Subrayado Movedizo con CSS y JavaScript?

    ¿Cómo hacer un Efecto Hover de Subrayado Movedizo con CSS y JavaScript?

    Tutorial Intermediate

    En el tutorial de Hoy, vamos a usar un poco de CSS y JavaScript para crear un sofisticado menu con efecto hover. No es un resultado final complicado, pero...

  4. Cómo crear una barra de navegación responsiva con flexbox

    Cómo crear una barra de navegación responsiva con flexbox

    Tutorial Intermediate

    ¡Es momento de un ejercicio práctico en flexbox! En este tutorial utilizaremos flexbox para crear una barra de navegación basada en el enfoque «móviles...

  5. Qué es DOM API (y cómo usarla para escribir JavaScript para la web)?

    Qué es DOM API (y cómo usarla para escribir JavaScript para la web)?

    Tutorial Beginner

    En este tutorial sobre el DOM y JavaScript veremos los fundamentos sobre cómo escribir código JavaScript nativo para navegadores web sin usar bibliotecas de...

  6. Hoja de referencia esencial: convierte jQuery a JavaScript

    Hoja de referencia esencial: convierte jQuery a JavaScript

    Tutorial Beginner

    A pesar de que jQuery sigue siendo una popular biblioteca de JavaScript y tiene un lugar en el desarrollo web, las APIs web nativas han evolucionado mucho en...

  7. Cómo añadir JavaScript personalizado a tu sitio WordPress

    Cómo añadir JavaScript personalizado a tu sitio WordPress

    Tutorial Beginner

    Si quieres mejorar la funcionalidad del front-end de tu sitio WordPress, tendrás que añadirle JavaScript, con independencia de que estés utilizando una...

  8. Construir un efecto hover con eventos del mouse en Java y GSAP

    Construir un efecto hover con eventos del mouse en Java y GSAP

    Tutorial Intermediate

    En este tutorial de JavaScript y GSAP, veremos dos efectos hover del cursor. Un cursor JavaScript que cambia su aspecto según el elemento sobre el que se sitúe.

  9. Cómo crear en JavaScript una galería de imágenes que se puedan arrastrar con GSAP

    Cómo crear en JavaScript una galería de imágenes que se puedan arrastrar con GSAP

    Tutorial Intermediate

    En un tutorial anterior, aprendimos a crear una galería de imágenes responsiva con slick.js. Hoy vamos a crear algo similar: una galería de imágenes...

  10. Las mejores plantillas de panel de React (Frontend JavaScript)

    Las mejores plantillas de panel de React (Frontend JavaScript)

    Tutorial Beginner

    ¿Estás buscando una plantilla de panel de administración de React para tu aplicación web?. React es una librería frontend de JavaScript utilizada para...

  11. Crea un sitio web con desplazamiento único con Locomotive Scroll y Tailwind CSS

    Crea un sitio web con desplazamiento único con Locomotive Scroll y Tailwind CSS

    Tutorial Intermediate

    ¿Alguna vez has querido crear un sitio web de una sola página con un desplazamiento único pero no sabías por dónde empezar? Si es así, ¡no te preocupes!...

  12. Cómo recrear la etiqueta flotante de Material Design

    Cómo recrear la etiqueta flotante de Material Design

    Tutorial Beginner

    Cuando se trata de crear formularios en páginas web, la accesibilidad y el diseño deben ir de la mano.  Idealmente, cada campo de entrada deberías tener...