NFT preview card component using HTML and CSS

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Greeting karamthedev ,

  Congratulation on completing your first project . I have some suggestion:

  • Wrap the body content in <main >tag .Within body sits main and footer.

  • Don't use<span>for meaningful content. <span class="days">3 days left</span> and <span class="price">0.041 ETH</span>, you should have used<p>.

  • 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. And for this one avatar 's alt , it needs to be a brief description .

  • The eye image 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.(Why did you use the font awesome here? you can use the one given in the challenge )

  • Anything with a hover style in the design means it's interactive . You need to add an interactive element around the image and Equilibrium #3429.

  • You shouldn't have used <hr/> . you can use border-top property for the class="author-info">.

  • I see you trying to use the semantic tags, No need for <aside > here in this challenge.

  • For class="card-info" you can use unordered list <ul> to wrap it and in each list item would have <img > and <p>.

  • Always use classes to reference all the elements that you want to style. Don't use nesting css selectors. Really important to keep css specificity as low/flat as possible. The best way to do that is single class selectors.

  • You should use em and rem units .Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design.

  • I would recommend letting the content inside it dictate the height of the main element.

  I really hope this feedback helps . happy and keep coding.

  Marked as helpful

  0

  ---

  

  Mohamed Karam•30

  @karamthedevPosted almost 3 years ago

  @PhoenixDev22 I appreciate your feedback a lot! was just experimenting with external libraries CDN so I figured I could use font awesome in this project, I would consider your tips about styling, semantic HTML and accessibility.

  1
• 

  Web Wizard•5,690

  @rsrclabPosted almost 3 years ago

  Hi, @karamthedev ~

  Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it.

  Here are some of the tips I like to provide.

  • I suggest you to try transition on hoverable elements like image, heading and creator name.
  • Please try BEM for naming element classes. It will help you a lot on bigger projects.
  • Font sizes and spacings aren't the same with design - especially spacing under image element. As a front-end developer, it's important to meet pixel-perfect requirements.

  https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH

  Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

  Cheers ~

  Marked as helpful

  0

  ---

  

  Mohamed Karam•30

  @karamthedevPosted almost 3 years ago

  @tymren608 Thanks for your response! I would give CSS transitions a try and dive more into BEM naming conventions as this is still kinda new to me. Your tips are very appreciated.

  0