Skip to content
Submitted 5 months ago

Blog preview card using flexbox

Aiden•20
@sorcerycss
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I'm very proud that I was able to implement flexbox features and finally understood how positioning works on a bit deeper level. For the upcoming challenges I plan to experiment with both flexbox and grid to see what looks best.

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

The fact that margin property works differently with flexbox made me really confused at first, as I thought it's the same thing. Turns out align-items, align-self have some limitations compared to the margin being inside the flexbox. I was able to overcome my confusing by putting it to the practice with this awesome challenge.

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

I find it very complicated to set up the right width for my image based on the figma design file. Perhaps, I used incorrect width elements or was wrong with the sizing that I have set on the image itself, not sure. I'm still in the process of improving the solution, refactoring in other words, to make it look much cleaner.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Huy Phan•3,430
    @huyphan2210

    Hi @sorcerycss,

    I've reviewed your solution and wanted to share my thoughts:

    margin is not exclusive to Flexbox. It can be applied to almost any element. align-items is typically used on the Flexbox or Grid container, while align-self is used on their child elements. However, with recent CSS updates, align-self can now be used on elements outside of a Flexbox or Grid.

    Regarding the image: You're setting min-width: 279px and max-width: 100% on the <img> without defining a width. I'd recommend using min-width and max-width with absolute values while setting width with a relative value. For example:

    img {
  min-width: 279px;
  max-width: 300px;
  width: 100%;
}

    This ensures the image scales with its parent while maintaining defined constraints.

    Beyond these points, consider improving your HTML semantics for better structure. You're using multiple <p> elements, but many of them don't represent actual paragraphs. Depending on the content, you might want to replace them with elements like <span>, <blockquote>, <address>, <time>, etc. where appropriate. Additionally, replacing <div> with elements like <main>, <article>, or <footer> can enhance readability and accessibility.

    Hope this helps! 😊

  • Luiz Fernando Barreto•20
    @LuizFernandoBarreto

    Eu aprendi a usar o @media que ajuda a manter o padrão entre design e o que sera entregue.

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