All solutions

What challenges did you encounter, and how did you overcome them?

It was smooth sailing thank god.

What are you most proud of, and what would you do differently next time?

Learning how to use Figma in a lot more depth than the previous times which led to getting the end result as close as possible to the design.

What challenges did you encounter, and how did you overcome them?

Challenge was standard for the most part, except for playing with the opacity for the linear gradients, and the background colors of the categories, there weren't really any difficult parts.

What specific areas of your project would you like help with?

Responsiveness, and checking whether I got the linear gradients right would be great.

I'd love feedback on the background, and on overall responsiveness, thank you.

I would love feedback on my use of transform: translate to apply the layout. would love to know other ways and best practices that people used to achieve the layout.

Feedback on the responsiveness and my use of <picture> would be fantastic, thank you.

Feedback on the responsiveness and on the image would be much appreciated.

Thoughts on the background and also on responsiveness.

I struggled a bit with getting the colors right, I had to tinker a lot with the saturation and lightness, any advice for reducing the time spent on such a thing?

I also had to set the call to action link to display: block, because display:inline-block with width and padding had it equip so much space for some reason, and thus making the columns not equal in size, thoughts on this behaviour?

and finally, would someone kindly check if my semantics usage (main, section) make sense here, as well as if my responsiveness is good enough, thank you.

I'd love for someone to check my responsive design and give me feedback on it. also please check my media queries in the code as I'm unsure if the max-width values I gave inside the queries are optimal.

a question about best practices would be about giving the body a background-color is that fine?

EDIT: Fixed the height issue by adding min-height:100vh to the container.

Things I found difficult:

Didn't have much trouble turning the design of the component itself into code, but I did struggle a bit with the layout of the container element. I wanted it to cover the entire screen so I thought I'd give it a height and a width. the height in particular was problematic especially when set to 100vh , or even when set to 100% with ancestors( both body and html also set to 100%). the elements would change position and overlap, so I had to abandon setting the height.

did flex-direction column and gave a big gap to have the container take full height.

I finally decided to abandon setting width as well, which worked for the best as it made for a much better responsive design without having to use queries. it also allowed me to set the background color on the container itself since it now occupied the entire width, instead of setting the background color on the body like I did prior which I'm not sure is a best practice.

feedback on those areas pertaining to the layout would be much appreciated.