BASE APPAREL COMING SOON SOLUTION

Community feedback

• 

  Zineb Boutaa•750

  @zineb-BouPosted almost 3 years ago

  Good solution, here are some notes that will help you to improve your code :

  • The best way to apply different versions of the image based on the screen viewport, is using the <picture / > element, better than using an empty <div / > then add <img /> using media queries.
  • Concerning the submit button inside the form, there is no text however we have to think about people who are using assistive technologies, so we can add a text that explain what the button does then we hide it using .visually-hidden class, and since the icon it's for the decoration purpose we can hide it from the screen reader. Here how you can make an accessible button icon

  <button type="submit">
  <span class=".visually-hidden">Submit your email</spna>
  <img src="./images/icon-arrow.svg" alt="arrow" class="icon_arrow" aria-hidden="true" />
  </button>
  

  .visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0); 
    clip-path: inset(100%); 
    height: 1px; 
    overflow: hidden; 
    position: absolute; 
    white-space: nowrap; 
    width: 1px; 
  }
  //this way you are hiding the text inside the button visually.
  

  This way you are making the design looks pixel-perfect without excluding some groups of people.

  • In this case, you are using only a single button in the form, so automatically it will take the default behavior which is submit, however in a different situation where there is more than a button inside a form, it's a good practice to always declare type.
  • Creating multiple stylesheet for different screen size, it's not very practical, there are some code it's been repeated, so it's recommended to use media queries.

  Marked as helpful

  0
• 

  MELVIN•580

  @boymelvsPosted almost 3 years ago

  Hi, Zineb,

  Thank you very much for your comment. I'm glad you looked at my code and saw where I had shortcomings that I could improve on.

  Every suggestion I receive is more informative for me. I will include your suggestions in my next solutions and will be part of my approach to writing code.

  Because I'm a beginner, my code often gets messy, I just split it apart so that I have a backup and if I make a mistake, only one screen size is affected. Once again thank you, I appreciate your comment.

  0