Teste Front-End DOK Despachante

A ideia deste teste é ajudar a avaliar melhor as suas habilidades para a vaga de desenvolvedor, em vários níveis de experiência.

Este teste deve ser feito por você sozinho, no seu próprio tempo. Demore o tempo que for necessário, mas geralmente esse teste não deve levar mais do que algumas horas para ser feito.

Instruções de entrega

Baixe esse repositório em .zip (não clone) que contém os assets necessários para o teste, inicialize um novo repositório em seu Github, vá adicionando os commits quando achar necessário e quando terminado envie o link do repositório para o responsável do teste que entrou em contato com você.

Descrição do projeto

Implementar uma página HTML responsiva baseada no design do Figma no link abaixo. O design e a usabilidade devem considerar ambos casos de uso desktop e mobile.

Link do design: Figma

Ponto bônus:

Se souber, atender as diferentes densidades de pixels (pixel-density) dos dispositivos mobile.

Implementação

Você deve entregar esse projeto como uma página estática HTML, com as imagens, CSS e arquivos JS que forem necessários. Você pode usar qualquer ferramenta de compilação que achar necessário (se houver), faça tudo a mão ou use alguma biblioteca ou framework que julgar necessário, Isso é com você.

Você deve usar o framework Bootstrap e preferencialmente Jquery para a validação, mas pode usar Javascript Vanilla.

Você só pode usar os padrões de linguagens e bibliotecas open-source, sem qualquer código adicional de terceiros.

Porém trate o código (HTML, CSS e JS) como nível de código para produção.

O formulário deve seguir essas condições:

  1. Validar se o nome é composto;
  2. Validar se o e-mail está formatado corretamente;
  3. Alertar o usuário em caso de campos inválidos;
  4. O submit deverá ser feito por ajax, fetch ou axios;
  5. Evitar submit duplicado;
  6. Preferencialmente feito com Jquery, mas podendo usar Javascript vanilla.

Seu projeto DEVE:

  1. Usar apenas linguagens e bibliotecas open-source;
  2. Ter estilos CSS e nomeclatura consistentes no seu código;
  3. Usar marcação semântica;
  4. Tirar máximo proveito do framework Bootstrap;
  5. Esteja atento ao desempenho.

Avaliação

O seu projeto vai ser avaliado pelos seguintes critérios:

  1. Você preencheu os requerimentos básicos do projeto?
  2. Você seguiu com precisão as especificações do projeto?
  3. Qualidade do código em si, como está estruturado e como cumpre as boas práticas modernas;
  4. Familiaridade com as bibliotecas padrão das linguagens utilizadas e outros pacotes;
  5. Organização;
  6. Familiaridade com git.

Vamos ler seu código, apreciar o resultado, olhar, testar. Invista o tempo necessário para fazer um desafio que demonstra o resumo das suas capacidades técnicas. Faça com carinho.

Obrigado e boa sorte!