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. Como Construir um Efeito Hover Sublinhado com Desclocamento com CSS e JavaScript

    Como Construir um Efeito Hover Sublinhado com Desclocamento com CSS e JavaScript

    Tutorial Intermediate

    No tutorial de hoje, vamos usar um pouco de CSS e JavaScript para criar um efeito sofisticado de menu hover. Não é um resultado final complicado, mas...

  2. Como Construir uma Galeria de Imagens Responsiva com slick.js

    Como Construir uma Galeria de Imagens Responsiva com slick.js

    Tutorial Intermediate

    Nesse tutorial nós vamos utilizar o slick.js, um plugin jQuery para construir galerias de imagem responsivas. Aqui está a galeria que nós vamos criar:

  3. Criando um Vídeo "Fixo" e Flutuante ao Rolar a Página

    Criando um Vídeo "Fixo" e Flutuante ao Rolar a Página

    Tutorial Intermediate

    Se já navegou em sites de mídia recentemente–sites de transmissão de vídeos, de notícias, Facebook, etc–talvez tenha notado uma tendência em relação aos...

  4. Remova CSS Desnecessário com PurifyCSS e Grunt

    Remova CSS Desnecessário com PurifyCSS e Grunt

    Tutorial Intermediate

    Nesse tutorial, mostraremos como usar o Grunt e o PurifyCSS para criar uma folha de estilo bem leve e sem esforço. Veremos como instalar e aprenderemos a...

  5. Como "Carregar sob Demanda" Vídeos Embutidos do YouTube

    Como "Carregar sob Demanda" Vídeos Embutidos do YouTube

    Tutorial Intermediate

    Hoje, explicaremos como "carregar sob demanda" vários videos embutidos do YouTube. Fazer isso aprimorará a performance do carregamento inicial da sua página,...

  6. Popups e Modals nativos com o elemento "dialog" do HTML5

    Popups e Modals nativos com o elemento "dialog" do HTML5

    Tutorial Intermediate

    Muitos processos na web hoje em dia requerem o consentimento do usuário para para então continuar. Por exemplo, os usuários podem precisar remover uma conta,...

  7. Dica rápida: utilizando o atributo "download" do HTML5

    Dica rápida: utilizando o atributo "download" do HTML5

    Tutorial Beginner

    Criar um link utilizando HTML é super fácil; basta adicionar uma tag âncora e apontar um endereço para o atributo href. Porém, alguns tipos de arquivos (como...

  8. Como Adicionar Pontos Customizados no Google Maps

    Como Adicionar Pontos Customizados no Google Maps

    Tutorial Intermediate

    Neste tutorial vamos analisar o processo de criação de pontos customizados para uma marca imaginária, no Google Maps. Nosso mapa vai contar com três pontos...

  9. Criando um dashboard dinâmico com o ChartJS

    Criando um dashboard dinâmico com o ChartJS

    Tutorial Intermediate

    Hoje vamos criar um dashboard com gráficos dinâmicos utilizando a solução ChartJS. ChartJS é uma poderosa biblioteca JavaScript, sem dependências, que...

  10. Tudo que você precisa saber sobre o atributo Data do HTML5

    Tudo que você precisa saber sobre o atributo Data do HTML5

    Tutorial Intermediate

    O atributo data do HTML5 permite que você permite aplicar informações customizadas ao elementos no dom. Neste artigo vamos dar uma olhada neste atributo e...

  11. Criar um Player de Áudio personalizado

    Criar um Player de Áudio personalizado

    Tutorial Intermediate

    Durante este tutorial vou introduzir-vos ao áudio em HTML5 e mostrar como podem criar o vosso próprio player.