All solutions

When it came to making the card responsive I had difficulty getting the image to take the height of its container. Giving the source element height property didn't work. It was after giving the container a height value did it fit, but that resulted in the image being stretched.

If you use the picture element how do you adjust the image in the source element to get desired results? If not how do you get your images to change when different screens require different images?

The issue I had with this project had to do with the border-radius for the card. The border-radius only showed when I used the 'Overflow:hidden' property. How would I solve an issue like this if I encounter it again?

So far this is the easiest project I have completed. Easy here is in relation to the time it took me to complete the project, It took less than 2 hours for it to be completed. This is why I use the term easy to describe it.

That aside good work done. 👍

What do you think? Is this project one you would describe as easy? How long did it take you to complete it?

For this project, the issue I had was in deciding how to have the image displayed. To display it as as an ordinary image or to display it as a background image for an element. In the end I settled for displaying it as a background image since I could manipulate that better.

In your opinion which is the best to use(displaying as an ordinary image or as a background image) and how best to manipulate it to get desired results.

Thanks for your contribution and feedback.

For this project I found it difficult giving the cube image its hover effect. What is the best practice if you want to have an effect of that sort.

I wanted the card to be in the center of the page without having a scroll bar, I also had some difficulty with doing so. Apart from using the width and margin properties how else can you center your container in the page, make it large enough to fit all content and small enough that the page doesn't need a scrollbar?