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 app

Liiiibra 60

@nguyenvn7

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


Thank you so much for your feedback :)

Community feedback

HYDROCODER 555

@HYDROCODER

Posted

Hey there! Good attempt on this one. There are areas that you can improve so I would suggest the following if you don't mind :

  1. Do put comments in your code, as it will be easy for others to help you, as well as for yourself, if you need to refer any part of your code.

  2. Do use classes instead of ids. ID's are very specific selectors and they will mess up or increase the amount of code needed to write when compared with classes.

  3. Try mobile first approach instead of desktop first approach. It will make writing CSS code a whole lot easier.

  4. For correcting your accessibility issues, I would suggest you to look up on semantic html here. Instead of wrapping everything in a div, try using main or anything more semantic.

  5. If two or more elements in your page use the same styles, use a class in your CSS code and use it in both the elements in html.

  6. Never set a height on anything unless necessary for some very specific purposes.

  7. Structure your html as per the desktop-version, style first as per the mobile version and then for the desktop version.

Hope this helps.

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