Social proof section

Community feedback

• 

  Vicktor•900

  @Victor-NyagudiPosted about 2 years ago

  Great work on this one. It's responsive and follows the design well.

  There are a couple of things you can improve. First, you should add an <h2> or lower heading tag inside your <section> tags and style them such that they're out of view for viewers with good eyesight.

  Screen readers read out these headings to people with poor eyesight telling them what the section is about. Adding them also removes some of the warnings in the HTML validator report.

  Here's an example of a heading with a for-screen-reader class.

  h2.for-screen-reader 
  {
       position: absolute;
       right: -100000000; // give it a very large number so it's out of view
       height: 1px;
       width: 1px; // if it somehow ends up on the screen, it's too small to see
       overflow: hidden;
  }
  

  Secondly, if you're going to use an <article> tag, it requires an accompanying <h2> tag or lower, just like the <section> tag. The reason is also the same.

  I like the transitions that you made for some of the elements, but the only way to see them right now is when the screen is being resized.

  If this was just something cool you wanted those of us viewing your solution to see, then it's fine, but if this was something going into production, it wouldn't be necessary since the average person doesn't use developer tools to resize the screen, checking its responsiveness.

  Other than that, everything else looks good!

  All the best with future solutions.

  0
• 

  ‪Bilal Salmi‬‏•250

  @BilalSalmiPosted about 2 years ago

  Hi NT-squared, that was awsome!

  As you said, I really like how you get around the problem of images but I

  highly recommend to use icons instead of images. because it's much faster in loading compared to images, moreover it can be manipulated by css, so that you can change its color in the dark mode and light mode!

  For icons you use font-awsome framwork click here and take a look at its offical website.

  how to use it here.

  That is, Keep Going!

  0