Desafio encontrado na internet para consolidar conhecimentos e técnicas para desenvolvimento Web Link original: https://github.com/bennutv/desafio-frontend
Esse teste foi criado para avaliarmos seus conhecimentos gerais como desenvolvedor Front-end: HTML, CSS, Javascript, design responsivo e lógica. O desafio consiste em desenvolver a Home de um app fictício, seguindo o layout do psd disponibilizado, utilizando algumas funcionalidades e interações em Javascript.
- Seguir à risca o layout em psd: espaçamentos, cores, tipografia etc.
- Preocupe-se em desenvolver o CSS utilizando mobile first, porém, não se esqueça que o CSS deve ser responsivo e respeitar os seguintes breakpoints:
| Nome do breakpoint | Largura mínima |
|---|---|
| Phone | 320px |
| Tablet | 768px |
| Desktop | 1024px |
- Você está livre para escolher a estrutura de diretórios da aplicação;
- Poderá utilizar qualquer linguagem de preprocessador CSS ou CSS puro, além de poder utilizar bibliotecas de CSS como Compass, Bourbon, Animatecss, entre outras;
- Pode utilizar um task runner de sua preferência, e se quiser, utilizar componentes do bower;
- A lista de posts deve ser gerada a partir do JSON (bennu.json) ;
- A navegação entre as abas (tabs logo abaixo do header) deverá conter efeito em javascript. No scroll, as abas devem sumir, somente o header permanecerá fixo;
- O loader deverá surgir a partir do 4º post, enquanto o restante é carregado;
- É importante não esquecer de incluir algum efeito/animação no evento de hover dos links que estão nas abas, ao topo da página, no post e no estado ativo do ícone de favorito (escolha o efeito que preferir );
- Não altere o arquivo bennu.json
- Respeite os breakpoints informados acima;
- Não deixe realizar o commit também dos arquivos não minificados;
- Lembre-se de escrever um arquivo README.md com as instruções para rodar o seu projeto;
- O código deverá ser responsivo e multiplataforma, compatível com IE10+, Chrome, Safari e Firefox.
- Extra-points: Qualquer inclusão de funcionalidade é bem vinda, sinta-se livre para aplicar alguma interação a mais ;)