Frontend Mentor | Range Slider coding challenge solution

Community feedback

@ApplePieGiraffe

Posted over 3 years ago

Hello, again, Marta! 👋

Just wanted to say nice job on this challenge! 👏 Your solution looks great and the slider works well! 👍

Like pranshudobhal mentioned, definitely check out PerfectPixel—it's a pretty cool extension that'll help you drill down some of the measurements by comparing your solution to the original design JPGs (and I use it all of the time). 😉

Keep coding (and happy coding, too)! 😁

Marta• 630

@martam90

Posted over 3 years ago

@ApplePieGiraffe Thanks, I always appreciate your feedbacks :)

Pranshu Dobhal• 295

@pranshudobhal

Posted over 3 years ago

Hi Marta,

First of all, great work!

Second, I would suggest that you decrease the height of the elements so that it matches with the design provided. And also in the report generated, shows that there are accessibility and HTML issues that need to be looked into.

You have used <div class=box__icon> as a child element of <ul>, it would be better if you use <li> list item for displaying the content.

Marta• 630

@martam90

Posted over 3 years ago

@pranshudobhal Thank you for your feedback. Do you have any recommendations how to check the precise measures of designed elements? I am not a PRO memeber so I can't check it in Figma or Sketch. I usually try to measure it in Gimp but the final result is far from my expectations. Thanks!

Pranshu Dobhal• 295

@pranshudobhal

Posted over 3 years ago

@martam90 I can suggest 2 approaches for precise measures.

You can use perfect pixel. It is a chrome extension. It puts a semi-transparent image overlay over the top of the developed HTML. I use the below one: PerfectPixel by WellDoneCode (pixel perfect)
I tried this approach in my previous project. What I did was that I imported the design as an image in figma and then tried to guess the measurements. I wouldn't recommend this one though. :P

Range Slider

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community