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

NFT Preview Card

@ldsleticia

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


Dificuldade em deixar o código responsivo

Community feedback

@DreamCoder7

Posted

Great job, Letícia dos Santos,

But there is a big problem with semantics. I noticed that all the images don't have alt attribute that is one of the reason you have an ACCESSIBILITY issue and also you should only use id for unique purposes instead you can use class.

Here are some guidance that should help:

/*
id: is unique in the context of a web page; It can not be duplicated.
class: can appear multiple times on multiple element.
[For more explanation: ] (https://css-tricks.com/the-difference-between-id-and-class/)
[More: ] (https://www.w3schools.com/html/html_id.asp)
*/

/*
use alt attribute:
<img src="./images/icon-ethereum.svg"  alt="Ethereum Icon"/>
*/

/*
// Basic setup using universal selector feel free to include at the top of your CSS code 
*,
*::before,
*::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
}

The Universal Selector  (*):  Literally the asterisk character. It is essentially a type selector that matches any type. Type meaning an HTML tag like <div>, <body>, <button>, or literally any of the others.
*/
1

@ldsleticia

Posted

@redstorm-hub Thank you for your feedback. I'll pay more attention to this very important accessibility issue and the issue of zeroing out the spaces that the browser includes and can get in the way. Thank you so much for your contribution to my learning journey

1

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