Skip to content
Submitted almost 3 years ago

Nft component solution

PureLmnz•40
@PureLmnz
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

Hey all, so this is my NFT component solution, and it is only my 2nd challenge so far, which is quite similar to the first... but i only spent a little over an hour on this one and i know it isnt exactly perfect, but would love and encourage all tips and best practices for my current skillset as i am passionate about scaling my abilities and knowledge, thanks a bunch!

-PL

Community feedback

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

    Hello @PureLmnz ,

    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 component) and a footer (which will be the attribution).the <footer> should be outside the <main> .

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

    • don't usespanor div's for meaningful content. like in here ` <div> Creation of Christopher Shelton

      </div>` 
        <h1 class="container-h1" ><a href="#">Equilibrium #3429</a></h1>
:
:
/*  Some images are missing .  */
    <ul class="list">
        <li class="eth"> 
                <img src="..." alt ="" aria-hidden="true"> <p>0.041 ETH </p>
        </li>
        <li class="days">
               <img src="..." alt ="" aria-hidden="true">  <p>3 days left </p>
        </li>
      </ul>

     <div class="">
          <p> Creation of <a href="#"> Christopher Shelton</a></p>
      </div>

    • 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-clock.svg, /icon-ethereum.svg", icon-view.svg).

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

    • No need for <hr/> , you can use border-top to the avatar's part.

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

    body {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
}

    • an explicit width is not a good way . Remove the width from the card component and change it to max width instead. That will let it shrink a little when it needs to.

    • Never use px for font-size.

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

    I would suggest to check @vanzasetia solution and read the read me file to have an idea how to set the hover effect on the image

    Hopefully this feedback helps.

    Marked as helpful
    2
  • Naveen Gumaste•10,480
    @NaveenGumastePosted almost 3 years ago

    Hay ! PureLmnz Good Job on challenge

    These below mentioned tricks will help you remove any Accessibility Issues

    -> Add Main tag after body <main class="container"></main>

    -> Learn more on accessibility issues

    If this comment helps you then pls mark it as helpful!

    Have a good day and keep coding 👍!

    Marked as helpful
    1
  • ayushbhargava22•160
    @ayushbhargava22Posted almost 3 years ago

    Try to Improve the css and positon The font color and font size is not in match with styleguide

    Marked as helpful
    1

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