Barely responsive Base Apparel page

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hi, LorenaFrias!

  I think, it is better to not use minmax() function first. Then, use a media query. After that, once you know the responsiveness of the grid, then you can try experimenting to create the responsive grid with no media queries.

  I hope this resource can help you create responsive grid with no media queries.

  Ten modern layouts in one line of CSS

  Here are some suggestions for improvements.

  • Alternative text for images should not be "#". The value of the alternative text is used by screen readers to describe the image to the users.
  • For images containing text, make sure the alternative text includes the image's text. In this case, the Base Apparel logo should have an alt value of “Base Apparel”. Reference — Checklist - The A11Y Project #for-images-containing-text-make-sure-the-alt-description-includes-the-images-text
  • The hero image is a decorative image. So, leave the alternative text empty, (alt="").
  • For your information, decorative images are images that don't add any information and serve only aesthetic purposes.
  • Add label to the submit button. You can label by using the alternative text of the icon-arrow.svg. Another way is to use aria-label attribute and treat the icon as a decorative image.
  • Avoid using JavaScript to add styling (unless you have no other option). JavaScript allows you to change the CSS code using the style property. But, to make debugging easier and improve code maintainability, it’s best to avoid it. Use CSS classes instead.
  • Avoid using px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting.

  I recommend learning to create accessible form validation. Accessible form validation means that the error messages get pronounced by screen readers, each input has a label, and using the correct type of input. I wrote an article to help you understand to do all of that.

  How To Create Accessible Form with Boring Design?

  I hope this helps. Happy coding!

  Marked as helpful

  0

  ---

  

  LorenaFrias•80

  @LorenaFriasPosted almost 2 years ago

  Hi @vanzasetia !

  Thank you so much for taking the time to check my code! I will do my best to improve it following your advice. Also, I want to learn to make accessible web content so I'll be reading every resource carefully !

  Thanks!

  1