Skip to content
Submitted almost 2 years ago

Card using flexbox and hover effect

ragilbuaj•50
@ragilbuaj
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Open to any advice, thanks

Community feedback

  • Adriano•38,390
    @AdrianoEscarabotePosted almost 2 years ago

    Hi ragilbuaj, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

    As you know this project is based only on one page component, so no h1 is needed! because we don't know if this page will have a more important component, but it's always good to prevent accessibility errors so I think it would be good for you to add an h1 in this component, besides being a good practice for when you are developing larger sites, don't worry forget about h1.

    <h1>Equilibrium #3429</h1>

    We have to make sure that all the content is contained in a reference region, designated with HTML5 reference elements.

    native HTML5 reference elements:

    <body>
    <header>This is the header</header>
    <nav>This is the nav</nav>
    <main>This is the main</main>
    <footer>This is the footer</footer>
</body>

    The rest is great!

    I hope it helps... 👍

    Marked as helpful
    1
  • Sinisa Vukmirovic•1,690
    @SinisaVukmirovicPosted almost 2 years ago

    Hello!

    More semantic elements in your HTML. Warnings in your report are mostly about that.

    More about semantic HTML5 elements

    This - "Document should have one main landmark" means one <main> semantic element. Landmark just means HTML5 semantic element.

    This - "Page should contain a level-one heading" means you are missing <h1> element in your page. Level one heading is <h1> tag element.

    More about headings

    This - "All page content should be contained by landmarks" means that all elements(DIVs) should be inside of those semantic HTML5 elements, not directly in your body element.

    Read it, try it, hope it helps!

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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