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 using HTML CSS and Vanilla JavaScript

@A-shir1

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


\Added a button because I could not figure out how to make changes when values are entered. I know it is most probably a small fix but I have not able to implement it without about a thousand errors being thrown on me.

How do you people approach making a webpage responsive? Do you do mobile first? Any tips on how to make a webpage responsive?

Community feedback

@spencerrunde

Posted

Hi Mohammad,

I just completed this challenge a couple days ago. I believe it is best to usually start with the mobile layout, and then use a media query for larger screens. Typically, you can make the necessary changes without writing too much css. For my try at it, I mostly just had to change the flex-direction inside of the card to row so the input and output boxes were side by side, and change my grid layout for the tip buttons from 2 columns to 3.

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