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
Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • 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 am most proud of successfully completing this challenge despite having limited experience with CSS. It was rewarding to see how I could apply the concepts I learned to build a functional and visually appealing component. Next time, I would focus on improving my understanding of advanced CSS techniques, such as CSS Grid and responsive design principles, to enhance both the functionality and aesthetics of the component further.

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

One of the main challenges I encountered was managing the margins of various elements to prevent them from overlapping or colliding with each other. Initially, I attempted to use margin: 0 on the universal selector (* {}) to reset margins across all elements, but I realized that this practice is generally discouraged due to its potential side effects on global styling.

To address this, I focused on applying margin adjustments more selectively and thoughtfully. Although this approach improved my layout, I still have some uncertainties about the best practices for margin management and how to handle it more effectively in future projects.

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

As mentioned in the previous question, I would appreciate guidance on managing margins more effectively. Specifically, I'm looking for advice on best practices for setting margins to avoid issues like overlapping or inconsistent spacing between elements.

Community feedback

MikDra1 6,090

@MikDra1

Posted

To get margins done perfectly I encourage you to install Pixal Perfect extension.

If this comment was useful please mark it as helpful 💗

Good job and keep going 😁😉😊

Marked as helpful

1

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