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 App Calculator using HTML SASS and JS

@ShannTimothy22

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 guys, This is my first time using CSS preprocessor (SASS), if there's any suggestion or advice about it I'll really appreciate it, there's some question that I'm still confused, for example :

  1. I watched a tutorial about making a separate file for the responsive part, but when I tried it, the media queries is at the top of the other CSS so it doesn't work, how do I make it that it appears in the bottom part of CSS ?

  2. When there's many type of color is it better to declare it on a map or just declare it one by one ?

Once again any advice or suggestion are very appreciated, Thanks !!

Community feedback

@Kamasah-Dickson

Posted

Your solution looks great and closer to the design. To help you with the sass thing.

  • Whenever you use the @use or import a sass partial or a file. You must import them in other of importance or** merits**.

  • You can learn more about sass folder structures and all that on YouTube I recommend kelvin powell and a video called #7 Sass best practices on YouTube.

  1. To help you with the accessibility issue you are having. There should be main semantic tag in your solution. Wrap your card in a <main> or change the parent div of your card into main

  2. On smaller mobile your card don't have any margins around so it spans across the screen. I think you forgot about adding margins around the card. Hope this was helpful.

Besides great job there👍 Happy coding and have a nice weekend👍💻

Marked as helpful

1

@ShannTimothy22

Posted

@Kamasah-Dickson Hi there, thanks for the feedback and advices !! I'll make sure to fix the issues 👌

Hope you have a great day 😁

0

@Kamasah-Dickson

Posted

@ShannTimothy22 am glad you successfully fixed the issue😀 Keep coding man💻 am always here if you need help with something😀👍

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