All solutions

The real challenge for me here is the part with the music icon, price and "change" section. I ended up creating a flex container and added another flex container inside to solve it, if you guys have better approaches for this kind of layout, please let me know so I can study it!

I was confused with the active state for the image, I was pondering wether to have it be a link embedded in an image or a hover state. I ended up going with the latter and my approach may have been different if I went and embedded a link to the image.

I'm still not as familiar with all of the HTML semantics but I'm trying to get the hang of them by using them in simple projects like this more frequently.

On my first challenge, I only used <divs> in my HTML while in this challenge I tried using semantics such as <main>, <section>, etc. although I believe I could have used a different semantic for <section>?

Also, I tried doing the mobile-first workflow unfortunately I was unable to stick to it and ended up doing the desktop version first again like how I did on my first challenge. Does anyone have any tips on their workflow regarding this?

I found it difficult to fix the padding/margin of the results and summary components and since this is my first responsive project, I built the desktop-view first and then later tried to build the mobile-view as I did not know about the mobile-first workflow yet.

As for code that I am unsure of, I believe there are some elements or CSS that I added that might not be needed or is redundant which is something I hope to improve on as I build more projects here in frontendmentor.io.