Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive using flexbox.

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'd really appreciate it if you could take a look and see if it's alright, point out mistakes and give me some feedback. I'm new to coding and I'd love to learn! Thank you!

Community feedback

PhoenixDev22 16,950

@PhoenixDev22

Posted

Hello

I have some suggestions regarding your solution:

  • 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 . add hover effect on them .

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

  • 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 element on hover as there is no reason to have the extra clutter in the html.

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

  • So you can use <ul> to wrap class="info" and in each <li> there would be <img> and <p> .

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

  • 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. It's recommended to use rem for font-size.

body {
    width:100vw;/* If you set a page width, choose ``100%`` over ``100vw ``to avoid surprise horizontal scrollbars.*/
    min-height: 100vh;/*using vh (viewport height) units allow the body to to grow taller if the content outgrows the visible page.*/

}
  • Using percentages % for width can cause issues , consider using max-width, That will let it shrink a little when it needs to.

General point : Nesting css selectors not a good thing . Really important to keep css specificity as low/flat as possible. 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.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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