Blog preview card using flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • Yes, you need to use a paragraph. footer is a landmark, but its function is still to group a section of the page. It wouldn't be appropriate to have text directly inside the footer.

  • Yes, you could eliminate the dot (".") but you must also remove the forward slash ("./") — both are correct ways to point to an image. For example, you can use assets/images/illustration-article.svg, and it will be understood that the image is in a folder named assets.

  • Inline elements have space below them due to their inline behavior. By using display: block, you eliminate that reserved space. You can use Dev Tools to toggle this property and see that the image creates space below, pushing the text. It's worth mentioning that it's not padding.

  • Here an example of the use of height

    • min-height: Sets a minimum height for the element, but if the content grows, it adapts to the content's height.

    • height: A fixed height. If there's less content, it will always have that height. If the content grows, it will overflow.

    • max-height: Adapts to the content but cannot grow more than a specified height. If it grows more, it will overflow.

    By setting a minimum height of 100vh on the body element, you allow it to grow beyond those 100vh. This makes sense because on small screens, the content (your card) might be larger than 100% of the screen, and allowing it to adapt better.

    Using max-width on your component allows it to resize horizontally if the screen is small, but it also restricts it from growing too much

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  3
• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 11 months ago

  Hi again, congrats on finishing another challenge - well done!

  Both the HTML and CSS look good to me. The only things I would change, are:

  • The illustration image is decorative, so make the alt text empty: alt="".

  • I would give the "Learning" element a class and target it in the CSS using that, instead of main > :nth-child(2). You could do the same for the image.

  As for the <time> element, it is useful for Search Engine Optimization, among other things.

  0