Skip to content
Submitted almost 3 years ago

"I might not be a pixel perfect, but I'm still adorable!"

Skippy•110
@skippysworld
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

With my second challenge I've decided to create it with a responsive units as much as possible (such as ems, rems and %s). Soon I've realized that ems are a little confusing to me right now and I went mostly with rems and percents. If I knew how hard time I'll have figuring out that image hover before, I'd let responsive units untouched... :-D

Anyway, is that solution - especially of image hover - let's say.. Alright?

Community feedback

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

    Hello @skippysworld,

    I have some suggestions regarding your solution:

    -First of all, you are mis using <section> tag , section is for a bigger chunk of content often titled by <h2>.

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

    • 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:true or role presentation with empty alt

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

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

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

    • Never start with “Image of …” or “Picture of …” It’s going to be obvious to either a person or a machine when something they're accessing is alt text. it should be only Jules Wyvern .

    • Tips for writing 'good' alt text.

    • You can use an unordered list<ul> to wrap ` class="description__details" and in each <li>, there would be <img > and<p> (to wrap the text).

    • never use <span>'s for meaningful content ,

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

    • To center the card on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body>(remove position absolute )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.

    A general point - try to put classes directly on anything you want to style.

    Overall your solution is good , Hopefully this feedback helps.

    Marked as helpful
    1
    Skippy•110
    @skippysworldPosted almost 3 years ago

    @PhoenixDev22 O M G.. Honestly, did not expect such reply, thanks! I’ll need to get a good sleep to read your comment again with a fresh head though :)

    But one thing is on my mind right now - I did apply the flex property on <body> at first, but changed my mind later when I got to footer that I wanted to put at the end of the page. I know the positioning using percents isn’t the best solution, but… I was not able to find out how to keep the card in the middle of everything and let the footer rest at the bottom of the page. Since “flex- direction” is column “align-items” doesn’t work and “justify-content: flex-end” is ignored (Information from MDN).

    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