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

Hoover for the equilibrium image

Kohsey 40

@KohseyPower

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'm pretty in HTML CSS, this is my second project. The most difficult part was to made the "hoover" of the equilibrium image, I look up the solution on youtube by the way. it doesn't seem to be for me optimum. Tell me !! Also, if I made big mistakes tell me too !!

Feedback welcome !

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

Hello there! 👋

Good effort on this challenge! 👍

Some suggestions from me.

  • I recommend swapping all article and section with div elements. If you see the HTML issues that has been reported, article and section cause some issues. It's okay to use div as long as it doesn't cause any accessibility issues.
  • You can read this article about div, written by Scott O'Hara. It will tell you when and how to use a div. Also, it might change the way you think about div.
  • For the white space, I suggest using margin or padding instead of nbsp.
  • All elements that have interactivity should be wrapped by interactive elements like anchor tags.
  • Those icons are decorative images which means that if they don't exist, there will be no missing information, it's just made the site looks less pretty. So, for decorative images leave the alt empty.
  • Alternative text for images should not contain the word "icon" or any words that are related to "image".
  • Alternative text for the avatar should be the author's name.

That's it! Hope this helps.

Marked as helpful

1

Kohsey 40

@KohseyPower

Posted

@vanzasetia Hello !! I am grateful to you for detailing my mistakes. I will correct my 'alt' things and my not really sexy 'nbsp'. However, I have a last question. Should I replace my equilibrium interactive image by an anchor tag ? Thanks in advance for answering.

Right after posting this, I will go to your link about 'div'.

Have a nice day ! 😘

0
Vanza Setia 27,795

@vanzasetia

Posted

@KohseyPower Hahaha, you're welcome! 👍

You should replace the section tag with an anchor tag. That's what I mean. 🙂

1
Kohsey 40

@KohseyPower

Posted

@vanzasetia Okay got it!

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