blog-card

Community feedback

• 

  P

  tediko•6,680

  @tedikoPosted 8 months ago

  Hi Daniel!

  You did great! Here are some tips from me:

  • By default all web browsers apply a certain amount of default styling to HTML documents eg. h1 are larger that h3, links are blue and underlined etc. These browser defaults don't go away when you add your custom stylesheet to a document. Reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on by using CSS Reset (e.g by Andy Bell)
  • Now that you added some CSS Reset your body element doesn't have default margin so your .card stick to screen edges on mobile screen size devices. Add padding: 1rem or so to your body.
  • Change body to take min-height: 100vh. 100vh means that the initial body height will take 100% of the viewport height, whereas the use of min-height instead of height will let the body element grow even more if necessary.
  • Your document lacks landmarks. Landmarks are a group of HTML tags and roles that define different subsections of a website and help navigate through a website. Your .card container should be <main> element.
  • Since .article-img is decorative and decorative images do not need to be announced by the screen reader, leave the alt attribute empty alt="" so it will not be announced to the user.
  • Text should never be in div or span elements alone. Always use a meaningful element. Change .label div and .user-info span to paragraph (<p>) element.
  • Your page is lacking <h1> element. h1 represent the main heading/subject for the whole app. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on. Either switch your .card h2 to h1 or you can add h1 element for your app and hide it with .sr-only class since your app doesn't have title.

  Happy coding!

  Marked as helpful

  0