Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT HTML CSS

Cíntia 10

@cintiamoreira

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


My first project.

Community feedback

Nam HaÏ 820

@Nam-Hai

Posted

Avoid giving % value to width or height. Here you used vw which is basicaly the same. Some time it has its use but when you can avoid it, avoid it. Give your container fix width. You can then use max-width and give a % value for responsivness.

Give alt value to img, this is important for accessibility if there is bug and the img doesn't load.

The separator should be a border-top or <hr> in html.

Giving height value to the main container is useless, and even counter productive. Indeed, if you don't set the height value, the main container will have the same height as its content. (this would work if <div class="row"> was not in <div class="line"

Marked as helpful

1

Cíntia 10

@cintiamoreira

Posted

@Nam-Hai Avoid giving % value to width or height, are you referring to the .card class or the entire code?

0
Nam HaÏ 820

@Nam-Hai

Posted

@cintiamoreira Yeah the card component.

Indeed, if the component has fix width, it makes sense to give % width to the things inside Giving component % width just creat too much pain at the end of the day. Try to avoid it, this does not mean you should never use it, even for component. Just a good habit to pause and think if it is a good idea

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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