Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive landing page with vite, react and tailwind css

Raza Abbas 790

@RazaAbbas62

Desktop design screenshot for the Easybank landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback is welcome :)

Community feedback

@petritnuredini

Posted

Great job on completing your Easybank landing page project! It's a significant step in your journey as a developer. Here are a few suggestions to enhance your code:

  1. Refactoring for Reusability and Efficiency:

    • Consider creating a reusable component for buttons. You have Button imported in several files. Make sure it's a generic component that can handle different texts, styles, and actions. This approach reduces code repetition and increases maintainability. Explore more about React component design patterns here.
  2. Accessibility Considerations:

    • Ensure all interactive elements, like buttons and links, have appropriate ARIA attributes for better accessibility. For example, adding role="button" to elements styled as buttons but not using the <button> tag. Learn more about accessibility in React here.
  3. Optimize Image Loading:

    • Use modern image formats like WebP for better performance. Also, consider implementing lazy loading for images. This can significantly improve your site's loading time, especially if there are many large images. You can learn more about image optimization here.

Keep up the hard work! Remember, each project is a learning opportunity. Continue experimenting and exploring new ideas. Your progress is commendable, and I look forward to seeing more of your projects in the future! 🚀💻

Marked as helpful

1

Raza Abbas 790

@RazaAbbas62

Posted

Thanks for the time to review my code and write down suggestions. I will keep them in mind for future projects.@petritnuredini

0
Theunis 210

@theYuun

Posted

Very cool! I wanted to point out the missing image behind the top image you have there, but you mentioned that to Vishal. Loading images from outside sources can be a prickly subject, no doubt.

Marked as helpful

0

@VishalMauryastp

Posted

you tried well .

Marked as helpful

0

Raza Abbas 790

@RazaAbbas62

Posted

@VishalMauryastp Thanks Vishal

0

@VishalMauryastp

Posted

@FazeenIjaz you can also my solution click here

Marked as helpful

1
Raza Abbas 790

@RazaAbbas62

Posted

@VishalMauryastp That's looks nice. I had also added a background image in the intro section but is not being displayed due to some issue with fetching it from Git Hub.

But one thing is that you should also add a hover effect on buttons and links, that's just a suggestion, overall it looks good. and is fully responsive .

Enjoy Coding :)

0

@VishalMauryastp

Posted

@RazaAbbas62 thanks for you suggestions

0

Please log in to post a comment

Log in with GitHub
Discord logo

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