Submitted almost 2 years ago

Card using flexbox and hover effect

ragilbuaj• 50

@ragilbuaj

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Open to any advice, thanks

Community feedback

Adriano• 34,090

@AdrianoEscarabote

Posted 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

Sinisa Vukmirovic• 1,690

@SinisaVukmirovic

Posted 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

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