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

Card Preview Responsive - React

@Lombardimn

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 very proud to have completed this project and created a clean and responsive blog preview card using React. The design closely follows the specifications of the Frontend Mentor challenge, and I implemented a well-structured layout with great attention to detail in terms of spacing, typography, and responsiveness across different devices. The component-based structure is easy to maintain and update.

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

The challenge was working with the spacing and alignment of the design to ensure it precisely matched the Frontend Mentor specifications, which sometimes meant adjusting margin and padding values. To overcome this issue, I used browser developer tools to inspect and iteratively adjust the layout.

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

I would like to receive help to further optimize the design, particularly to refine the CSS to ensure a more consistent and smooth layout across all screen sizes. I would also appreciate guidance on how to improve the overall project performance, such as using best practices for image optimization and lazy loading. Additionally, I am interested in learning how to incorporate more advanced CSS techniques, like animations or transitions, to enhance user interaction and engagement. Feedback on how to make the codebase more modular and maintainable would also be valuable.

Community feedback

Adriano 36,990

@AdrianoEscarabote

Posted

Hi Matias Lombardi, hope you're doing well! I loved how your project turned out, but I’ve got a few suggestions that could be useful:

I noticed that your component is not centered, to fix it we can do the following:

body, html {
    /* padding-inline: 4px; */
    /* padding-top: 1rem; */
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    background-color: #f4d04e;
    font-family: Figtree, Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

I just added justify-content: center; and removed padding

The rest is fantastic.

Hopefully, you'll find it helpful. 👍

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