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

Easybank landing page with React and Tailwind CSS

@AchinthyaDulshan

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


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

I am now able to configure and work with React and Tailwind CSS more easily than before. That time I worked with gradients and mainly position with CSS. Next time I'm try to do more with CSS positions.

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

Really challenging situation was the designing the Hero section. That Image positioning was got more time than other components. Finally somehow I did it through testing various configurations with my code.

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

Image positioning in hero section and changing color of SVG's when hover it. I tried fill property in tailwind but it doesn't work.

Community feedback

@TedJenkler

Posted

Hi @AchinthyaDulshan,

Nice project! I especially liked the animation on the navbar—great job on that!

I have a few tips for improvement. I noticed that you have your components folder inside the assets folder. Typically, the assets folder is used for design-related items like images and sometimes SCSS files. It’s usually better to place the components folder alongside the assets folder in the src directory. This would make your project structure easier to navigate and understand.

Also, if you’re using the <img /> tag for SVGs, keep in mind that you can’t use the inline fill attribute—it only works with the <svg /> tag. If you prefer using <img /> tags for SVGs (which isn’t recommended), you’ll need to override the fill with CSS. When using the <svg /> tag, be sure not to include the fill attribute in the path element, as it would override any Tailwind CSS classes you apply.

Otherwise, this project is solid and responsive, and you’re using a good structure.

I hope this feedback is helpful!

Best, Teodor

Marked as helpful

1

@AchinthyaDulshan

Posted

Hi @TedJenkler

I greatly value your feedback on my project. Your insights on the component folder and the SVG tag were very enlightening. I will incorporate this knowledge to enhance my next project significantly.

Thank you, Achinthya.

1

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