Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 9 months ago

Página inicial do Easybank

sass/scss
DevDiiasTr•120
@DevDiiasTr
A solution to the Digital bank landing page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

Eu me orgulho muito do design responsivo do meu projeto, especialmente de como ele se adapta bem em diferentes tamanhos de tela, incluindo dispositivos móveis como o iPhone 8. Ao trabalhar no layout, me concentrei em garantir que a experiência do usuário fosse a mesma, independentemente do dispositivo. O que mais me deixou satisfeito foi o resultado final da navegação, que ficou fluída, com um menu que se adapta conforme o tamanho da tela e que é intuitivo tanto na versão desktop quanto na versão móvel.

Na próxima vez, faria um trabalho mais cuidadoso na organização e simplificação de meu código CSS, focando em tornar a manutenção e os ajustes futuros mais fáceis. Percebi que, embora o design esteja bom, o código poderia ser mais eficiente em algumas áreas. Também ajustaria algumas interações, como o menu, para garantir que todas as transições e animações funcionem perfeitamente em todas as resoluções, evitando bugs como os que encontrei durante o processo.

What challenges did you encounter, and how did you overcome them?

Um dos maiores desafios que enfrentei foi garantir que o design fosse realmente responsivo e funcionasse bem em diferentes dispositivos, como desktops, tablets e celulares. Especificamente, o ajuste do menu foi complicado. Inicialmente, o menu desktop ainda aparecia em telas pequenas, o que causava problemas de usabilidade. Para superar isso, precisei revisar cuidadosamente os media queries e garantir que os menus de diferentes resoluções fossem controlados corretamente, com uma atenção extra às transições e ao comportamento dinâmico do menu em telas menores.

Além disso, outro desafio foi garantir que as imagens se ajustassem de forma consistente e bem alinhada em todas as resoluções. Isso exigiu ajustes nas dimensões das imagens e a aplicação de algumas técnicas de flexbox e grid, para que os elementos ficassem bem posicionados, sem perder a qualidade ou a estética.

Ao longo do processo, também precisei testar constantemente em diferentes dispositivos e navegadores, o que ajudou a identificar e corrigir problemas específicos, como elementos desalinhados ou com tamanhos inadequados. A prática constante de testes me ajudou a superar esses obstáculos e alcançar um design mais robusto e funcional.

What specific areas of your project would you like help with?

Eu gostaria de receber ajuda na otimização do desempenho do meu projeto, especialmente em relação ao tempo de carregamento. Embora o design esteja funcionando bem e seja responsivo, sinto que há espaço para melhorar o tempo de resposta, especialmente em dispositivos mais lentos ou em conexões de internet mais lentas. Talvez seja necessário revisar o uso de imagens e outros recursos para garantir que o carregamento seja mais eficiente.

Outra área em que gostaria de ajuda é no aprimoramento da acessibilidade. Embora eu tenha tentado seguir as boas práticas para garantir que o site seja acessível a diferentes tipos de usuários, sei que sempre há espaço para melhorias, como o uso adequado de contrastes, navegação por teclado e leitores de tela.

Também gostaria de aperfeiçoar a interação do usuário com animações e transições, para garantir que elas sejam suaves e não prejudiquem a experiência do usuário. Preciso de ajuda para identificar as melhores práticas e ferramentas para alcançar isso sem comprometer o desempenho.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on DevDiiasTr's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License