Blog preview card solution

Community feedback

• 

  geomydas•1,460

  @geomydasPosted 4 months ago

  CSS

  1. Use a css reset. You shouldnt really be manually applying box-sizing: border-box on each element. I reccomend using Josh Comeau's or Andy Bell's css reset for this.
  2. Never ever set font-sizes in rem. See why
  3. Consider using the rem unit in place of the px unit. The rem unit is generally better since it scales with the user's set font-size in the browser's setting. You would generally use px for decoration like outlines, borders, shadows, filters and etc. There's more to it but I won't dive more deeper than that since the effect is very minimal.
  4. Never ever set fixed-widths. Fixed-widths are like width: 365px. They arent responsive most of the time and you should really be using max-width instead. The only exceptions I see are small icons and profile pictures.
  5. No need for the .blog-card wrapper, just apply the styles directly on the body element.
  6. No need for the sections either, just use divs instead. It just adds more semantic noise. You would typically use sections for larger stuff of a page aswell
  7. Wrap the .blog-card-link class inside a <h2>. You could also wrap it inside an h1 but it a real site, there would be an h1 already here.
  8. No need for the alt text on the profile picture image, its decorational anyways.
  9. Replace the .attribution div with a <footer> tag instead. About the footer tag

  Update your code and I will continue with more feedback later.

  Marked as helpful

  1