Submitted 8 months ago

Blog Post Preview Card with React and Styled-Components

ha308ing• 90

@ha308ing

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

This is a solution for...

Blog preview card

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

I'm proud of implementing a valuable advice to use kind of subcomponents, that are specific to the component. Next time I'd wrote more useful readme.md

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

I submitted this challenge a while ago.

And it took me some time to recover pre-commit linting with lefthook, so I had to switch from yarn to npm.

Because yarn created .pnp. files (also typescript vscode integration), while I do not agree to tolerate anything more than package.lock

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

How to achieve pixel-perfect layout from .jpg design file?

When I use 1px x 1px grid with max zoom in the browser .jpg edges kinda blurry and I each position I try is wrong ='(

Community feedback

Raza Abbas• 790

@RazaAbbas62

Posted 8 months ago

For a small card with straightforward child elements, keeping them within the Card component is likely more practical. This maintains simplicity, readability, and facilitates easier maintenance. Separate components might be overcomplicating for such a scenario.

Marked as helpful

ha308ing• 90

@ha308ing

Posted 8 months ago

@FazeenIjaz thank you for the feedback! Are there scenarios when such overcomplication makes sense?

Raza Abbas• 790

@RazaAbbas62

Posted 8 months ago

@ha308ing Creating separate React components for each child element in the card can be reasonable for improved modularity, reusability, and maintainability, especially when components involve complex logic or need to be reused across different parts of the application. However, it's crucial to strike a balance and avoid overcomplicating the structure for simpler UIs.

Marked as helpful

Edgar Chilin• 60

@EChilin5

Posted 8 months ago

In my opinion, I don't think you have to break it down to that level but I understand what you are trying to do. It might be an overcomplication. It's something I am trying to decide on my own as well.

Below is a card link from react-bootstrap that might provide a good example of how they made their card design and another way to solve this challenge.

React Bootstrap Card Ex

In my opinion, I prefer their example because it'll be easier to pass information to their card instead of passing information to each component of the card. It might be unnecessary props if you have several components inside the card component. I'm still learning and trying to get better. Hopefully, this helps with your question, and best of luck.

Marked as helpful

ha308ing• 90

@ha308ing

Posted 8 months ago

@EChilin5 thank you for directions and the link! =)

Naveen CB• 420

@Naveen-CB

Posted 8 months ago

Hello @ha308ing, mostly this types of card layout are just used as news, article, aside or blog in a website so nothing wrong to creating a appropriate tag for each data but it is some level of overcomplication for small part in a web(actually not needed that much) .

I hope it helpful for you❤️.

Happy learning🚀.

Marked as helpful

ha308ing• 90

@ha308ing

Posted 8 months ago

@Naveen-CB thank you!

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