Design comparison
Community feedback
- @anthonyplicataPosted about 1 year ago
Looks great! And you nailed the centering of the card which I definitely struggled with when I first got here.
If you chose to use the h2 tag for difference in size compared to h1 I would suggest sticking with the h1 tag since there are no other headings. Use CSS to style the text the way you want it. It's more so technically correct but also allows for screen readers to properly read the markup. As for using <header> and <main> I'd say this challenge doesn't have a real header other than maybe the qr code image? But you could put the text contents inside of a main tag to make it more accessible!
The "Challenge by..." text is footer content. So you could take .attribution and change it from a div to footer and take it out of that section container. You could go even further with accessibility and place the text inside a <small> tag inside the <footer>. It will shrink the font size a little but it will also tell the assistive tech that it's small footer content.
Marked as helpful0@daniel-ribasPosted about 1 year ago@anthonyplicata wow, thanks for the advises! :D
0
Please log in to post a comment
Log in with GitHubJoin 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