Blog preview card using CSS Flexbox and clamp

Community feedback

• 

  Harsh Kumar•5,520

  @thisisharsh7

  Posted about 2 months ago

  Great job on the blog card! Your design is very close to the target, and using clamp for responsive font sizes is a smart move—nice work learning it!

  For better HTML/CSS:

  1. HTML Structure: Move inline <style> to a separate style.css file for maintainability. Use semantic tags like <article> instead of <div class="card"> for better accessibility.
  2. CSS Readability: Group related styles (e.g., all .card properties) and use comments to separate sections (e.g., /* Card Styles */). Replace px with rem for margins/paddings (e.g., padding: 1.5rem) to scale with root font size, improving responsiveness.
  3. Accessibility: Add role="img" to the avatar image for screen readers.
  4. Update .author Section:

  <div class="author text-preset-3-bold">
    <img src="assets/images/image-avatar.webp" alt="Greg Hooper's avatar" class="avatar" role="img">
    <span class="author-name">Greg Hooper</span>
  </div>
  

  5. Update body styling: Use min-height always instead of height it will keep content from cropping.

  Keep up the awesome work!

  10

  Marked as helpful
• 

  Marzia Jalili•9,370

  @MarziaJalili

  Posted about 2 months ago

  Hats off to your solution! 🎉🥳

  🌟 Some tiny tips?

  ✅ First, consider changing <div class="card"> to <main class="card"> as every web page needs one <main> element to represent the main its content.

  ✅ Second, using grid is the cleanest way for centering:

  display: grid;
  place-items: center;
  

  ✅ Also, you don’t need to wrap the image inside a <div> element, man. Simply move the class name to the <img> element itself.

  ✅ Lastly, change <div class="text-preset-2> to <p class="text-preset-2 > to represent a paragraph.

  Stay consistent and everything will be a cake walk!

  😎😎😎

  10

  Marked as helpful