Teste Técnico Frontend

Vagas.com

Javascript, CSS, HTML

São Paulo - Brasil

RH

1.000 - 5.000

/vagascom
/VAGAScom
vagas.com.br

A vagas.com.br é líder no segmento de tecnologia para e-recruitment no Brasil.

Sobre o Teste

Para o desafio técnico do Desafio Front-end, as tecnologias que deverão ser utilizadas são HTML, CSS e Javascript. O objetivo é realizar diversas tarefas relacionadas ao desenvolvimento front-end, como aperfeiçoar a semântica e acessibilidade do HTML, implementar um componente de contador funcional e, opcionalmente, adicionar validações de formulário. O layout do desafio foi disponibilizado no Zeplin e Figma para consulta. O código inicial está disponível em um sandbox, mas o candidato é livre para copiar o conteúdo para outro ambiente e utilizar as dependências que achar necessário.

Instruções do Teste

Link para o teste técnico original

Baixar Arquivos do Teste Técnico

Desafio Front-end

No nosso dia-a-dia, temos alguns desafios, como desenvolver componentes, aplicações, lidar com prazos e etc. Mas sabe o que é um desafio de verdade? Manter um código bom mesmo com situações corriqueiras 💩.

Desenvolvemos esse teste que simula situações descritas acima. E tem com o objetivo aferir conhecimentos diversos do universo de front-end: HTML, CSS, Javascript, semântica, acessibilidade, componentização…

📙 Importante ressaltar que esse teste é qualitativo e não quantitativo, vamos levar em consideração a qualidade do código e não o número de etapas concluídas.

Ele foi separado em etapas, então, sinta-se a vontade para fazer até onde der.

Layout

Participamos da elaboração do Layout com UX e UI. Note que foram criados todos os cenários possíveis para essa aplicação, mas foque nas demandas solicitadas 😘.

Eles disponibilizaram os layouts aqui:

ZEPLIN (apenas para consulta):

Aqui

FIGMA (para visualizar propriedades de css):

Aqui

📙 Caso você utilize o Figma, terá acesso a uma ferramenta muito boa para consumir o layout, com acesso ao CSS, imagens e métricas. Basta criar a sua conta e utilizar.

Código

Você deve utilizar esse código, ~que tá uma beleza~, para iniciar o seu teste, mas fique livre para copiar o conteúdo para outro sandbox e utilizar as dependências que achar melhor.

📙 Vamos avaliar seu JavaScript, HTML e CSS independentemente das bibliotecas que você utilizar.

Aqui

Primeira parte: colocando ordem na casa.

  • Precisamos deixar o HTML semântico, use as tags HTML que correspondem corretamente aos cenários aplicados.
  • Fique a vontade para mudar a estrutura caso ache necessário, mas precisa ser fiel ao layout.
  • Na tag <html>, está faltando um parâmetro que é obrigatório. Você consegue identificar e aplicar?

Segunda parte: tornando a casa acessível.

  • Vixe!😱 Parece que o HTML não está totalmente acessível. Você consegue melhorar a acessibilidade?

Terceira parte: o contador de stickers.

  • Precisamos fazer o componente de contador funcionar para que o usuário possa definir a quantidade de stickers que deseja comprar.

Bonus: Vamos validar o formulário?!

Validações de formulário ajudam o usuário a não se perder durante o preenchimento das informações necessárias. Ajude nessa causa 🙃.

Eles podem te auxiliar no desenvolvimento do teste:

Pronto, e agora?

  • Envie o link do sandbox para [email protected]
  • Coloque no assunto do email: "Front-end Developer VAGAS.com - seu nome aqui"
  • No corpo do email, informe em qual nível de senioridade você se considera
  • Se possível, deixe alguns de seus contatos como Linkedin e telefones
  • Se tiver, deixe o link para seu GitHub ou links diretos para projetos que queira mostrar
  • Antes de enviar, verifique se o link do sandbox é o correto e se tudo está funcionando corretamente
  • E em breve, retornaremos com mais detalhes :heart: