Teste Técnico Frontend

Umbler

Javascript, CSS, HTML

Gravataí - Brasil

Hospedagem

10 - 50

/umbler
/umbler-team
umbler.com

Somos uma empresa de hospedagem em nuvem focada principalmente em facilitar a vida dos desenvolvedores

Sobre o Teste

Para o desafio técnico do Teste para desenvolvedor front-end da Climatempo, você precisará codificar um layout fornecido no formato PSD ou PNG utilizando as melhores práticas. Você pode utilizar pré-processadores CSS, como Sass, ou CSS puro, além de frameworks front-end como o Bootstrap. É permitido o uso de bibliotecas CSS ou JS, como jQuery, mas é importante considerar o desempenho. Espera-se que você se atenha aos detalhes do layout, escreva um código de qualidade com boas práticas de semântica, organização e legibilidade, priorize a performance da página, desenvolva-o de forma responsiva e forneça suporte aos navegadores IE10+, Chrome, Safari e Firefox. A avaliação será baseada na qualidade do código, organização dos arquivos e na solução proposta.

Instruções do Teste

Link para o teste técnico original

Baixar Arquivos do Teste Técnico

Teste para desenvolvedor front-end

O objetivo deste teste é nos permitir avaliar seu conhecimento técnico e analisarmos se você se encaixa no perfil que estamos procurando. O teste para a vaga de front-end consiste em codificar o layout abaixo da melhor forma possível.

Layout:

Layout

Você pode...

  • Utilizar qualquer pré-processador CSS (preferência por Sass) ou CSS puro;
  • Utilizar npm, webpack, bower ou similares;
  • Utilizar algum framework front-end (preferência por Bootstrap);
  • Utilizar alguma biblioteca CSS ou JS (jQuery), mas lembre-se da performance;

Esperamos que você...

  • Se atenha aos detalhes, deixando o layout mais fiel possível;
  • Escreva um código com qualidade, priorizando as boas práticas quanto a semântica, organização e a legibilidade;
  • Utilize as técnicas necessárias para que a peformance da página seja satisfatória;
  • Utilize algum task runner (preferência por Grunt) com algumas tarefas básicas;
  • Desenvolva-o de modo responsivo (nem preciso dizer, né?! :p)
  • Crie um README com as instruções de como rodar o projeto e qualquer outra informação relevante;
  • Dê suporte a IE10+, Chrome, Safari e Firefox.

Também solicitamos que nos envie um pequeno resumo do você acha que poderia ser melhorado em questões de design do layout. Qualquer informação é bem vinda :)

Instruções

  • As informações referentes ao comportamento da página estão informadas nesta imagem.

Como será avaliado?

Seu projeto será avaliado por nós de acordo com a qualidade do código enviado, organização dos arquivos e, claro, de toda a solução proposta por você. Valorizamos muito a criatividade e a usabilidade das soluções criadas pelos profissionais, então tenha isso em mente. Nos surpreenda! ;)

Entrega

  1. Faça um "fork" deste projeto para sua conta no Github;
  2. Implemente o projeto em seu próprio fork;
  3. Conclua e suba os arquivos para o seu repositório no Github;
  4. Envie um e-mail para [email protected] e nos informe a url do seu fork.

Um até logo e boa sorte!