Stats-Preview Challenge

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  👋 Hi Priyanka!

  🎉 Congratulations on finishing your second challenge on Frontend Mentor! I have some feedback to help you improve this solution:

  • Accessiblity
    • 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. In this case, all images are decorative only.
    • Only have one h1 for every page. Heading one is used to identify each page, not for sectioning.
    • Also this should not be a heading. It should be a paragraph.

  <h1 class="subhead">10k+</h1>
  

  • Wrap all the page content inside a landmark. In this case, you can wrap it with main tag (This should fix the generated issue).
  • I would recommend making each subdiv to be a li and wrapping all li with ul. This will make your HTML markup more semantic.
  • Other
    • Don't manually uppercase the text (unless you want it to be spelled by screen reader). Use CSS instead.

  <p>COMPANIES</p>
  

  I would recommend refactoring this code (do this challenge again), by following this guide:

  • Try to learn and use background-blend-mode or mix-blend-mode properties to create the purple overlay.
  • Don't use float in this case. You can use flexbox to make the card have two columns on desktop view.
  • Add max-width to the container or the card to prevent it become too large on the small or big screen size. You can see the issue by seeing your website on 600px width to 1439px and also >1440px.
  • You can make the card perfectly on the center by using flexbox.
  • This is obvious, but I would recommend seeing other people solutions if you get stuck or want to get an idea.
  • (Best Practice) I would highly recommend naming your class in English and trying to follow BEM class naming convention.

  That's it! Hopefully, this is helpful!

  Marked as helpful

  1

  ---

  

  Priyanka Vasam•40

  @priyankavasam7Posted almost 3 years ago

  @vanzasetia Thanks a lot! I didn't expect such a detailed explaination with resources to refer. I came to know blunders in my code. Thanks for going through my code and rectifying mistakes. I will do this challenge again based on your suggestions and improve it. Your feedback helped a lot😊😊

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  @priyankavasam7 You're welcome! Glad to know that it helped you!

  0
• 

  Byron•2,290

  @byronbyronPosted almost 3 years ago

  Could try using background-blend-mode: multiply; with a background image and the purple background color. Something like...

  <div class="card-image" style="background-image: url('image-header-mobile.jpg');"></div>
  
  .card-image {
      background-repeat: no-repeat;
      background-position: center
      background-color hsl(277, 64%, 61%);
      background-blend-mode: multiply;
      background-size: cover;
      padding-top: 74%;
      border-radius: 10px 10px 0 0;
  }
  

  Then can position the background image to the right on desktop, so something like...

  @media (min-width: 1440) {
      .card-image {
          position: absolute;
          top: 0;
          right: 0;
          left: 50%;
          bottom: 0;
          padding-top: 0;
          border-radius: 0 10px 10px 0;
      }
  }
  

  https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode

  Marked as helpful

  1

  ---

  

  Priyanka Vasam•40

  @priyankavasam7Posted almost 3 years ago

  @byronbyron Thanks! I'm feeling very happy to recieve suggestions. I will try this code 😊😊

  0
• 

  Mojtaba Mosavi•3,760

  @MojtabaMosaviPosted almost 3 years ago

  AS mentioned above above your looking for something background-blend-mode.

  Keep coding

  0