HTML CSS

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted over 1 year ago

  I tried to preview this but the text is unreadably pale when I view on mobile. I think you need to check the colors you're using!

  Here's other feedback

  1. the use of landmarks is very muddled in this. The wrapper div should be a main, the main should be a div or article or section (whatever you prefer there are no benefits to any of them in particular). There should be no extra article inside the card wrapping only the text content.
  2. The image is the most important content on the page. That means it needs a properly written alt description. That needs to say what it is (QR code) and where it goes (to FrontendMentor.io). There is a good post in the resources channel on discord about how to write good alt text. Remember it is content readable by site users, it's not "code".
  3. When doing single component challenges like these remember to think about the context of where this is going to be used. This kind of card would never act as a page title. That tells you the heading level cannot be h1.
  4. It's better for performance to link fonts in the html head instead of css imports.
  5. 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 ones you can look up and use.
  6. This really is only a simple card with a few basic styles. There's no need for things like position relative and z-index. Strip out anything you don't need in the styles.
  7. There is no benefit to making the card a flex column unless you want to use the gap property for vertical spacing between it's children. All of the elements in this challenge stack by default so again the flex column properties could be removed.
  8. There should be no explicit widths or heights in this challenge. Remove them all. The card component only needs a single max width in rem. The image only needs display block and max-width 100% (and width 100% if you want).
  9. Font size must never be in px. Extremely important!
  10. There is no need for a media query in this challenge. But if you need them in future remember to always define media queries in rem or em not px
  11. The card should have padding on all sides. Make sure you understand the difference between padding and margin (there's another post about that on FEDmentor.dev).
  12. Make sure the component cannot touch the screen edges. That means either a wrapping element like body in this case can have a little padding on all sides or the component itself can have a little margin on all sides.

  00

  Marked as helpful
• 

  Mahesh Ulpi•20

  @UlpiMahesh

  Posted over 1 year ago

  N/A

  01