Skip to content
Submitted 4 months ago

Blog-review-card

Dev-musty•160
@Dev-musty
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 challenges did you encounter, and how did you overcome them?

Challenge faced [Vertically centering div and applying the drop shadow effect] [MDN documentation on filter effect and W3school documentation on centering div] helped understood the concept.

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

When centering div horizontally and vertically, what's the purpose of having both[-ms-transform: translate(-50%, -50%); & transform: translate(-50%, -50%);] together why not just [transform: translate(-50%, -50%);].

Community feedback

  • Boris•3,000
    @mkborisPosted 4 months ago

    -ms-transform: translate(-50%, -50%); ensures compatibility with older versions of Internet Explorer that require the -ms- prefix. But I don't think it's necessary today as most modern browsers support the unprefixed transform property. Just transform: translate(-50%, -50%); is sufficient

    Marked as helpful
    1
    Dev-musty•160
    @Dev-mustyPosted 4 months ago

    Hi @mkboris Thanks for the clarification.

    0
  • Teodor Jenkler•3,860
    @TedJenklerPosted 4 months ago

    Hi @Dev-musty,

    Nice project! Here are a few suggestions for improvement:

    Minimize the Use of Divs: Try to use <div> elements sparingly. They should mainly be used when you need to create a distinct styled element, like a card with borders and other specific styling. Otherwise, consider using Flexbox and Grid for layout design—they’re more powerful and reduce the need for unnecessary <div>s.

    Consistent Styling: Always include * { box-sizing: border-box; } and body { margin: 0; } in your projects. This helps maintain consistency across your designs and prevents unexpected layout issues.

    Simplify Centering: To center your content, you can streamline your HTML by removing unnecessary <div> elements. Keep a single <div> for the card, and then use display: flex, justify-content: center, and align-items: center on the body element. This approach makes centering content much easier and cleaner.

    Best, Teodor

    Marked as helpful
    0
    Dev-musty•160
    @Dev-mustyPosted 4 months ago

    Hi @TedJenkler Thanks you for the advice. Will be sure to implement them in future projects.

    1
  • MikDra1•7,060
    @MikDra1Posted 4 months ago

    If you want to make your project just like the design I encourage you to use the Pixal Perfect extension

    Hope you found this comment helpful 💗💗💗

    Good job and keep going 😁😊😉

    Marked as helpful
    0
    Dev-musty•160
    @Dev-mustyPosted 4 months ago

    Hi @MikDra1 Yes i did find it helpful, thanks.

    0

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