Blog preview card

Community feedback

• 

  sofiasmnk•110

  @sofiasmnkPosted about 1 month ago

  The font-sizes aren't responsive to the screen width. You could try to use vw as a unit when defining font-size so that it's proportional to the screen, just define a max and min value so that it doesn't spiral out of control in very large or very tiny screens.

  Additionally, I'm not sure why the quote-text class has its font-size set to small when it's the one element in the original design that uses the default paragraph size (on the Figma file it's 16px on desktop and 14px on mobile, while the smaller text elements are 14px on desktop and 12px on mobile). The title/heading isn't a link and doesn't have a hover state (in Figma, the text turns yellow on hover).

  Accessibility-wise, the alt-text on the images is just the file name without the extension, which doesn't really describe them. You should either properly describe them if they're important to understanding the page, or leave the alt-text blank (alt="") so that they're ignored by screenreaders if they're only decorative.

  I'm not sure why the media query sets a max-width for the quote-text instead of letting it fill the card, since the card's width was already set. Maybe the goal was to make the lines of text break the way they did in the design / preview image? It might not've been breaking exactly the same due to the font-size being smaller. But it's probably preferable to let the text break differently than set an arbitrary fixed width.

  I would reconsider the learning-container class name. The text in this example says "Learning", but supposedly that's the category of the blog post and other blog posts in this hypothetical website would have different text there. It would make more sense to either name it something like category-container or give it a name that just describes it more visibly so it can also be used for other elements sharing this style (maybe something like chip-primary or tag-primary?)

  0