Blog Preview Card

Community feedback

• 

  Grego•1,430

  @Grego14

  Posted about 1 year ago

  Hello! I have been reading your HTML code and here I leave you some recommendations to make your code more semantic.

  You are using a <summary> element to create a "tag" or a button, and that is not what that element is used for, here is a link for you to read more about it Summary

  Now I would replace that <aside> element with a <span> or a <p> element.

  And for the text below I recommend using a <p> element again and not a <section>

  You can use a <span> element in the Greg Hooper text.

  summary{
    padding-left: 13px;
    padding-right: 13px;
    padding-bottom: 5px;
    padding-top: 5px;
  }
  

  In this case it is not necessary to place the padding 4 times since the top and bottom are the same value and the right and left are the same.

  summary{
    padding: 5px 13px;
  }
  

  The first value would be for top and bottom and the second for right and left.

  I also recommend changing the height in that media query:

  @media only screen and (max-width: 375px) {
    .box{
      /* height: 65%; */
      min-height: 65%;
    }
  }
  

  Since it can cause overflow on smaller screens. But for that to work you must also change the height that you placed on the .box element from the beginning.

  .box{
    /* height: 520px; */
    min-height: 520px;
  }
  

  This way you make sure that the height of the element is 520px but also that it can increase if necessary.

  I hope this helps!

  11

  Marked as helpful
• 

  Bryan Li•3,530

  @Zy8712

  Posted about 1 year ago

  Hi there! Your site looks pretty good.

  Some things I would recommend you to change/modify with your code:

  • you should use a heading tag like <h1> for the title of the card and you should also use a <p> paragraph tag for the text of the card. This is primarily for semantic and accessibility purpsoes
  • for <img> tags you can leave the alt decription empty like alt="" as descriptions are mainly used for images that convey some important information. So decorative images can be left empty

  Aside from these two things, you've got solid code structure 👍

  11

  Marked as helpful