Blog Preview card main

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted 7 months ago

  This has quite a lot of foundational issues. This makes me think you've not sought out or read feedback on earlier challenges?

  I'll try to list out some of the issues but you may need to go back and get feedback on earlier challenges first.

  • All content should be contained within landmarks. This is a single component demo that should sit within a main landmark. You shouldn't be changing any roles anywhere or placing a main inside the component. The attribution belongs in a footer landmark under the main.
  • Always include a full modern CSS reset like this at the start of the styles in every project you do. Amongst other things this will stop the image overflowing.
  • Never limit the height of elements that contain text. Almost the only time you'll ever set height and width is on small images or icons. It's the browser's job to decide how tall elements need to be based on the content and spacings inside them.
  • You don't need the container div in this.
  • All the component needs for it's size is a single max-width in rem.
  • The body is only as tall as its content by default. To center something in the viewport you'll need to make the body at least as tall as that viewport with min-height: 100svh and use flex column properties to center it's children.
  • Why have you used h3 for the heading? Is that intentional? (it's not necessarily wrong, I'm just checking you understand why heading levels matter. See https://fedmentor.dev/posts/heading-order/
  • This is missing the most important element in the whole component. This is a blog card. It has an important function of signposting (linking) to a blog, but you've not included a link! That needs to wrap the blog title text inside the heading.
  • To make the whole card clickable, add a pseudo element to that link. The card will need to be position relative and the pseudo will need to be positioned absolutely and cover the card so it's all clickable.
  • I think you're getting confused between padding and margin. The body/main and card in this should have padding on all sides. The child elements within the card should have vertical margins. See https://fedmentor.dev/posts/padding-margin/

  23

  Marked as helpful