Blog preview component

Community feedback

• 

  P

  Steven Stroud•11,910

  @StroudyPosted 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…

  • These <div> should really have semantic tags like headings (<h1> to <h6>) and paragraphs (<p>) convey structure and meaning to content, improving accessibility, SEO, and readability by helping search engines and screen readers interpret the content.

  			<div class = "tag">Learning</div>
  			<div class = "date">Published 21 Dec 2023</div>
  

  • 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.

  • I think you can benefit from using a naming convention like BEM (Block, Element, Modifier) is beneficial because it makes your CSS more organized, readable, and easier to maintain. BEM helps you clearly understand the purpose of each class, avoid naming conflicts, and create reusable components, leading to a more scalable codebase. For more details BEM,

  • 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="description goes here" />

  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! 🌟

  Marked as helpful

  1

  ---

  

  Vynny LonlySoft•160

  @LonlysoftPosted about 2 months ago

  @Stroudy thanks for your tips!

  I didn't knew about the font-display. It seems pretty useful. I'm sure going to use it next time when I use a local font.

  About the <div>s I actually didn't think in using an heading or a <p> there because at first I didn't interpreted that as a necessity. But it's sure important to use semantic tags in text as you said.

  About BEM, didn't know about it, but I think I've used something like that before in some personal project that I'm still developing. (I used more to reduce my code lines because there were elements that were always using the same 6 properties so I created a class just for that) But since here there weren't elements that got styles in common I just didn't use it.

  About the meta tag, I just forgot to write it there because I thought it wasn't important to do it there.

  But again. Thanks a lot for your feedback!

  1

  

  P

  Steven Stroud•11,910

  @StroudyPosted about 2 months ago

  Hey @Lonlysoft, Look at this BEM Cheat sheet It will explain it better, Its not about similar styles, Its a naming convention. You got this bro! 💪

  0
• 

  decorator-factory•40

  @decorator-factoryPosted 2 months ago

  • The card is not responsive. Because it's using a fixed width, it will overflow when there's not enough space. I would use a max-width instead: hint the browser instead of forcing a specific value
  • The heading is a bit too small on desktop. It should be 24px (this way it is the main point of focus when someone is browsing a page). For the same reason the publishing date and the tag should be a bit smaller: they are secondary details. I also think the text is easier to read with a line-height of 1.5 on the description
  • I'm not sure why the image is included as inline SVG. It's definitely better to include images as separate files (for caching, reusing the image, editing the image, and code readability)
  • A small accessibility improvement would be using the <time> tag for the post date

  1