Blog Card - CSS flexbox

Community feedback

• 

  Rebecca Padgett•2,120

  @bccpadge

  Posted 8 months ago

  Hi @soniluvi. Congratulations on completing this challenge!!!🎉

  Great job on your project! I wanted to share a few thought that might help you take it to the next level:

  • On mobile devices you can margin-inline:1rem; on the body that sets space on the left and right side.

  If you don't want to use Flexbox to center content on the page you can use CSS Grid as well.

  CSS Grid in action below ⏬

   .container {
    display:grid;
    place-content: center;
    min-height: 100vh;
  }
  

  More info📚:

  • CSS min-height property
  • CSS Units

  Alt Text for Images: Always include descriptive alt text for images. This ensures that screen readers and other assistive technologies can understand what the image represents, making your content more accessible.

  Example:

  <img src="images/image-avatar.webp" alt="headshot of Greg Hooper">
  

  Heading tags in HTML are so important on webpage, guiding both users and SEO through the content.

  Here's a quick breakdown:

  1. <h1/>: Represents the main heading of the page. It's the most important heading and typically used once per page.

  2. <h2>: Used for subheadings under <h1>.

  3. <h3> to <h6>: Represent lower-level subheadings, each level down is less critical.

  If you don't want to use the <h1> as the title use the <h2>

  <h1> can have .sr-only for screen readers

  Check out my solution here: Blog preview card

  I hope you find these tips useful! Don’t hesitate to reach out if you have any questions or need further guidance. Keep up the amazing work!

  02

  Marked as helpful