Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update README.md #38

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Update README.md #38

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
81588ad
Update README.md
GustavoDahm May 19, 2021
d8a970f
Update README.md
GustavoDahm May 24, 2021
4f4f0c3
Update README.md
GustavoDahm May 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 23 additions & 9 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,36 @@
# Frontend challenge júnior

Teste para a vaga de front end júnior
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](https://drive.google.com/file/d/10xpr_7qaEXNBT4v2dOKqanS4_tOcgEJs/view)
- Paleta de cores: https://coolors.co/ffffff-f6f6f6-f5e5d9-272727-000000
- Você pode gerar uma paleta de cores que te agrade nesse site (https://coolors.co). Clique em "Start the generator".
- Fontes: [Playfair Display](https://fonts.google.com/specimen/Playfair+Display) e [PT Sans](https://fonts.google.com/specimen/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](https://picsum.photos/) e o [placeholder](https://placeholder.com/)
- No banner com slider, usar o [swiper](http://idangero.us/swiper/)
- 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.
- Você tem total liberdade para criar efeitos nas sessões do site, explore o artista dentro de você hehehe;
- Para as imagens, pode ser usado geradores de imagens por dimensão, como o [picsum](https://picsum.photos/) e o [placeholder](https://placeholder.com/), ou se preferir você pode adicionar imagens de sua escolha.
- No fullbanner com slider, usar o [swiper](http://idangero.us/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 (como bootstrap), para que possamos avaliar melhor a sua qualidade técnica;
- 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;

**Obs 1: Caso tenha dificuldade para compilar o sass e gulp, codifique o teste como preferir, o importante é o teste ser feito**
Dicas

**Obs 2: Caso não consiga terminar todo o layout no prazo, mande o que conseguiu fazer, o importante é entregar algo para ser avaliado**
- 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!