Skip to content
Submitted over 2 years ago

Nft card component - challenge - Flexbox and some inspiration

Francisco Prado•80
@franciscoprado4
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

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.

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted over 2 years ago

    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
    2
    Francisco Prado•80
    @franciscoprado4Posted over 2 years ago

    @PhoenixDev22 Thank you a lot, i just was starting and didn't know a lot of stuff. This challenge was made a month ago, but surelly i will use your recomendations. It´s weird that i never saw your answer till now.

    0

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