QR Component code

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted almost 2 years ago

  Hello

  A few more tips

  • the alt text needs to say what the image is and in this case what url it goes to
  • why have you used a h3 for the heading?
  • you must use min-height 100vh not height. Never limit height of elements that contain content. This currently gets cut off on mobile landscape and that is the cause
  • you must use landmark elements. Every page would minimally have a main element
  • remove the margin top from the card
  • you don’t need any flex properties or height auto on the card. Elements stack vertically by default

  Overall I recommend you don’t use tailwind this early while learning. It is holding you back a bit. Instead focus on learning css yourself. Once you have good foundational practices with html and css built up, you’ll be able to pick up tailwind later within minutes

  1

  ---

  

  Ammar•50

  @mahassanPosted almost 2 years ago

  @grace-snow Thank you for your valuable feedback. I used h3 to make the heading to the size it was in as per the design, though I could control the font-size using h1

  0

  

  T

  Grace•31,230

  @grace-snowPosted almost 2 years ago

  @mahassan heading levels are NOTHING to do with styling. You can set any element to be any size you want. Headings are extremely important elements that communicate the structure of a page. They must be used appropriately and in the correct order, never skipping a level

  It may be fine using a h3. But the reason I ask is because this is a single component challenge (not a full Web page) and I'm trying to understand if you have made a conscious decision there.

  Ie I would say "if this page was used on a Web page, there would already be a h1 for the page and a h2 for the section heading a load of these cards".

  If that's not where you think the component would be used, it should be a h2.

  The point is do not choose heading level because of some arbitrary size you want in the design. Styling and semantics are separate concerns

  Marked as helpful

  0

  

  Ammar•50

  @mahassanPosted almost 2 years ago

  @grace-snow so what you mean is that I should have used h1 and then controlled its size from CSS because if I used h3, that means there must be h1 or h2 somewhere on the page?

  0

  

  T

  Grace•31,230

  @grace-snowPosted almost 2 years ago

  @mahassan if it was a whole Web page then yes.

  As this is a single component, it's fine for it to be a h3 as long as you are aware that it would need to include a h1 and h2 above it if used on a real webpage

  Marked as helpful

  1

  

  Ammar•50

  @mahassanPosted almost 2 years ago

  @grace-snow Thank you for your strong points

  0
• 

  Nelson•2,390

  @nelsonleonePosted almost 2 years ago

  This comment was deleted almost 2 years ago

  1

  ---

  

  T

  Grace•31,230

  @grace-snowPosted almost 2 years ago

  @nelsonleone never use width 100vw anywhere. That will cause overflow bugs because viewport units don’t account for scrollbars, so a horizontal scrollbar will appear. You are effectively saying “make this 100% wide PLUS the width of any scrollbar and device notches.

  The body is already full width so this is unnecessary anyway

  0
• 

  Rodolfo campos•70

  @Rodolfo-ssPosted almost 2 years ago

  Oi blz, use o text-align para centralizar seu texto, aumente o margin e o padding que fica joia. Tudo de bom :)

  0

  ---

  

  Ammar•50

  @mahassanPosted almost 2 years ago

  @Rodolfo-ss Sorry I did not understand.

  0