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):
FIGMA (para visualizar propriedades de css):
📙 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.
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
Links importantes
Eles podem te auxiliar no desenvolvimento do teste:
- https://developer.mozilla.org/pt-BR/docs/Web
- https://developer.mozilla.org/pt-BR/docs/Web/Accessibility/ARIA
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
❤️