Skip to content
Submitted over 3 years ago

Nft card component - challenge - Flexbox and some inspiration

Francisco Prado•80
@franciscoprado4
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What did you find difficult while building the project?

  • Overall it was a bit easy , but implementing the sizes of the challenge.
  • matching the margins a padding of the contest.
  • Finding the right sizes of everything (text, images, etc).

Which areas of your code are you unsure of?

  • Responsive desing and accesibility
  • Best practices, i thing some times i create a lot of useless code but is simple a thought.

Do you have any questions about best practices?

  • I thing i will be improving by try and error, and feedback of the community.
Code

Please log in to post a comment

Log in

Community feedback

  • PhoenixDev22•16,830
    @PhoenixDev22

    Hello Francisco Prado,

    Great work on completing this frontend mentor challenge.

    I have some suggestions regarding your solution:

    • Use main landmark to wrap the <body> content (which will be the NFT card )HTML5 landmark elements are used to improve navigation .

    • Anything with a hover style in design means it's interactive. you need to add an interactive element <a> around the image and Equilibrium #3429 and Jules Wyvern.

    • For any decorative images, each img tag should have empty alt="" as you did and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in( icon-view, icon-ethereum, icon-clock ).

    • The avatar's alt should not be avatar, It's meaningless. You can use the creator's name Jules Wyvern. Read more how to write an alt text

    • look up a bit more about how and when to write alt text on images. Learn the differences with decorative/meaningless images vs important content

    • The icon-view doesn't really need to be in the html, you could do it with css. If you want it to stay in html it needs to be aria-hidden or role presentation with empty alt.

    • There are so many ways to add the hover effect on the image , The one I would use, using pseudo-elements to change the teal bg color to a hsla. Then opacity can be changed from 0 to 1 on the pseudo element on hover as there is no reason to have the extra clutter in the html.

    The link wrapping the equilibrium image should either have Sr-only text, an aria-label or alt text that says where that link takes you.

    • Never use <div> alone for wrapping meaningful content , As a "pure" container, the <div> element does not inherently represent anything. The <div> element should be used only when no other semantic element.

    • To use more semantic tags , you can use <ul> to wrap class="text flex"and in each <li> there would be<img>and <p>.

    • The same for his , it might look<p>Creation of <a href="#" class="blue-hover">Jules Wyvern</a></p>

    You can use <figure> and <figcaption > for the avatar's part.

    • For future , If you set a page width, choose 100% over 100vw to avoid surprise horizontal scrollbars.

    To center the card on the page, you may use flex or grid properties to the body and min-height: 100vh . Then you can add a little padding to the body,

    • Consider using min-height: 100vh; instead of height: 100vh to the body allows the body to set a minimum height value based upon the full height of the viewport also allows the body to to grow taller if the content outgrows the visible page.

    • width: 350px;an explicit width is not a good way . consider using max-width to card instead and a little margin to the card .That will let it shrink a little when it needs to.

    • height: 90% It's rarely ever a good practice to set heights on elements . Let the content inside the card element dictate the height of it.

    General point:

    • It's recommended to use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs.

    Overall , your solution is good. Hopefully this feedback helps.

    Marked as helpful

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