Coming soon page

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, again, awesome work on this challenge. Desktop layout looks fine but the responsiveness could be better because if you resize to like point 800px, you will see that the layout is destroyed. But on the other hand, mobile state looks really great.

  Some suggestions would be:

  • Remove the overflow from the main tag. If you inspect that layout in dev tools at the bottom, you will notice that the site is not scrollable because of the declaration.
  • On your .container selector, the grid should have this value:

  "header hero"
  "body hero"
  

  Then on the .image-container add grid-area: hero. You mistakenly used the grid-area: hero on the img tag itself and not on the container of the img.

  • Also, you again when inspecting at the bottom, the text are being pushed up top, you might want to address that one out.
  • Never hide a website logo. Remember that a website-logo is one of the meaningful images on a site so always make them visible. Since you are using svg rather than img, your svg should have or looks something like this:

  <svg role="img">
    <title id="base-apparel">base apparel</title>
  </svg>
  

  This way, it will be read by screen-reader.

  • For the form you should have added a .preventDefault() when submitting so that it won't refresh the site and the user could have re-input proper values.
  • The button should have the aria-label not the svg. The svg should be hidden as well since it is only a decorative image so use aria-hidden="true" on it.
  • Also, a proper way of doing error on a form and linking them up to their respective input should look something like this: INPUT

  if ( input is wrong )
    input.setAttribute("aria-invalid", "true");
    input.setAttribute("aria-describedBy", id of the error-message);
  else 
    input.removeAttribute("aria-invalid");
    input.removeAttribute("aria-describedBy");
  

  The error-message element should have an id attribute which is referenced by the aria-describedBy attribute on the input element. By doing that, your user will know that the input is wrong because of aria-invalid and they will know what kind of error they made because of the aria-describedBy. If you are confused about that one, have a look at this simple accessible form snippet that I have. If you have queries about this one, let me know so that I could help with it ^^

  • Lastly, just addressing the responsiveness issue.

  Aside from those, great job again on this one.

  Marked as helpful

  1