blog-preview-card

Community feedback

• 

  KapteynUniverse•2,170

  @KapteynUniversePosted about 2 months ago

  Hey, nice work. A couple of things:

  You are trying to

      align-items: center;
      justify-content: center;
  

  but you don't have a flex or grid on the body. For your code this should do the trick

  body {
  text-align: center;
      background-color: #F6D050;
      font-family: "Figtree", sans-serif;
      align-items: center;
      justify-content: center;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
  }
  

  All content should be contained within landmarks. Use a main element to wrap the component.

  Skipping heading ranks can be confusing and should be avoided where possible: Make sure that a <h2> is not followed directly by an <h4>, for example. It is ok to skip ranks when closing subsections, for instance, a <h2> beginning a new section, can follow an <h4> as it closes the previous section.

  For more info

  Pixels are fixed sizes and don't scale well on different devices. Instead, use rem or em, which are relative units that adjust based on user settings, making your design more flexible, responsive, and accessible.

  Also instead of width, height try to use min or max-width/height

  Marked as helpful

  0

  ---

  

  Laura•30

  @Temiloluwa16Posted about 2 months ago

  Thank you for pointing these out. I’ve made the necessary adjustments. Please feel free to correct me if I make any mistakes in the future@KapteynUniverse

  0
• 

  Kalyan TR•40

  @tr-KalyanPosted about 2 months ago

  The code looks good and maintaining external css file is good. One thing I can suggest is use semantic tags such as <section> instead of <div> just for the outer part. Also, using flex box gives us more flexibility to alter the position of content.

  0

  ---

  

  Laura•30

  @Temiloluwa16Posted about 2 months ago

  Thank you for your review. Please how do i know when to use <section> instead of <div>? if you don't ming me asking@tr-Kalyan

  0