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 with Svelte, TypeScript and SCSS

P
Jeremy Helselโ€ข 670

@JIH7

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


This was my very first Svelte project. I'd love any and all feedback on the Svelte specific code, as well as anything else!

Community feedback

solitary_coderโ€ข 1,000

@kabir-afk

Posted

Hey !! , great job btw , but upon reviewing your sass I realized that you were using pixels quite a lot , which fixes the dimension your of DOM elements making them unresponsive when changing your viewport , it would have been better if you used relative units more , then you wouldn't have had to specify multiple media queries as well . . . I guess you all were trying to achieve was a design accurate webpage , which is ok. As frontend devs we have a knack for pixel perfect webpages , but that's not possible all the time , I recommend you read this article here, I discovered it quite recently as well๐Ÿ˜… . . . It will give you a step by step guide on how you can generate a ditto screenshot for your frontend challenges . . enjoy and keep on grinding !!! ๐Ÿ’ช๐Ÿ’ช

Marked as helpful

1

P
Jeremy Helselโ€ข 670

@JIH7

Posted

@kabir-afk Thank you so much for the feedback! I've been aware for a while I should be using relative units, but just like you said it made it hard to match the design as closely as I'd like. That being said it really is a skill I should be prioritizing at this point since with some of the super simple challenges, I have done pixel perfect designs. I'll take a look at the article and try to incorporate relative units into my next project. Thanks again!

0
solitary_coderโ€ข 1,000

@kabir-afk

Posted

@JIH7 my pleasure brother ๐Ÿฅ‚

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