All solutions

Hi everyone! Here is my solution. This challenge is quite tricky.

• I ended up using 5 img tags for the stars. I tried background-image in different ways, but the gaps between the stars are too narrow, even with background-repeat: space.
• Regarding the indentation of rating and review sections, I chose to use flex-box with align-self: start | center | end over transform: translate().

Feel free to leave comments if there are better solutions. Appreciate your feedback for me. Thank you so much!

Hi everyone! Here is my solution. I used mainly CSS Grid for the layout. I did a few upgrades to the button and social media icons by adding extra effects.

Feel free to leave comments on how I can improve my code. Appreciate your feedback for me. Thank you so much.

Hi everyone! Here is my solution. I used mainly CSS Grid for the layout.

Feel free to leave comments on how I can improve my code.

Appreciate your feedback for me. Thank you so much.

Hi everyone! Here is my solution. I used mainly CSS Grid for the layout.

Feel free to leave comments on how I can improve my code.

Appreciate your feedback for me. Thank you so much.

Hi everyone! Here is my solution.

I am not sure about the background-image if it is good practice? Please leave comments on how I can improve my code.

Appreciate your feedback for me. Thank you so much.

Hi everyone! Here is my solution. For this project, I tried to apply more clamp() function on font-size, padding in addition to width and it seemed to work well.

I have a question about the color of the image header. I used pseudo-elements to create the color for it. Is it good practice? Is there any other way to do it?

Appreciate your feedback for me. Thank you so much.

Hi everyone! Here is my solution. As for width, I used clamp() function instead of media query for this project :smile:

Appreciate your feedback for me. Thank you so much.

Hi everyone! Here is my solution.

Although I am not good at box-shadow, I was trying to get it looking as close to the design as possible. Hope you can see the shadow of the card that I made :smile:

Appreciate your feedback for me. Thank you so much.

Hi everyone! Here is my solution. I intended to make the solution more responsive by using clamp() and dynamic unit, but I was not sure where to put it. Could you please have any advice for me? Appreciate your feedback for me. Thank you so much.

Hi everyone! Here is my solution. Appreciate your feedback for me. Thank you so much.

This is the very first challenge that I deal with, so I was totally confused at the beginning and got messed up from assigning variables to selecting html tag while building the project. I was trying to get the product looking as close to the design as possible.

• I am not sure of the area of responsive code, since the requested widths between the two view modes are different significantly. Should I myself choose a larger width for responsiveness between mobile and desktop views?
• I chose to override the default font size of the browser with the requested font size. Is it a good choice?
• Mobile-first or desktop-first workflow? which one is a better approach for the most part?