Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

3-Column Preview Card Component using Grid and Flexbox

Felipe 60

@Jxai00

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'd love to get some feedback on my solution. Feel free to talk about where can I improve.

Community feedback

Joseph 770

@Jos02378

Posted

Hey @Jxai00, good job on this solution!

Some suggestions for you:

  1. You can use text-transform: uppercase to capitalized text in CSS instead of typing them in HTML.
  2. You don't need to fill in the alt tag since the image is just for decorative purposes.
  3. Try to add a max-width to your container so that you can keep the structure and shape of the card if the screen size is getting bigger.
  4. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
  5. You can try to use relative units like rem and em in the future. Here is a link to an article that explains when to use which unit read the article.

I hope this helps, good luck!

Marked as helpful

1

Felipe 60

@Jxai00

Posted

@Jos02378 Thank you for the suggestions. I'll follow your recommendations and use them in that challenge.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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