blog post

Community feedback

• 

  P

  Kamran Kiani•2,740

  @kaamiikPosted about 1 month ago

  Hi. I have some notes for your code:

  HTML Structure

  • Use a proper title in your head of html like Blog Preview Card.

  • Add your fonts locally with font-face on CSS or with link tag on your html head.

  • You need a proper HTML structure. After your main, first wrap all of your code into the div with something like .container class and add a box-shadow and max-width and other properties that is needed. You don't need a <div class="shadow"></div> for shadow.

  ---

  Text Elements and Semantics

  • The <h1> has hover effect so you should wrap it inside a a tag too. You can do it like this:

    <h1>
      <a>...</a>
    </h1>
    

  ---

  CSS Best Practices

  • Start with a proper CSS reset (Andy Bell or Josh Comeau resets are recommended)
  • Avoid fixed widths:
    • Remove width: 400px from main
    • Use max-width for better text container adaptability
    • Remove unnecessary width: 100px; and use padding instead
  • Use relative units:
    • rem for font-size and max-width instead of px
    • Learn more about this here

  Marked as helpful

  0

  ---

  

  faruqshehu•280

  @faruqshehuPosted about 1 month ago

  @kaamiik thanks man, i appreciate your feedback, i had challenges with box-shadow and tried something like which you are suggesting but didn't work, hence the reason i result into using this method. but will try this again. thanks once again.

  0