todo app frontend mentor

Mentor de front -end - TODO App

Bem-vindo!

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

Os desafios do mentor de front-end permitem melhorar suas habilidades em um fluxo de trabalho da vida real.

Para fazer esse desafio, você precisa de um bom entendimento de HTML, CSS e JavaScript.

O desafio

Seu desafio é criar esse aplicativo TODO e fazer com que pareça o mais próximo possível do design.

Você pode usar todas as ferramentas que deseja ajudá -lo a concluir o desafio. Então, se você tiver algo que gostaria de praticar, fique à vontade para tentar.

Seus usuários devem poder:

• Veja o layout ideal para o aplicativo, dependendo do tamanho da tela do dispositivo
• Veja os Estados do Hover para todos os elementos interativos na página
• Adicione novos Todos à lista
• Marque Todos como completo
• Exclua Todos da lista
• Filtre por todos/TODOS ativo/completo
• Limpar todos os Todos concluídos
• Alternar o modo claro e escuro
• Bônus : arraste e solte para reordenar itens na lista

Quer algum apoio no desafio? Junte -se à nossa comunidade Slack e faça perguntas no canal #HELP .

Onde encontrar tudo

Sua tarefa é criar o projeto para os projetos dentro da pasta /design . Você encontrará uma versão móvel e uma área de trabalho do design para trabalhar.

Os projetos estão em formato estático JPG. Isso significa que você precisará usar seu melhor julgamento para estilos como font-size , padding e margin . Isso deve ajudar a treinar seus olhos para perceber diferenças nos espaçamentos e tamanhos.

Se você deseja os arquivos de design (fornecemos versões Sketch & Figma) para inspecionar o design com mais detalhes, você pode se inscrever como um 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 .

Construindo seu projeto

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

1. Inicialize seu projeto como um repositório público no GitHub. Isso 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 esse recurso Try Git.
2. Configure seu repositório para publicar seu código em um URL. Isso também será útil se você precisar de ajuda durante um desafio, pois poderá compartilhar o URL do seu projeto com o seu URL de repo. Existem várias maneiras de fazer isso, mas recomendamos o uso de vercel. Temos mais informações sobre a implantação do seu projeto com a Vercel abaixo.
3. Veja os designs para começar a planejar como você abordará o projeto. Esta etapa é crucial para ajudá -lo a pensar no futuro para as aulas CSS que você pode criar para criar estilos reutilizáveis.
4. Antes de adicionar estilos, 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 base 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 resolva. Apenas passe para a próxima seção quando estiver feliz por concluir a área em que está trabalhando.

Implantando seu projeto

Como mencionado acima, existem várias maneiras de hospedar seu projeto gratuitamente. Recomendamos usar o Vercel, pois é um serviço incrível e extremamente simples de se preparar. Se você quiser usar o Vercel, aqui estão algumas etapas a seguir para começar:

1. Inscreva -se no Vercel e passe pelo fluxo de integração, garantindo que sua conta do GitHub esteja conectada usando o vercel para integração do GitHub.
2. Conecte seu projeto ao vercel da página "Importar Projeto", usando o botão "do repositório do Git" e selecionando o projeto que você deseja implantar.
3. Uma vez conectado, toda vez que você git push , o Vercel criará uma nova implantação e o URL da implantação será exibido no seu painel. Você também receberá um email para cada implantação com o URL.

Compartilhando sua solução

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

1. Envie -o na plataforma para que outros usuários vejam sua solução no site. Aqui está o nosso "Guia completo para enviar soluções" para ajudá -lo a fazer isso.
2. Compartilhe sua página de solução no canal #acabado-projetos da comunidade Slack.
3. Tweet @frondendmentor e mencione @Frontendmentor , incluindo o repo e os URLs ao vivo no tweet. Gostaríamos muito de dar uma olhada no que você construiu e ajudar a compartilhá -lo.

Dando feedback

O feedback é sempre bem -vindo, por isso, se você tiver algum para dar esse desafio, envie um e -mail para o Hi [AT] Frontendmentor [DOT] IO.

Esse desafio é totalmente gratuito. Compartilhe -o com qualquer pessoa que o ache útil para a prática.

Divirta -se prédio!

Patrocinadores da comunidade

Um enorme obrigado aos nossos patrocinadores da comunidade!

• Zero to mastery é um recurso de aprendizado incrível para todas as coisas do desenvolvimento da web. Liderados por Andrei Neagoie, os cursos são realmente conteúdo de alta qualidade e cobrem uma ampla gama de habilidades sob demanda.
• A Tech Diversify é um recurso incrível para pessoas sub -representadas em tecnologia. O site apresenta listagens de empregos para quem procura novas oportunidades. A seção de recursos também está cheia de links úteis para mergulhar!
• O Triplebyte é uma oferta muito boa se você estiver procurando um novo papel. É um serviço gratuito que permite fazer um teste confidencial. Com base em seus resultados, as empresas o lançarão para suas funções vagas!