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. Posicionamiento fijo solo con CSS

    Posicionamiento fijo solo con CSS

    Tutorial Intermediate

    Fijar elementos mediante posicionamiento Sticky, cuando el usuario se desplaza y alcanza determinado punto, se ha convertido en un patrón muy común en el...

  2. Una introducción a CSS-in-JS: Ejemplos, ventajas y desventajas

    Una introducción a CSS-in-JS: Ejemplos, ventajas y desventajas

    Tutorial Beginner

    Las librerías CSS-in-JS nos proporcionan un nuevo enfoque para escribir CSS. Su objetivo es abordar las limitaciones de CSS, como la falta de funcionalidad...

  3. Cómo hacer que el menú desplegable de la barra de navegación de Bootstrap funcione al situar el puntero (on hover)

    Cómo hacer que el menú desplegable de la barra de navegación de Bootstrap funcione al situar el puntero (on hover)

    Tutorial Beginner

    ¿Alguna vez has creado una barra de navegación de Bootstrap con menús desplegables? Si la respuesta es «sí», quizá hayas notado que los menús desplegables de...

  4. Cómo hacer un diagrama de Gantt con JavaScript y CSS

    Cómo hacer un diagrama de Gantt con JavaScript y CSS

    Tutorial Intermediate

    En nuestras series de tutoriales sobre CSS, hemos aprendido a crear varios tipos de gráficos. Hoy aprenderemos cómo hacer un diagrama de Gantt con JavaScript.

  5. Consejo rápido: Cómo personalizar el componente de acordeón de Bootstrap 4

    Consejo rápido: Cómo personalizar el componente de acordeón de Bootstrap 4

    Tutorial Intermediate

    En este consejo rápido, crearemos un acordeón en Bootstrap 4, lo ajustaremos con algunos cambios de CSS y aplicaremos algunas personalizaciones de...

  6. Un rápido efecto de flotador en pantalla completa con CSS y JavaScript

    Un rápido efecto de flotador en pantalla completa con CSS y JavaScript

    Tutorial Beginner

    En el tutorial rápido de hoy, aprenderemos cómo crear un útil efecto de fondo de pantalla completa.

  7. Crea un menú responsivo avanzado inspirado en Netflix

    Crea un menú responsivo avanzado inspirado en Netflix

    Tutorial Intermediate

    El otro día visité el sitio web de Netflix Jobs desde mi teléfono y vi su menú fuera del lienzo (off-canvas). Realmente me gustaron las impresionantes ...

  8. Cómo crear un modal emergente con JavaScript desde cero

    Cómo crear un modal emergente con JavaScript desde cero

    Tutorial Intermediate

    En este tutorial aprenderemos a crear modales emergentes con JavaScript (ventanas de diálogo) sin utilizar un framework de trabajo como Bootstrap, o una...

  9. Cómo crear el gráfico animado de un termómetro con CSS

    Cómo crear el gráfico animado de un termómetro con CSS

    Tutorial Intermediate

    Hasta el momento, en nuestra serie de tutoriales de gráficos con CSS, te he enseñado a crear un gráfico de columnas, un gráfico de barras y un gráfico...

  10. Crea un portafolio estático con un gráfico de barras avanzado en CSS

    Crea un portafolio estático con un gráfico de barras avanzado en CSS

    Tutorial Intermediate

    En una publicación previa, te enseñé cómo crear una hermosa página de portafolio a pantalla completa. Durante ese tutorial, también aprendimos a crear un...

  11. Consejo rápido: diseño de contenido restringido para editores en línea

    Consejo rápido: diseño de contenido restringido para editores en línea

    Tutorial Beginner

    Muchos periódicos populares en línea (por ejemplo, The Wall Street Journal, Le Figaro, The Telegraph) ofrecen contenido gratuito, pero requieren que los...

  12. Cómo construir un diseño con miniaturas filtrables usando CSS Grid, Flexbox y JavaScript

    Cómo construir un diseño con miniaturas filtrables usando CSS Grid, Flexbox y JavaScript

    Tutorial Intermediate

    En este tutorial, vamos a tomar un montón de fotos y las convertiremos en un diseño de miniatura filtrable. ¡Combinaremos todas las últimas cosas CSS (CSS...