Submitted over 2 years ago

NFT Preview Card

Letícia dos Santos•10

@ldsleticia

Preview site View code

This is a solution for...NFT preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Dificuldade em deixar o código responsivo

Community feedback

Abreham Nigussie•470

@DreamCoder7Posted over 2 years ago

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.
*/

Letícia dos Santos•10

@ldsleticiaPosted over 2 years ago

@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

Please log in to post a comment

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