Pontos importantes antes de iniciar
- Sinalizar por e-mail para a pessoa que está fazendo o seu recrutamento a data de ínicio e a expectativa de entrega;
- O prazo médio de entrega do teste é de 7 dias mas caso você tenha algum imprevisto sinalize o novo prazo e o motivo;
- Pra gente é mais importante você desenvolver algumas das skills solicitadas ou passar um tempo mais demonstrando suas habilidades do que entregar algo incompleto ou que não atenda todos os requisitos do teste.
Teste para a vaga de Frontend Júnior
- Codificar layout seguindo o wireframe
- Você pode gerar uma paleta de cores que te agrade nesse site (https://coolors.co). Clique em "Start the generator".
- Fontes: Playfair Display e PT Sans
- O wireframe representa o layout macro do site, você tem liberdade para escolher os espaçamentos, tamanho de fontes, uso das cores, efeitos e outros detalhes.
- Para as imagens, pode ser usado geradores de imagens por dimensão, como o picsum e o placeholder, ou se preferir você pode adicionar imagens de sua escolha.
- No fullbanner com slider, usar o swiper, mas utilizar o swiper de forma inteligente em outras seções contam pontos.
- Deve ser feito o responsivo, mantendo as mesmas sessões do desktop. Você tem liberdade para decidir os pontos de quebra e o estilo das sessões no mobile, mas é importante que o site se adapte e fique legível.
- Você tem total liberdade para criar efeitos nas sessões do site, explore o artista dentro de você;
- O envio deve ser feito através dos arquivos zipados ou no github (pode ser feito pull request para esse repositório);
- Deve ser utilizado sass e gulp para o pré-processamento do código;
- Entregar uma pasta com os arquivos de desenvolvimento e outra pasta com os arquivos minificados e comprimidos (src/dist); -- Na pasta src ficam os arquivos de desenvolvimento. -- Na pasta dist ficam os arquivos finais (comprimidos e minificados).
- Não deve ser usado nenhum framework de css (Bootstrap entre outros) nem de js (React, Vue, Angular entre outros), para que possamos avaliar melhor a sua qualidade técnica;
Dicas
-
Navegue pelo site da https://www.vnda.com.br/ e visite também o site de nossos clientes;
-
Capriche, demonstre suas habilidades CSS, brinque com os efeitos, utilize em todas as seções e seja detalhista. Queremos saber seu repertório;
-
Utilizar um padrão de código como o RSCSS conta muitos pontos;
-
Tente dar sua cara pro projeto, imagine uma marca fictícia ou não, dê uma identidade visual pra ela;
-
Tente utilizar o JS além do Swiper e Menu Mobile, veja algumas seções em que você possa inserir algumas funções. Não precisa ser nada complexo;
-
Plugins JS são bem vindos contanto que sejam utilizados de forma inteligente;
-
Ainda não tem dominada algumas das skills? Foque primeiro no que você sabe. Vá o mais longe possível e utilize o tempo restante pra aprender o que não sabe, afinal essas habilidades serão utilizadas na sua rotina de trabalho;
-
Passe seu café e acredite no seu potencial!