Skip to content
Submitted over 2 years ago

NFT Preview Card - Flex Layout

Michael Waaler•230
@10high
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

Hi! My solution works, but I'm still trying to get my head around the principles of creating layouts, so, I'd specifically like feedback on best practices regarding that, if possible.

(Sorry in advance, because I haven't used Semantic HTML. That's my next goal :)

Thanks in advance!

Community feedback

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

    Hello @10high ,

    I have some suggestions regarding your solution:

    • Use <main> to wrap the body contentclass="wrapper" . HTML5 landmark elements are used to improve navigation .

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

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

    • The avatar 's alt should not be Creator Profile Picture , it's meaningless. you can set Jules Wyvern to it.

    • Read more how to write an alt text

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

    • It' better not to use <span> and div for meaningful content .

    • You can use an unordered list<ul> to wrap class="detailswrapper"and in each <li>, there would be <img > and<p> .

    • Use min-height: 100vh for the <body>

    
min-height: 100vh;/*using vh (viewport height) units to allow the body to set a minimum height value based upon the full height of the viewport. This also allows the body to to grow taller if the content outgrows the visible page.*/

    • In line-height: 2.1em;, use unitless value for the line-height , this is the preferred way to set line-height and avoid unexpected results due to inheritance.Read more in MDN.

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

    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
    Michael Waaler•230
    @10highPosted over 2 years ago

    Hi @PhoenixDev22

    Thanks a lot for the pointers. There's lots of useful stuff there that I've used for the next challenge I'm doing.

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

    If you want to reduce accessibility to change this code 😊

    <div class="wrapper"> to <main> ( Used main tag );

    I hope again you find this helpful

    0
  • Dev Rathore•2,600
    @GitHub-dev12345Posted over 2 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

    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