Blog-preview-card HTML5 & CSS3

Community feedback

• 

  P

  Artiom•120

  @Artiom-Deyev

  Posted over 1 year ago

  • The solution includes semantic HTML.
  • Accessibility seems fine to me.
  • I would suggest that position the main block absolutely in the center by applying:

  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

  is maybe not the best idea, as at narrower screen width (starting at around 440px) could be still wider. However, this is also a valid solution.

  Also, no media queries in the project, however, the design changes (especially the fonts) at a mobile breakpoint.

  • The code is well structured, I appreciate the use of variables in css. In main html file maybe gaps between the blocks and comments would help the readability of the code, but overall it's good.

  • I noticed that the block is slightly wider then in the design - which is understandable, since a different width in the design is provided. I did this too. The icon portrait of the author is smaller in the design.

  00