Skip to content
Submitted 9 months ago

Blog Preview Card Challenge Solution

6xg0d•190
@6xg0d
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I'm proud that i spend most of my time with the CSS instead of HTML, i was way more comfortable to think the structure just by looking at the example.

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

One of the main problems that i had was positionating elements exactly where i want. Especially the space between the footer and the resume paragraph. I did think in a way to put the footer 24px away from the bottom using the row-gap property. Even when the space isn't exactly the same that the one in the design, i'm still pretty happy with the results, and looking forward to improve the code in the future.

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

I want to know more about in which cases use margin or padding (even knowing the definitions in the practice in some cases i'm a little indecisive about which one should i use). Also, would like to know how to improve the CSS code and reduce the amount of lines or selectors to create the same results with the minimum amount of code possible

Community feedback

  • perterHUAN•250
    @perterHUANPosted 9 months ago
    • Using flex combined with row-gap (actually, just using gap would suffice since there's no wrapping occurring here) on the article element to create spacing between child elements is a good method; elsewhere in the code, you could apply this approach instead of repeatedly using margin.
    • By setting a padding on the article, it eliminates the need to set margin-left and margin-right over and over again on the child elements.
    • I think it might be less appropriate to use header and footer here as they typically refer to headers or footers for the entire page rather than within the context used.
    • The hover animation seems to be missing; when the mouse hovers over the card, the box-shadow should shift downwards.
    • It's worth considering using CSS variables to standardize the spacing values throughout your stylesheet, making maintenance and modification more convenient.
    • This is my suggested solution; please note that I am not an expert, and I welcome your feedback and suggestions for discussion and mutual learning.
    Marked as helpful
    1
  • Jason Delgado•40
    @delgado-jasonPosted 9 months ago

    Great job! I really like your semantic code layout. It makes sense. I was struggling to figure out which tags were appropriate.

    When to use margin vs padding can be subjective at times. It took me a while to figure that out. Generally though, imagine you have a box with text in it. The box has a border. Everything on the "outside" of the box is affected with margin. Padding affects everything around your text inside the box.

    Hope this helps.

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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