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:

  1. 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...

  2. Cómo implementar el desplazamiento suave con JavaScript puro

    Cómo implementar el desplazamiento suave con JavaScript puro

    Tutorial Beginner

    En este nuevo tutorial, aprenderemos cómo implementar el desplazamiento suave en nuestras páginas web. Comenzaremos con un enfoque común de jQuery para...

  3. Cómo generar colores de fondo aleatorios con JavaScript

    Cómo generar colores de fondo aleatorios con JavaScript

    Tutorial Beginner

    En este tutorial aprenderás cómo cambiar el color de fondo de una página aleatoriamente usando JavaScript. También aprenderás cómo modificar tu código...

  4. Cómo ocultar/mostrar una cabecera fija durante el desplazamiento de la página con JavaScript

    Cómo ocultar/mostrar una cabecera fija durante el desplazamiento de la página con JavaScript

    Tutorial Intermediate

    ¿Alguna vez has visto una de esas barras de cabecera fijas (o «pegajosas») que desaparecen cuando empiezas a desplazarte por la página, y vuelven a aparecer...

  5. Cambia entre esquemas de color con variables CSS y JavaScript

    Cambia entre esquemas de color con variables CSS y JavaScript

    Tutorial Beginner

    En este tutorial analizaremos cómo implementar diferentes esquemas de color en un sitio web usando variables CSS y una línea de JavaScript puro. Primero...

  6. Crear una línea de tiempo con CSS y un poco de JavaScript

    Crear una línea de tiempo con CSS y un poco de JavaScript

    Tutorial Intermediate

    En este tutorial, aprenderemos cómo crear una línea de tiempo vertical responsive desde cero. En primer lugar, vamos a crear la estructura básica con un poco...

  7. Cómo implementar Debounce y Throttle con JavaScript

    Cómo implementar Debounce y Throttle con JavaScript

    Tutorial Intermediate

    En JavaScript, siempre que adjuntamos una función de alto rendimiento a un detector de eventos, se considera una práctica recomendada para controlar la...

  8. Crea una aplicación meteorológica simple con JavaScript puro

    Crea una aplicación meteorológica simple con JavaScript puro

    Tutorial Intermediate

    En el tutorial de hoy, aprenderemos cómo crear una aplicación meteorológica simple pero totalmente funcional con JavaScript puro. Tenemos muchas cosas...

  9. Cómo conservar el estado del menú al cargar la página (usando almacenamiento local)

    Cómo conservar el estado del menú al cargar la página (usando almacenamiento local)

    Tutorial Intermediate

    En este tutorial, crearemos un sitio estático simple con Tailwind CSS y luego aprenderemos cómo conservar el estado de su menú al cargar la página.

  10. Crea una animación de carga de página en JavaScript con GSAP

    Crea una animación de carga de página en JavaScript con GSAP

    Tutorial Beginner

    En el tutorial de hoy, aprenderemos a crear una animación de carga de página con GSAP, una de las bibliotecas para animaciones con JavaScript más...

  11. Cómo crear una barra de progreso de lectura con CSS y JavaScript

    Cómo crear una barra de progreso de lectura con CSS y JavaScript

    Tutorial Intermediate

    Tal vez hayas observado algunos blogs que muestran un «indicador de progreso de lectura» (o barra de progreso) para que los lectores sepan qué cantidad de...

  12. Construir un panel de administración con CSS y un toque de JavaScript

    Construir un panel de administración con CSS y un toque de JavaScript

    Tutorial Intermediate

    En este tutorial de HTML, CSS y JavaScript veremos cómo codificar un panel de administración responsive. Para ello, tomaremos ideas del propio escritorio de...