Blog Preview Card Solution - Challenge #2

Community feedback

• 

  MikDra1•6,980

  @MikDra1Posted about 2 months ago

  Well done, here are some things to review 😊:

  • Overusing div tags: Try using more semantic HTML elements like <section>, <header>, and <article>. It’ll help with both accessibility and SEO.

  • Neglecting responsive design: Make sure you're using media queries and following a mobile-first approach so your site looks great on all devices.

  • Inconsistent class naming: It’s easy to end up with a mess of class names. Consider using a system like BEM for better organization and scalability.

  • Using px for everything: Instead of px for fonts and layouts, try using relative units like rem or em to make your design more adaptable to different screen sizes.

  • Forgetting alt text on images: Don’t skip the alt attribute. It’s essential for accessibility and helps search engines understand what your images are.

  • Using fixed heights for elements: Setting fixed heights can cause overflow issues. Use min-height or allow content to expand naturally to avoid problems.

  • Not using responsive images: Be sure to use srcset or the <picture> element to optimize images for different devices. This improves performance, especially on mobile.

  Hope you found this comment helpful 💗💗💗

  Good job and keep going 😁😊😉

  0

  ---

  

  P

  Fraser Jubb•70

  @fraserjubbPosted about 2 months ago

  @MikDra1 Thanks for the feedback!

  • I updated the card__footer to use a <footer> element.
  • I've now added a media query to make it more responsive on mobile devices.

  Not sure what needs changed with the following things you've mentioned, but please do let me know if I'm missing something:

  • Class naming - I've already written it using BEM methodology, so I am unsure what needs to be changed?
  • Same with pixels, not sure which part you're referring to as only using them on the border and the box-shadow.
  • Already have alt text on images unless I'm missing something?
  • With the fixed height, I'm currently only using it on the card__category as it is a very small element, should I change this?

  And as for responsive images, thanks, I have now begun looking into this for future projects!

  0
• 

  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…

  • You dont need to wrap one element with another, Do this for grouping not on its own,

            <div class="card__tag">
              <p class="card__category">Learning</p>
            </div>
  

  • Using a full modern CSS reset is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset

  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

  ---

  

  P

  Fraser Jubb•70

  @fraserjubbPosted 2 months ago

  @Stroudy Thanks for the feedback. Good catch with the div that you mentioned, I've removed it. And I will look further into what else can be added into my CSS reset, thanks.

  1