NFT Preview Card using HTML and CSS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  Hi, Taylor! 👋

  You should create the active state styling based on the design. I recommend giving it a try to practice your CSS skill.

  You should wrap the Equilibrium image with an anchor tag. It has interactivity so it should be wrapped by an interactive element.

  Swap the <h4 class="title"> with <h1>. Heading should start from <h1>.

  The Ethereum and clock icons are decorative images. You should leave the alternative text empty.

  For your information, decorative images are images that don't add any information and serve only aesthetic purposes.

  Alternative text for the avatar should be the name of the creator, "Jules Wyvern".

  Wrap the text with a meaningful element like a paragraph element. There should not be text in <span> and <div> alone.

  Use a CSS reset whenever you start a new project. This can help you set the styling foundation easily. My recommendation — A Modern CSS Reset | Andy Bell

  Never use px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSS

  I hope you find this useful. Have fun coding! 😄

  Marked as helpful

  0
• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  Hey there,

  Congrats on completing the challenge successfully! Your solution and design implementation looks great overall.

  I noticed hover state for the image is missing. You can do it by adding an overlay container that contains the eye icon in the centre of it and set the overlay to opacity: 0 by default. When hover, the opacity can be set to 1.

  Hope this was helpful!

  Marked as helpful

  0
• 

  Finney•3,030

  @Finney06Posted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

  Here are some suggestions regarding your code that may be of interest to you.

  HTML 🏷️:

  To clear the Accessibility report:

  • Images should have alternate text.

  • Wrap the page's whole main content in the <main> tag.

  • Always avoid skipping heading levels; Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy.

  • Use HTML5 semantic elements such as <header>, <nav>, <main>, <aside>, and <footer> to define these sections.

  • Use ARIA landmarks such as <header role="banner"> and <footer role="contentinfo"> to provide additional information about the purpose of each section to assistive technologies.

  Here is a web accessibility evaluation tool📕 to check your webpage for any remaining errors or warnings related to landmarks.

  I hope you find it helpful!😏 Above all, the solution you submitted is 👌. 🎉Happy coding!

  Marked as helpful

  0

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  @Finney06

  Hi, Finney! 👋

  You don not need to use role attribute if you are already using the semantic HTML. For example, you do not need to add role="banner" if you are using <header>. It is because the semantic HTML has already an implicit role attribute. So, you don't need to add it by yourself.

  1

  

  Finney•3,030

  @Finney06Posted over 1 year ago

  @vanzasetia ohh okay. Thank you from bringing it to my notice

  1