All solutions

It took me way more time to finish this challenge than predicted since I wanted to build the notification elements using JavaScript. It was good for practicing it though.

Should have added a hover effect when hovering over the new notifications, so they are marked as "seen" now.

Any feedback is welcomed and keep coding!

I would like to know if there is a specific way for the input type range, to space it out on segments. Maybe there is a way to use step element. I wanted to have the 16$ option exactly in the middle of the range input. Is it simply up to me to write a function, that would place the thumb exactly in the middle when the option closest to 16 is chosen and the same for the rest of the values?

I feel I could have managed better the units on grids.

• Would it have been better to use pixel units when defining the row/column or the % instead of fr? I think I am missing something or could use fr better.

I think I nailed everything about this challenge. Is not pixel-perfect and maybe I could have split the js files, one for the functions, and one for the DOM.

It would help me if someone might check if I could name variables/functions better.

Thanks in advance for the feedback!

I went with a placeholder this time instead of a label inside the input. This generates accessibility errors.

What would be a better approach for this? Stick with the label inside the input instead of a placeholder?

I got a question regarding the excellent practice when creating a form.

From what I read online, it is not a good idea to place the label inside the input, or don't have an input at all and just a placeholder.

For this kind of form, is there a better solution regarding the label that maybe I didn't think about?

• Are the colors as close as possible to the design? Is there a better way for the radiant gradient to be as close to the design as possible? I felt like the photos inside the design were maybe low resolutions and I couldn't get the same colors. I even used a color picker on some of the parts, but in the end, I used the colors inside the style guide.
• I think that the numbers inside the circles are not really in the middle. What might fix this? Tried text-align, display: inline-flex, and other things.

• I didn't figure out the small things around the border corners for the summary elements and how to build them so I would really appreciate some feedback or hints on what I should research.

Any extra feedback is more than welcome and thank you for your time.

1. Is it ok if I made a container for the images and text instead of letting it without a wrapper into the body or the container wasn't needed here?
2. The two <p> elements should each be inside a div or just placing them inside a wrapper is enough?
3. I went for the max width and number of pixels on the image. It would have been better to work with rem/% instead of pixels?

Thank you for your time!