Giter Club home page Giter Club logo

desafio-front-end's Introduction

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 🙃.


Links importantes

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"
  • Se possível deixe alguns de seus contatos como Linkedin e telefones
  • Antes de enviar verifique se o link do sandbox é o correto e se tudo esta funcionando corretamente
  • E em breve retornaremos com mais detalhes 💙

desafio-front-end's People

Contributors

danielgalvao avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.