Blog Preview Card

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted 11 months ago

  Hi, I hope this feedback helps

  1. never have text in spans or divs alone, use meaningful elements like paragraphs
  2. this is missing it's heading element
  3. it is really bad for performance to use css imports as you are doing now. Thats forcing the browser to start downloading an asset, then have to go looking for another one, then another one, then... Etc. If you want to break css down into partials, use scss instead.
  4. always use a modern css reset at the start of the styles. Look them up
  5. NEVER ever write font size in px. That's extremely important. That one line of css immediately makes your site inaccessible. Line height must also never be in px. https://fedmentor.dev/posts/font-size-px/
  6. you will never want to use 100vw anywhere. That can only cause overflow bugs. Viewport units don't account for scrollbars, so 100vw actually means "full width PLUS the width of a scrollbar", often resulting in horizontal scroll which you won't want. The body is already full width by default so there is no need
  7. instead of height 100vh on the body use min-height so it can extend beyond that limit when needed
  8. don't position the footer absolutely. It is overlapping other content on my phone. Let it sit below your component
  9. there is no need for whitespace no wrap on the footer. Once the font sizing is fixed all that will do is cause bugs
  10. on the component set max width in rem not px so it is properly responsive for all users no matter their font size
  11. on the component do not set a max height or height at all. This is very important. Never limit the height of text containing elements. If I change my font size or a content editor changes the about of text the card will break if it's had it's height limited like that. Never do it. Let the browser do it's job and decide the height as needed
  12. there shouldn't be any other widths or heights or even max widths in this either. The css reset would set img elements to display block and max-width 100%. The only other width or height you'd need in this is on the avatar image.
  13. there is an anchor tag missing in this card if it is meant to be clickable. Never set cursor pointer to anything that isn't interactive. You need to use the correct elements. If you want to make the whole card clickable look up the "inclusive components" site and there is a good post about how to do that

  Marked as helpful

  0

  ---

  

  Flávio César•340

  @flaviocmbPosted 11 months ago

  @grace-snow

  Thank you so much Grace. I will try my best to address all 13 issues. Can I send you a message after that? (i don't even know if I can message back)

  1

  

  Flávio César•340

  @flaviocmbPosted 11 months ago

  @grace-snow

  Learned a lot from all 13 issues.

  About the issue #9. nowrap is used to prevent breakdown whitespaces between names. Example <span class="s-nowrap">Flávio César Bezerra</span>

  About the issue #12. I am pretty sure that the aspect-ratio is wrong from the design of Frontend Mentor. The code below should run smoothly in any settings of screens and/or fonts.

  img { object-fit: cover; border-radius: 10px; width: 100%; /* width: 279px */ height: 12.5rem; /* height: 200px */ }

  @media screen and (min-width: [as you wish]) { img { width: 100%; /* 336px */ height: auto; /* 201px */ } }

  I will leave this very important article about img convention from MDN

  0