Blog preview card

Community feedback

• 

  P

  Rupali•890

  @rupali317

  Posted 6 months ago

  Your solution is using rem for font-sizes, which is great for scaling. You have incorporated an animation on the hover state by having a duration of 0.2s. You have a good understanding of the flexbox

  I would like to suggest the following improvements:

  • To make the HTML more semantic, use <time> element instead of the <p> for the date. <p> element is more suitable for paragraphs, which normally spans across at least 2 lines. Similarly, the author's name can be represented as <span> instead of <p>
  • Another observation is that you have used <h3>. Normally, assistive technology would expect a <h1> tag to understand the flow of the document. What I would do is have an <h1 class="visually-hidden">Blogs</h1> and then wrap the HTML & CSS foundations under <h2> element. You need to write the CSS definition for visually-hidden class. You can refer to visually-hidden CSS definition Reasoning: The hidden <h1> will ofcourse be hidden for users but an assistive technology will read it out and will convey the structure of the page to users who rely on assistive technology, thus enhancing their user experience. The reason for using <h2> instead of <h3> is because in accessibility checks, one should avoid skipping heading levels.
  • In your CSS, you have defined the color definition under :root. You can define other properties like font sizes, line heights, spacings, border radius as well. You can refer to CSS Definitons under root
  • I tested your solution on my mobile and on the landscape mode, the layout breaks. The attribution appears in the middle. You should modify the CSS definition of the body element. You should change to min-height:100vh instead of height:100vh. Then you should apply a gap to have a space between the card and the attribution. Also, you do not have to use display:grid on the body. A simple display:flex should be enough instead since flexbox is appropriate for one dimensional view. Grids can be handy for 2-dimensional layout, which is not the case here.
  • In your CSS, avoid font-size: 62.5%; under html in your CSS. Refer to this article Should I change the default HTML font-size to 62.5%?

  00

  Marked as helpful