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-main

Matizeqβ€’ 180

@Matizeq

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


Hello, this is my biggest project at this moment. That challenge had a lot of logic and it was perfect to train my programming skills. NOTE: If you want to test custom tip, press "enter" after type a value.

Community feedback

P
visualdennisβ€’ 8,375

@visualdenniss

Posted

Great job completing this challenge successfully and making it fully responsive! Looks great overall.

My suggestion would be to set the breakpoint for switching to mobile view a bit higher as in tablet view, sometimes the page content overflows the viewport. E.g. 880px as a breakpoint could solve this. Tablet design is usually for 768px, so it will cover this as well.

Hope you find this feedback helpful!

Marked as helpful

0
Abdul Khaliq πŸš€β€’ 72,660

@0xabdulkhaliq

Posted

Hello there πŸ‘‹. Congratulations on successfully completing the challenge! πŸŽ‰

  • I have other recommendations regarding your code that I believe will be of great interest to you.

HTML 🏷️:

  • An h1 heading should primarily be used to identify the content on the specific page within the website and be placed at the beginning of the main content to provide an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.
  • Including both a main landmark and an h1 element provides a redundant way for users of assistive technologies to find the main content of a web page.

SUMMARY:

  • If the page contains h1 element and either a main or banner landmark, the h1 element must be a child of either the main or banner landmark.
  • NOTE: h1 must be in main or banner landmark
  • So, nest the <h1>Spli tter</h1> inside the main element

I hope you find this helpful πŸ˜„ Above all, the solution you submitted is great !

Happy coding!

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