Submitted 2 months ago

Html and CSS workgin with a card with img and basid tags

Michael King• 90

@mking0823

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

This was my first ever Front End mentor project that I actually finished the first time about two years ago. The first time I tried it I couldn't even finish it but now after doing it again to follow the path I can finish it in about 45 minutes. I used this project to learn how to actually submit my project.

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

My main issue was learning how to fit the image and have its border radius actually show.

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

I feel I need to work a lot more on my css organization and html semantic. I'm fine when its just a small card but when It comes to doing whole sites I struggle with keeping thing organized and getting good layouts .

Community feedback

Daniel 🛸• 44,230

@danielmrz-dev

Posted 2 months ago

Hello there!

Congrats on completing the challenge! ✅

Your solution looks great!

I have a suggestion:

Since you set grid to the body, but you didn't set the size of the rows, your footer is pushing your card up a little bit. You can prevent that from happening adding this to the body:

grid-template-rows: 95% 1fr;

Then your card will always occupy 95% of the space and the footer will adapt in the remaining space.

I hope it helps!

Other than that, you did an excellent job!

Marked as helpful

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord