NFT preview card using flex

Community feedback

• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted over 2 years ago

  Hello codie123 ! Congo 👏 on completing this challenge

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

  • Always use h1 first and then h2, h3 and so on

  • add Font-weight for the "Eth" and number

  happy Coding😀

  Marked as helpful

  0
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello @Codie123,

  Congratulation on completing frontend mentor challenge.

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

  • <svg> 's do not add important information to a document should be considered decorative. You can use aria-hidden="true" to hide the SVG from screen readers. focusable="false" is also used to ensure Internet Explorer won’t allow the Tab key to navigate into the SVG.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.

  • There are so many ways to add the hover effect on the image , The one I would use , using 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 the hover as there is no reason to have the extra clutter in the html.

  • The avatar's alt should not be "user-profile ". It's meaningless , you can use Jules Wyvern. 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.

  • No need for <hr>, you can use border-top: to the avatar part class="user-details".

  • I wouldn't use a header, <p> instead for this <p class="creator-details">Creation of <a href="#" class="">Jules Wyvern</a ></p>.

  • For the avatar's part , you would use <figure> and <figcaption>.

  • using min-height: 100vh instead of height: 100%;allows the body to to grow taller if the content outgrows the visible page.

  • width: 270px;an explicit width is not a good way . consider using max-width to card instead and a little margin to the card .That will let it shrink a little when it needs to.

  • height: 478px;It's rarely ever a good practice to set heights on elements . Let the content inside the card element dictate the height of it.

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

  • Best practice not to leave commented codes.

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

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

  Marked as helpful

  0

  ---

  

  codie123•250

  @Codie123Posted over 2 years ago

  @PhoenixDev22 Thank you ,Your feedback helps me figure out my mistakes. soon i will be updating my corrected solution.

  1