Submitted almost 3 years ago

NFT Preview Page with CSS and HTML

Anna Karina Angelim•20

@akarinaa

Preview site View code

This is a solution for...NFT preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Community feedback

Anosha Ahmed•9,300
@anoshaahmedPosted almost 3 years ago
To get rid of the accessibility/HTML issues shown in your Report:

wrap everything in your body in <main> OR use semantic tags OR give role="" to the direct children of your <body> ... Click here to read more

have at least one <h1> in your code

<section> and <article> usually need a heading; so if you don't need a heading in it, use some other element such as <div>

Good job! :)
Marked as helpful
1
Anna Karina Angelim•20
@akarinaaPosted almost 3 years ago
@anoshaahmed thanks for the tips!
1

Aakash Verma•6,710

@skyv26Posted almost 3 years ago

Hi!

To solve accessibility issues:

1.start your headings with <h1> and move up by one level each time

Change your code

FROM

<div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
    Coded by <a href="https://www.frontendmentor.io/profile/akarinaa">Karina Angelim</a>.
  </div>

<footer class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" aria-label="challenged by">Frontend Mentor</a>.
    Coded by <a href="https://www.frontendmentor.io/profile/akarinaa" aria-label="developer name">Karina Angelim</a>.
  </footer>

Happy New Year ;)

Marked as helpful

Anna Karina Angelim•20

@akarinaaPosted almost 3 years ago

@skyv26 thanks for the help! I'll implement these changes :)

Please log in to post a comment

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