Qr Code Component Card with Semantic HTML

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace <article class="card"> with the main tag and <h4> with <h> to fix the accessibility issue. click here for more on web-accessibility and semantic html

  Every html must have <h1> to make it accessible. Always begin the heading of the html with <h1> tag wrap the sub-heading of <h1> in <h2> tag, wrap the sub-heading of <h2> in <h3> this continues until <h6>, never skip a level of a heading.

  To center .card on the page using grid add min-height: 100vh to the body and there is no need for the padding value in the body.

  USING GRID:
  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  Give the img a max-width of 100% for a responsive image.

  There is no need for margin-inline in .card_content. Give .card_content a margin value for all the sides, text-align: center and a font-size of 15px which is 0.9375rem, this will be the font-size of both p and h1.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  Zascu•140

  @ZascuOfficialPosted over 1 year ago

  First of all, thank you for responding and for the feedback!

  Second of all, I already used display grid and place items center on the body, but when I got to the smaller screen sizes, the card was touching the edges so I added some padding. I could have used a width and give it a percentage value.

  Also, I was not aware that every html needs a h1 tag. Thank you for bringing my attention to it! I will try to remember that moving forward with my projects.

  Lastly, I didn't use main on the card itself because I thought of it as a simple article element in a larger website, which could have been in a main element. (Oh, and I also gave the img element a max width of 100% but in a separate file called reset.css haha)

  Again, thanks a lot for taking time out of your day to give me feedback on my solution. Have a great day!

  0
• 

  Abdulqudus Sanusi•500

  @qudus2019Posted over 1 year ago

  Congratulations on your solution, Zascu

  You do not actually need the margin-inline property. The text-align: center is enough to keep the texts at the center and they will automatically shrink as the parent element's width reduced

  1

  ---

  

  Zascu•140

  @ZascuOfficialPosted over 1 year ago

  Thank you for the feedback!

  I used the margin-inline only because I saw that the paragraph and heading had a different width than the image in the given design. Now that I look at it, I could have used a width: 80%; or something similar and then center it with the margin-inline: auto;.

  Again, I appreciate you commenting on my solution. Have a good one!

  0

  

  Abdulqudus Sanusi•500

  @qudus2019Posted over 1 year ago

  @ZascuOfficial that is also a good solution. Cheers!!!

  0