Frontend Mentor | Fixed NFT-Card only HTML and CSS. coding challenge solution

Community feedback

@Akhlak-Hossain-Jim

Posted over 2 years ago

First of all good work.

Then for solving accessibility issue, instead of using:

<div class="main_container"> Use <main class="main_container"> In the .main_container instead of using height to 100vh add min-height of 100vh. So on the mobile screen, we can see the full card.

Marked as helpful

Emanuel Hmar• 40

@codderhmar

Posted over 2 years ago

@Akhlak-Hossain-Jim Thanks this min-height i've never heard of it. Now it will help me lots in my projects. Thank You very much.

Macdeesh• 610

@macdeesh

Posted over 2 years ago

Hello Emanuel Hmar,

You need to make some change in the HTML:

1- Your <head> element is missing a required instance, so you must add a <title>.

2- I would recommend using h1 instead of h2, your page should contain a level-one heading.

3- Think about when you use the Web. What do you expect when you see a hover effect? You know something is clickable, right? That means it's an interactive element. Every place you see a hover style, you need to include an interactive element, like an anchor tag or button. So you should wrap the Equilibrium image and the other elements with an anchor tag. That is essential to fix.

4- I would do the hover effect on this using pseudo-elements rather than adding extra in the HTML, but that's not essential. Also, for the other SVG icons you can put it inside pseudo-elements like ::before or ::after, as the icons are all decorative.

5- Font size should never be in px, always rem (or rarely em when you want it to inherit from a parent)

Emanuel Hmar• 40

@codderhmar

Posted over 2 years ago

@macdeesh Thanks for the comment. I'll try to improve in the next challenge. I always use rem o rem unit in my other project. But this project is a fixed element so for fixed project some one told me to use px rather than em or rem which are responsive properties. So im gonna need help in my next project. Thanks i'll keep in mind. Thank you very much.

Fixed NFT-Card only HTML and CSS.

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community