Skip to content
Submitted almost 3 years ago

NFT Preview Card Component Challenge Hub

Muhammad Naufal Farras•270
@naufalf25
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

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted almost 3 years ago

    Hello @naufalf25,

    I have some suggestions regarding your solution:

    • There should be two landmark components as children of the body element - a main (which will be the NFT card ) and a footer (which will be the attribution).<Footer> should not be in the <main >. HTML5 landmark elements are used to improve navigation .

    • it's invalid html to wrap a heading element in an anchor tag. Swap those around so the anchor is inside the heading. It would be : <h1><a href="#">Equilibrium #3429</a> </h1>

    • 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.

    • I would use pseudo-elements to change the teal bg color to a hsla. Then opacity can be changed from 0 to 1 on the pseudo on hover as there is no reason to have the extra clutter in the html.

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

    • The avatar's alt shouldn't be avatar , you can use Jules Wyvern for it.

    • the link should be wrapping the main image and either have Sr-only text, an aria-label or alt text that says where that link takes you.

    • Images must have an alternate text in <img src="images/icon-clock.svg">

    • For any decorative images, each img tag should have empty alt="" 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 ).

    • Read more how to write an alt text

    • No need for all this <div class="line"><hr></div>, you can simply use border-top for class="card--author" .

    • Give the image display: block ; that removes the issue of the teal bg .

    • To center the card on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body> no need for position absolute , like this :

    body{
display:flex;
align-items: center;
justify-content: center;
width: 100%; 
min-height: 100vh;/*using vh (viewport height) units allows the body to to grow taller if the content outgrows the visible page.*/

    -width: 300px;an explicit width is not a good way . Remove the width from the main component and change it to max width instead. That will let it shrink a little when it needs to.

    • height: 510px; 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: nesting css selectors not a good thing . Really important to keep css specificity as low/flat as possible.

    • I recommend not to style on ID'S . The best way to do that is single class selectors

    You might have a look at my solution , to see how I did the hover effect on the image , it might my helps.

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

    Marked as helpful
    1
    Muhammad Naufal Farras•270
    @naufalf25Posted almost 3 years ago

    @PhoenixDev22 Thank you for your feedback for my solution. I will try to resolve the problem from my solution following your feedback.

    1
  • Naveen Gumaste•10,480
    @NaveenGumastePosted almost 3 years ago

    Hello Muhammad Naufal Farras ! Congo 👏 on completing this challenge

    Let's look at some of your issues, shall we:

    • Warp your card content around the main tag Ex: 👇
    <body>
<main class="container">
*all you content here*
</main>
</body>
    • Always use the "alt attribute" and write what img is , and if the img is for decorative then leave it empty but always add it with img tag.

    happy Coding😀

    1
    Muhammad Naufal Farras•270
    @naufalf25Posted almost 3 years ago

    @Crazimonk Thanks for your feedback too. I just started learning web development, I still need more to learn about web development :D

    1
  • Dev Rathore•2,600
    @GitHub-dev12345Posted almost 3 years ago

    Congratulation to complete the challenge ❤️👍 My small suggestion : 1.In Card design CSS Code Used this:

    transform : scale(0.8); this property decrease the size of card. 😉

    large size for increase the number of scale & small size for decrease the number of scale

    I hope you find this helpful

    1
    Muhammad Naufal Farras•270
    @naufalf25Posted almost 3 years ago

    @GitHub-dev12345 Thanks for your feedback :D

    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