GitHub - meendoo/itelios-frontend-challenge: Desafio de admissão para desenvolvedores front-end da Itelios
meendoo/itelios-frontend-challenge forked from iteliosbrasil/itelios-frontend-challenge
Desafio de admissão para desenvolvedores front-end da Itelios http://www.itelios.com.br
Pull request Compare This branch is 11 commits ahead of iteliosbrasil:master.
desafio-front-end-itelios.jpg
desafio-front-end-itelios.psd
Itelios Front End Challenge - Helder Santos
Olá galera da Itelios! Gostei bastante da proposta de desafio, que é um teste bem próximo da realidade do front-end, diferente dos praticados por plataformas como Codility, que realizam um tipo de avaliação que eu não sou muito fã. São plataformas importantes para nivelar os conhecimentos, porém possuem seus contras no âmbito do front-end.
Bom, optei por um approach simples na resolução do problema:
Construção do esqueleto básico com HTML + CSS
Consumir JSON via XMLHttpRequest
Popular listagem com template dos produtos pré-construido no HTML
Utilizar carrossel do Slick (https://github.com/kenwheeler/slick/) para recomendações, caso não seja possível implementar um próprio
A fluidez do layout poderia ter sido melhorada. Os cards estão com um width semi-fixo, causando desbalanço na apresentação
Não produzi um carrossel próprio
Há imagens com link quebrado
O tempo total de execução ultrapassou um pouco as 8h estipuladas como ideal
Simples, só abrir o index.html no diretório /src.
Para acompanhar mudanças e recompilar o Sass, executar npm run watch-sass no diretório /src. Caso não tenha o cli do sass instalado, rode sudo gem install sass.
Itelios Frontend Challenge
Bem-vindo ao desafio de admissão de front-end da Itelios! O que preparamos para este desafio é um pedacinho do que você irá fazer aqui na Itelios, caso seja admitido.
O objetivo do desafio é simples: Consumir uma json via xhttp e, com o resultado dele, montar um widget de prateleira de cross-sell. Na resposta deste request você receberá uma lista de produtos. Esta lista servirá para montar um pequeno carrossel de produtos.
A prateleira apresentada deve seguir o seguinte design
Baseado neste layout, faça uma adaptação responsiva para celulares.
Faça um fork deste repositório em seu GitHub
Adicione ao Readme uma descrição de como executar seu projeto
Descreva as funcionalidades do seu desafio, venda seu peixe! Por exemplo, se fez a prateleira com javascript puro, porém utilizou uma biblioteca para o carrossel, deixe isso no Readme. Se usou ES6 com um transpiler, conte isso pra gente.
Não há um limite de tempo, porém consideramos ideal não gastar mais que 8h neste desafio
Faça commits parciais, para que possamos acompanhar o seu desenvolvimento.
Em caso de dúvidas, entre em contato com flora.braz@itelios.com
O ícone do botão é o add-shopping-plus, do Material Design. https://material.io/icons/
A fontes utilizadas são Roboto Condensed Bold (títulos), Roboto Regular (texto corrido) e Roboto Bold (preço e preço parcelado).
We <3 Vanilla Javascript. Tente executar este teste usando javascript puro. Só utilize bibliotecas como último recurso.
We <3 CSS responsivo, organizado, modular e feito com pré-processadores. Sinta-se livre para usar a arquitetura CSS que achar mais adequada.
Trabalhamos com clientes perfeccionistas, portanto tenha atenção com espaçamentos, tamanhos e estilos de fonte.