Submitted 8 months ago

Product preview card component

Darek•140

@DarekRepos

Preview site View code

This is a solution for...Product preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I'm more comfortable using grid and flexbox layouts. I've also adopted the BEM (Block, Element, Modifier) naming convention for SCSS. While I prioritize using modern fonts, I ensure compatibility with older browsers. Matching exact spacing and fonts from design files can be challenging. For future projects, I'll focus on creating adaptive solutions with visually appealing elements. I won't strive for pixel-perfect font replication, as it can be time-consuming.

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

The challenge was finding the exact padding and fonts used in the design files. I figured it out through experimentation.

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

At this point i am more comfortable with working in css and html. Do you use the same font sizes and spacings as in the design photos? Do you try to match the exact elements in design files, like font sizes and spacing, or do you use your best judgment to achieve the most accurate representation? Also if you find any mistakes or have suggestions for improvement, please let me know. I will be very grateful.

Community feedback

David Turner•4,150
@brodiewebdtPosted 5 months ago
Nice job, Darek. I have started using BEM more and more now. It makes it easier to name classes, and they are more relevant. I try to match the layout as much as possible, but some of the older challenges have spacing that isn't totally accurate. Sometimes I change things and go with what looks good to the eye. Hope this helps. David
Marked as helpful
1
Darek•140
@DarekReposPosted 5 months ago
@brodiewebdt Thank you very much. This is great stuff! I've been using BEM more and more, and it's making a big difference. It's like you said, the class names are much more relevant now. I know what you mean about the older layouts – sometimes you just have to go with what works visually.
0

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