All solutions

Created using Tailwind CSS. Took me about 4 days to finish everything up.

I'm not sure if my JavaScript code is up to standard but it's the best I can do at my current level.

I was also going to add accessibility to the app but I got really frustrated while writing the JavaScript and I just wanted to finish the project asap.

Any advice is appreciated, this is all self-taught!

I did NOT expect this one to be as hard as it was. This might not pass me the challenge. What other way could I have done it so that it's responsive throughout the 1440px - 375px resolutions?

Flex kept scaling the sizes in a weird way which made the columns appear out of sync when I'm testing for responsiveness. Delete the media queries to see what I'm talking about.

Sigh, where do you think I should focus so that I learn from my mistakes here? Thanks for answering. Also, there is no readme file because I'm too frustrated to write one.

I could not for the life of me figure out how to apply the active effect on the image. Can anyone please explain how can I do it correctly? I did it using after and before pseudo-elements, but I don't think this is the correct way to do it. In a real-world scenario, someone would wanna click on the image and that would take them to another link, so I was thinking; would a better approach be to use an icon inside of an anchor tag, and somehow put it on top of the image, and give it a background color of that one in the challenge? I'm not sure if this is even a possible solution. This challenge frustrated me. Any help is appreciated. I also didn't have time to add a readme file, but I will add it later.

Would there be a better way to deal with the images than the one I used?