Responsive card, CSS GRID, FLEX BOX, HTML

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted 8 months ago

  Hi I hope this is helpful

  1. There is no need for the wrapper div in this at all. The styles for centering the content can be placed on the body. The grid row should definitely not be 50px though! Was that meant to hold the challenge attribution? Because I can't work out what that row is being used for... If it was meant for the footer/attribution, it would break as soon as someone changed their text size or an author added more content to the footer. You don't actually need to define grid rows in this anywhere, or even use grid at all in this challenge. There will be much more suitable challenges later. Use the tools that are the best fit for the job you are doing at the time.
  2. It is better for performance to link fonts in the html head instead of css imports.
  3. You are using quite a few incorrect html elements in this. If you wanted to use an article it would need to be the whole card, not just some of it. The only heading in this is the blog title. Headings must be used appropriately. There should be no buttons at all. Always use meaningful elements for text, even if that's just a paragraph (text must never be in divs or spans alone). You may find it useful to read my post about planning out html even though it's specifically covering a different challenge: https://fedmentor.dev/posts/html-plan-product-preview/
  4. If you make a link open in a new window that is unexpected behaviour so screen reader users would have to be notified. That would mean adding Sr-only text that says (opens in a new tab) or similar. I don't think a blog card would open in a new tab at all though, that's a strange choice as blog cards would usually point to content on the same site.
  5. "Avatar" isn't great alt text in my opinion. Take a look at the post in the resources channel on discord about how to write good alt text.
  6. Get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good modern examples you can look up and use.
  7. The max width on the card must be in rem. There is no need for a calc either.
  8. If you're not using gap there is no benefit to making the card a flex column either. All the elements within it would stack vertically by default.
  9. The card image max width should be 100% not a px value. That would be part of a css reset anyway.
  10. The card button is not a button. It's just a tag describing the topic of the blog so would be a paragraph. It must not have a min or max width, only some padding.
  11. Your responsive gong sizes are currently inaccessible. You must convert the middle value to rem not viewport units only. Eg 1rem + 1vw.
  12. There is no need for a media query in this challenge. But in future challenges media queries must be in rem or em not px. See https://fedmentor.dev/posts/responsive-meaning/
  13. If the whole card is hover able that means it must be clickable. Do not just add a hover style to the card without adding the functionality it implies. To do this you would add a pseudo element on the heading link that covers the whole card.
  14. When you do small single component challenges like these remember to think about the context of where and how it would be used. This is extremely unlikely to serve as a page heading - it's just a little card that would sit lower on the page. That means it must not have a h1, but more likely need a h2.

  Marked as helpful

  0

  ---

  

  P

  Kristina•280

  @frontend-enPosted 8 months ago

  @grace-snow Thank you for your relevant and accurate comments.

  0