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

Tip-calculator

@abdullahkiani007

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

AdrianH 190

@Adrian-py

Posted

Hello there! First of all, good job on the solution. Although I do think that there are several things that I feel can be improved:

  1. Responsiveness After viewing the solution in several different resolutions, I noticed that it was not responsive enough. Although I did notice that you did do some changes for screens below 600px in your CSS, I still think it's better to also prepare for screens both larger and smaller than 600px. Some resolutions that you might want to code for are: a) 1920 x 1080 (Large Screens) b) 1440 x 900 (Medium Screens) c) 768 x 1024 (Tablet Screens) d) 360 x 640 (Mobile Screens)

There are other screen sizes, but you can start by preparing for those and maybe start to do more in the future.

  1. Hover, Active, and Pointer Effects What I mean by this is that maybe you could add hover effects when a button is hovered or "active" effects when your buttons are clicked. Furthermore, you could also change the buttons' cursors to be pointers, this can be done just by adding "cursor: pointer" in the CSS. If you want to learn a bit more about hover and active events in CSS, here is a link you can refer to https://www.w3schools.com/csSref/sel_hover.asp.

That is all from me, overall good job on the solution, and keep up the good work!

Marked as helpful

1

@abdullahkiani007

Posted

@Adrian-py Thanks for the reply I surely need to improve my front end skills , I spent a lot of time in just designing the UI from now onward I'll apply your tips.

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