Submitted almost 3 years ago

QR Code Component

Luis•270

@luibernip

A solution to the QR code component challenge

Preview Code

Solution retrospective

Hello Community,

Thank you for visiting my solution. I have 1 question:

What is the correct semantic to add this component? I used a <div> with class name card, but I don't know if <main>, <article>, <section> or any other should be the ones to use.

Have a great day! :)

Code

Please log in to post a comment

Community feedback

Account deletedPosted almost 3 years ago
Hi @luibernip, Congratulations on completing the challenge
- <main> specifies the main content of a document
- <article> specifies independent, self-contained content
- <section> defines a section in a document
Personally I think using <section> has more semantic value than <div>

Here's my solution:

https://www.frontendmentor.io/solutions/responsive-qr-code-component-BYV2hQddLr
Marked as helpful
Alex Licata•90
@BadLice
Posted almost 3 years ago
Hi Luis, Great solution!

To answer your question, i wuould suggest to use <main> because the card is actually the main block of content of this page.

Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/centered-qr-code-card-GgYCj5Q0MH

I hope it helps!

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord