time tracking dashboard

Mentor Frontend - Painel de controle de tempo

Bem-vindo!

Obrigado por conferir este desafio de codificação front-end.

Os desafios do Frontend Mentor ajudam você a melhorar suas habilidades de codificação através da construção de projetos realistas.

Para fazer este desafio, você precisa de um conhecimento básico de HTML, CSS e JavaScript.

O desafio

Seu desafio é construir este painel e fazê-lo parecer o mais próximo possível do design.

Você pode usar qualquer ferramenta que desejar para ajudá-lo a completar o desafio. Então, se você tem algo que gostaria de praticar, sinta-se à vontade para tentar.

Se você quiser praticar o trabalho com dados JSON, fornecemos um arquivo data.json local para as atividades. Isso significa que você poderá extrair os dados de lá em vez de usar o conteúdo do arquivo .html .

Seus usuários devem ser capazes de:

• Veja o layout ideal para o site dependendo do tamanho da tela do dispositivo
• Veja os estados de foco para todos os elementos interativos na página
• Alternar entre visualizar estatísticas diárias, semanais e mensais

Quer algum apoio no desafio? Junte-se à nossa comunidade e tire dúvidas no canal #help .

Comportamento esperado

• O texto do período anterior deve mudar com base no período ativo. Para Diariamente, deve ser "Ontem", por exemplo, "Ontem - 2 horas". Para Semanalmente, deve ser "Semana Última", por exemplo, "Semana Última - 32 horas". Para mensalmente, deve ser "Último Mês", por exemplo, "Último Mês - 19 horas".

Onde encontrar tudo

Sua tarefa é construir o projeto de acordo com os designs dentro da pasta /design . Você encontrará uma versão móvel e uma versão desktop do design.

Os designs estão em formato estático JPG. Usar JPGs significará que você precisará usar seu bom senso para estilos como font-size , padding e margin .

Se desejar que os arquivos de design (fornecemos versões Sketch e Figma) inspecionem o design com mais detalhes, você pode se inscrever como membro PRO.

Você encontrará todos os ativos necessários na pasta /images . Os ativos já estão otimizados.

Há também um arquivo style-guide.md contendo as informações necessárias, como paleta de cores e fontes.

Construindo seu projeto

Sinta-se à vontade para usar qualquer fluxo de trabalho com o qual se sinta confortável. Abaixo está um processo sugerido, mas não parece necessário seguir estas etapas:

1. Inicialize seu projeto como um repositório público no GitHub. A criação de um repositório tornará mais fácil compartilhar seu código com a comunidade se você precisar de ajuda. Se você não tiver certeza de como fazer isso, leia este recurso Try Git.
2. Configure seu repositório para publicar seu código em um endereço da web. Isso também será útil se você precisar de ajuda durante um desafio, pois você pode compartilhar o URL do seu projeto com o URL do seu repositório. Existem várias maneiras de fazer isso e fornecemos algumas recomendações abaixo.
3. Examine os designs para começar a planejar como você abordará o projeto. Esta etapa é crucial para ajudá-lo a pensar no futuro para que as classes CSS criem estilos reutilizáveis.
4. Antes de adicionar qualquer estilo, estruture seu conteúdo com HTML. Escrever seu HTML primeiro pode ajudar a concentrar sua atenção na criação de conteúdo bem estruturado.
5. Escreva os estilos básicos do seu projeto, incluindo estilos de conteúdo geral, como font-family e font-size .
6. Comece a adicionar estilos ao topo da página e vá descendo. Só passe para a próxima seção quando estiver satisfeito por ter concluído a área em que está trabalhando.

Implantando seu projeto

Conforme mencionado acima, há muitas maneiras de hospedar seu projeto gratuitamente. Nossos anfitriões recomendados são:

• Páginas do GitHub
• Vercel
• Netlificar

Você pode hospedar seu site usando uma dessas soluções ou qualquer um de nossos outros provedores confiáveis. Leia mais sobre nossos hosts recomendados e confiáveis.

Crie um README.md personalizado

Recomendamos fortemente substituir este README.md por um personalizado. Fornecemos um modelo dentro do arquivo README-template.md neste código inicial.

O modelo fornece um guia sobre o que adicionar. Um README personalizado irá ajudá-lo a explicar seu projeto e refletir sobre seus aprendizados. Fique à vontade para editar nosso modelo o quanto quiser.

Depois de adicionar suas informações ao modelo, exclua este arquivo e renomeie o arquivo README-template.md para README.md . Isso fará com que ele apareça como o arquivo README do seu repositório.

Enviando sua solução

Envie sua solução na plataforma para que o resto da comunidade veja. Siga nosso “Guia completo para envio de soluções” para dicas de como fazer isso.

Lembre-se: se você estiver procurando feedback sobre sua solução, faça perguntas ao enviá-la. Quanto mais específico e detalhado você for em suas perguntas, maiores serão as chances de obter feedback valioso da comunidade.

Compartilhando sua solução

Existem vários lugares onde você pode compartilhar sua solução:

1. Compartilhe a página da sua solução no canal #finished-projects da comunidade.
2. Tweete @frontendmentor e mencione @frontendmentor , incluindo o repositório e URLs ativos no tweet. Adoraríamos dar uma olhada no que você construiu e ajudar a compartilhá-lo.
3. Compartilhe sua solução em outros canais sociais como o LinkedIn.
4. Faça um blog sobre sua experiência na construção de seu projeto. Escrever sobre seu fluxo de trabalho, escolhas técnicas e falar sobre seu código é uma maneira brilhante de reforçar o que você aprendeu. Ótimas plataformas para escrever são dev.to, Hashnode e CodeNewbie.

Fornecemos modelos para ajudá-lo a compartilhar sua solução depois de enviá-la na plataforma. Edite-os e inclua perguntas específicas quando estiver procurando feedback.

Quanto mais específico você for em suas perguntas, maior será a probabilidade de outro membro da comunidade lhe dar feedback.

Tem feedback para nós?

Adoramos receber feedback! Estamos sempre buscando melhorar nossos desafios e nossa plataforma. Então, se você tiver algo que gostaria de mencionar, envie um e-mail para hi[at]frontendmentor[dot]io.

Este desafio é totalmente gratuito. Por favor, compartilhe-o com qualquer pessoa que achará útil para a prática.

Divirta-se construindo!