Submitted almost 3 years ago

3-column-preview-card-component

David• 80

@DavidAlex17

Preview site View code

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

My third challenge! i believe i did better in this challenge than my other challenges. i want to say i improved just a tad bit in my opinion, although i still think i could do way better than this shi#%$ code i did in this challenge-still happy nonetheless-but improving is my motto. So, i want to include the hardest part of creating this was mostly the margin styles and sizing the paragraph size to its precise declensions by its original photo. i always have trouble getting the card dimensions exactly the the photo so any tips on that as well please. Since i am a beginner, i would still like other critical reviews on things i did not catch or add here. Its your guys' criticism that i look at that helps me improve on the next challenge. I am all ears! thank you guys.

Community feedback

Vanza Setia• 27,835

@vanzasetia

Posted almost 3 years ago

👋Hi David!

I have some feedback for this solution:

It's recommended to use only one h1. My recommendation is to change all h1 to h2.
For the learn more button, it should be an anchor tag a since if it is a real page, it will redirect the user to another page.
Use rem or em units, never use px since it will not allow the user to change the font size base on their browser setting.
I would recommend to use padding on the li rather than giving margin to p and heading tag to control the card size.

That's it! Hopefully this is helpful!

JorddI Suarez• 130

@jorsuap

Posted almost 3 years ago

your development is fine, but it can improve, using a max-width so that they are not disproportionate

Patrick• 14,325

@palgramming

Posted almost 3 years ago

you need to add a :hover state to your buttons
you need a common height on your paragraph in the desktop layout to keep your buttons aligned horizontal

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