QR component using flexbox and custom properties

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 9 months ago

  Hello @Jo-with-vision!

  Your solution looks excellent!

  I have just one suggestion:

  • Use only <main> to wrap the main content instead of <div>, <main> and <article>.

  📌 The tag <article> would make more sense if the card was part of a bigger website (in certainly would in real world), but here it is all we have on the screen.

  Unless you used the three tags for a specific reason, there's no need to use all of them, considering that you can get the same result using only one. This helps you to reduce unnecessary code.

  This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  1

  ---

  

  Jo_WithVision•90

  @Jo-with-visionPosted 9 months ago

  Thank you so much @danielmrz-dev for reviewing my code!

  Yes, you are right that I probably unnecessarily used two semantic sectioning tags - <main> and <article>. I wasn't sure if I should pretend the component was a part of a larger website within a<main> section to show that I understood what a good use for the article element would be, or if that was not necessary!

  I see now that I could apply my card class to the <main> element, and remove the article, but I think I do still need my parent container/wrapper to center my card and the attribution on the page? Otherwise the attribution would inherit the card styling if it was inside the main and that was my only flexbox container?

  I will certainly play around with your suggestions, to see what the results are , thank you!

  0