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.

All JavaScript for Designers content:

Filters

Animation

Cómo animar durante el desplazamiento con JavaScript puro

Tutorial • Intermediate

Hacer que los elementos aparezcan según su posición de desplazamiento es una opción de diseño muy popular al crear páginas web, pero normalmente...

Jemima Abu • 15 Mar 2021
JavaScript for Designers

Cómo usar JavaScript para reproducir sonido (efecto de una máquina de escribir)

Tutorial • Advanced

Hoy vamos a crear el efecto de una máquina de escribir utilizando CSS y JavaScript. Esto ocurrirá cuando un usuario sitúe el puntero del ratón (hover)...

George Martsoukos • 11 Feb 2021
HTML Templates

Crea hermosas animaciones durante el desplazamiento con la propiedad Clip-Path de CSS

Tutorial • Intermediate

En un tutorial anterior, aprendimos a crear un efecto de escala de grises a color durante el desplazamiento. Para implementarlo, aprovechamos las...

George Martsoukos • 18 Jan 2021
Animation

Cómo crear transiciones de página suaves con JavaScript

Tutorial • Intermediate

En este tutorial de JavaScript, aprenderás cómo crear una transición de página suave con una biblioteca de JavaScript llamada Highway.

Adi Purdila • 29 Dec 2020
JavaScript for Designers

Una introducción a los oyentes de eventos de JavaScript para los diseñadores web

Tutorial • Beginner

Si eres un diseñador web que aún no ha entrado en el mundo de JavaScript, o si recién estás comenzando en el desarrollo front-end, este tutorial es la manera...

Anna Monus • 5 Nov 2020
HTML

Habilidades en JavaScript: crea una animación para una cabecera responsiva durante el desplazamiento de la página

Tutorial • Beginner

En este tutorial, aprenderemos cómo animar elementos de la cabecera durante el desplazamiento de la página. En primer lugar, crearemos una cabecera de...

George Martsoukos • 9 Sep 2020
SVG

Cómo crear una aplicación de tareas pendientes con JavaScript puro (y almacenamiento local)

Tutorial • Advanced

En este tutorial, mejoraremos nuestras habilidades en el front-end aprendiendo a crear una aplicación de tareas pendientes "hecha a mano". Para crearla no...

George Martsoukos • 30 Jul 2020
HTML

Consejo rápido: cómo crear un efecto de desvanecimiento simple durante el desplazamiento

Tutorial • Beginner

En el tutorial superbreve de hoy, aprenderemos cómo crear un simple, pero útil efecto de desplazamiento. A medida que nos desplazamos en la página, la...

George Martsoukos • 29 May 2020
JavaScript for Designers

Cómo crear un efecto de escala de grises a color durante el desplazamiento (con CSS y JavaScript)

Tutorial • Intermediate

En este nuevo tutorial, empezaremos con algunas imágenes en escala de grises y aprenderemos a revelar suavemente sus variantes de color al desplazarnos. Para...

George Martsoukos • 19 May 2020
HTML

Cómo crear una presentación de diapositivas simple a pantalla completa con solo JavaScript

Tutorial • Intermediate

En este tutorial aprenderás a crear una presentación de diapositivas a pantalla completa con JavaScript simple. Para crearla, usaremos varios trucos de...

George Martsoukos • 17 Mar 2020
WordPress Plugins

Añade una barra de búsqueda Ajax en tiempo real a tu sitio web WordPress

Tutorial • Intermediate

Con independencia de que estés escribiendo una consulta de búsqueda en Google, YouTube, Amazon o cualquier otro importante sitio web, la búsqueda en...

Jessica Thornsby • 10 Dec 2019
JavaScript for Designers

Una guía para la gestión de dependencias en el desarrollo front-end

Tutorial • Beginner

Los administradores de paquetes, los ejecutores de tareas y los agrupadores de módulos son herramientas de compilación que puedes usar para la administración...

Anna Monus • 10 Dec 2019