All comments

• 

  Khalis•135

  @khalisabrahman

  Submitted about 4 years ago

  

  Mobile layout first, SCSS, BEM methodology

  2

  10
  

  MasterKrab•940

  @MasterKrab

  Posted about 4 years ago

  Great job on this challenge!

  I have a couple of recommendations:

  • The input should have a valid accessibility name, such as a label with a for attribute or an aria-label. Also since it is a field for the email it should have type="email".

  <label for="email">Email</label>
  <input type="email" id="email">
  
  <-- Or --->
  
  <input type="email" aria-label="email">
  

  • The section and article should have a title (h1-h6), or you can use an aria-label as well.

  <article>
   <h2>Title</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
  </article>
  
  <-- Or -->
  
  <article aria-label="Title">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
  </article>
  

  0
• 

  Roc Tanweer•2,500

  @RocTanweer

  Submitted about 4 years ago

  

  HTML5, SCSS, Vanilla Js, Fluid Typography

  2

  40
  

  MasterKrab•940

  @MasterKrab

  Posted about 4 years ago

  Hello Roc Tanweer, great job on this challenge!

  I think I can help you with a couple of suggestions.

  • You can add an aria-label to links with descriptive text for screen reader users.

  <a href="#" aria-label="Description">
    <i class="icon" aria-hidden="true"></i>
  </a>
  

  • I think the "More info" button should be a link because it will probably send you to another page with more information.

  • The download-box should be an article or section and not just a div.

  • The hover effects should only be on desktop because on mobile is problematic and does not make sense to place it.

  I hope you find it useful, let me know what you think.

  Happy coding!

  1