easybank landing page

Mentor de front -end - Página de pouso do Easybank

Bem-vindo!

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

Os desafios do mentor do front -end ajudam a melhorar suas habilidades de codificação, construindo projetos realistas.

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

O desafio

Seu desafio é construir esta página de destino 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 site, dependendo do tamanho da tela do dispositivo
• Veja os Estados do Hover para todos os elementos interativos na página

Quer algum apoio no desafio? Junte -se à nossa comunidade 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.

Os projetos estão em formato estático JPG. O uso de JPGs significa que você precisará usar seu melhor julgamento para estilos como font-size , padding e margin .

Se você deseja que os arquivos de design (forneçamos 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. A criação de um repositório facilitará o compartilhamento de seu código com a comunidade, se você precisar de ajuda. Se você não tiver certeza de como fazer isso, faça uma leitura deste 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 poderá compartilhar o URL do seu projeto com o seu URL de repo. Existem várias maneiras de fazer isso e fornecemos algumas recomendações 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 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 muitas maneiras de hospedar seu projeto gratuitamente. Nossos anfitriões recomendados são:

• Páginas do Github
• Vercel
• Netlify

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

Crie um README.md personalizado

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

O modelo fornece um guia para o que adicionar. Um README personalizado ajudará você a explicar seu projeto e refletir sobre seus aprendizados. Sinta -se à 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 o resto da comunidade ver. Siga nosso "Guia completo para enviar soluções" para obter dicas sobre como fazer isso.

Lembre -se, se você estiver procurando feedback sobre sua solução, faça perguntas ao enviá -lo. Quanto mais específico e detalhado você estiver com suas perguntas, maior a chance de você receber um feedback valioso da comunidade.

Compartilhando sua solução

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

1. Compartilhe sua página de solução no canal #acabado-projetos da comunidade.
2. Tweet @frondendmentor e mencione @frontendmentor , incluindo o repo e os URLs vivos no tweet. Gostaríamos muito de 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. Blog sobre sua experiência em criar seu projeto. Escrever sobre seu fluxo de trabalho, escolhas técnicas e conversar com 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. Por favor, edite -os e inclua perguntas específicas quando estiver procurando feedback.

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

Tem feedback para nós?

Adoramos receber feedback! Estamos sempre procurando melhorar nossos desafios e nossa plataforma. Então, se você tiver alguma coisa que gostaria de mencionar, 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!