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

A Responsive Bill Splitter App

#accessibility#react#tailwind-css
Abhay Kumarā€¢ 470

@abhay0480-eng

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi there šŸ‘‹, Iā€™m Abhay, and this is my solution for this challenge.Ā šŸš€ šŸ› ļø Built With:

  •   Reactjs  āš›ļø
    
  •   TailwindCSS. šŸŽØ
    

ā“ Question: Any suggestions on how I can improve and reduce unnecessary code are welcome! Thank you. šŸ˜ŠāœŒļø

Community feedback

Hussein Samyā€¢ 360

@HusseinSamy

Posted

Hello @abhay0480-eng, šŸ‘‹šŸ»

Awesome job on taking the first steps towards your dream!

I really like your submission, great work! Though, I have some recommendations for you:

  • Use this syntax to link your screenshot in the README file:
![](/your-screenshot-path)
  • Don't write your tailwind code inline with the HTML code ā€“ instead use BEM to name your classes and use the @apply directive in tailwind inside your css file, for example:
.main-container {
   @apply flex flex-col lg:justify-center h-screen;
}

check the docs

Hope you find it useful!šŸ˜‡

Keep up the fantastic work, and happy coding! šŸš€

Marked as helpful

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