Blog Preview Card Using Responsive Typography And CSS Flexbox

Community feedback

• 

  P

  Selina Lavery•40

  @SelinaLaveryDevPosted 17 days ago

  Hey @ahsanma,

  You mentioned challenges using @font-face - you were actually doing everything right, you were just missing "" quotes around the url. So here:

  /* font-family: "Figtree", sans-serif; */
  /* src: url(./assets/fonts/Figtree-VariableFont_wght.ttf)
      format("ttf-variations");
  

  change it to:

  src: url("./assets/fonts/Figtree-VariableFont_wght.ttf")
  

  That should work for you now! I hope that helps :)

  Marked as helpful

  0
• 

  P

  Huy Phan•3,420

  @huyphan2210Posted 17 days ago

  Hi @ahsanma,

  I've checked out your solution and wanted to share some thoughts:

  • You're using a <span> for Learning, which is an inline element. The issue you encountered happened because its parent is a Flexbox with flex-direction: column. This makes the <span> behave as if it has full width due to how inline elements interact in a column layout. You resolved it using align-self: start, which was the right move.
  • Wrapping the <img> in a <figure> for the illustration is a good practice (though the <img> can stand alone as it's the only child). You could apply the same approach to <div class="author">—converting it into <figure class="author"> and wrapping the author’s name in a <figcaption> instead of a <p>. This would reduce unnecessary nesting.
  • The Published 21 Dec 2023 text would be better suited inside a <time> tag rather than a <p>, as it represents a specific date.
  • Consider adopting a CSS naming convention. I personally use BEM, as it helps maintain a structured and scalable codebase.
  • Using rem is great for scalability, but for values like 0.6993rem, consider switching to px for better precision.

  Hope this helps! 😊

  Marked as helpful

  0

  ---

  

  Ahsan•110

  @ahsanmaPosted 17 days ago

  Hi @huyphan2210,

  Thank you so much for providing feedback.

  Starting from my next design challenge, I will try to implement BEM methodology.

  Meanwhile I will update this project, based on your suggestions.

  Thanks Again

  1