Todos

Mini Projetos

Resolução do Mini Projeto

Input de cartão de crédito

Login

Introdução

  • Introdução
  • Requisitos do Projeto
  • Iniciando o Projeto e limpando os arquivos
  • HTML

  • Criando a estrutura do HTML
  • CSS

  • CSS: Criando o Layout
  • CSS: Estilizando o Cartão
  • CSS: Estilizando o Formulário
  • JS e Interatividade

  • JS: Acessando os elementos HTML
  • JS: Formatando o número do cartão
  • JS: Transpondo outros campos para o cartão
  • JS: Aceitando apenas dígitos numéricos
  • Criando o verso do cartão
  • Fazendo o verso aparecer automaticamente
  • Animando a rotação do cartão
  • Responsividade para Mobile
  • Introdução

  • Introdução
  • Requisitos do Projeto
  • Iniciando o Projeto e limpando os arquivos
  • HTML

  • Criando a estrutura do HTML
  • CSS

  • CSS: Criando o Layout
  • CSS: Estilizando o Cartão
  • CSS: Estilizando o Formulário
  • JS e Interatividade

  • JS: Acessando os elementos HTML
  • JS: Formatando o número do cartão
  • JS: Transpondo outros campos para o cartão
  • JS: Aceitando apenas dígitos numéricos
  • Criando o verso do cartão
  • Fazendo o verso aparecer automaticamente
  • Animando a rotação do cartão
  • Responsividade para Mobile
  • Iniciando o Projeto e limpando os arquivos

    Seguimos a construção inicial de um projeto Vite para criar um formulário de cartão de crédito reativo. Iniciamos configurando o ambiente de desenvolvimento, clonando o projeto no Visual Studio Code e configurando o Vite com JavaScript puro. Ajustamos arquivos desnecessários, preparando o projeto para a próxima etapa, que é traduzir a estrutura do design para HTML.

    Comentários

    (0)