FrontendMentor | NFTCARD Results

Community feedback

• 

  Abreham Nigussie•470

  @DreamCoder7Posted over 2 years ago

  great job, Willians;

  But I see some issue with your styling and structuring your HTML file. First separating your style from HTML or ignoring inline style is way better for reading your code. Second you have a lot of accessibility issue because of your HTML structure.

  Here are some changes I made in browser that should help with accessibility issue:

  /*
  <a href="">
    <img class="img" src="/images/image-equilibrium.jpg" alt="" />
  </a>
  */
  // The alt attribute is a semantic html (means a certain element have actually meaning and purpose attached to them)so don't ignore it. it's use full for accessibility and also SEO 
  <a href="#">
    <img class="img" src="/images/image-equilibrium.jpg" alt="some image" />
  </a>
  
  <div class="lado">
     // why bothering using (<h4></h4>) and also even if you want to use you should use (<h3></h3>) tag because Heading levels are important!
     /*<h4><img class="img1" src="/images/icon-ethereum.svg" alt="">0.041ETH</h4>*/
    // you can fix like this:
    <img class="img1" src="/images/icon-ethereum.svg" alt="ethereum Icon">
    <p>0.041ETH</p>
  </div>
  
   /* hr {
          background-color: hsl(215, 32%, 27%);
          border-color: hsl(215, 32%, 27%);
          height: 1px;
          width: 90%;
        } */
  
        // instead of using <hr /> tag you can do it like this. but still if you prefer using <hr /> tag you can use but it better to use like this
        .lado2 {
          border-top: 2px solid hsl(215, 32%, 27%);
        }
  
        /* Why?? 
        img.img2 {
             vertical-align: middle;
        }*/
  
      // Instead do this
     .im2 {
         vertical-align: middle;
      }
  

  Marked as helpful

  0