Blog preview card using flexbox

Community feedback

• 

  P

  Steven Stroud•11,870

  @StroudyPosted about 2 months ago

  Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…

  • On your .card Change your max with to 24 rem for it to be more responsive,

  • Line height is usually unitless to scale proportionally with the font size, keeping text readable across different devices. Best practice is to use a unitless value like 1.5 for flexibility. Avoid using fixed units like px or %, as they don't adapt well to changes in font size or layout.

  • Using font-display: swap in your @font-face rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.

  • This does not matter that much at this stage but something to be mindful of for SEO(Search Engine Optimisation), <meta> description tag missing that helps search engine determine what the page is about, Something like this <meta name="description" content="" />

  You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟

  0