Base Apparel coming soon page with HTML & CSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Desktop layout looks really great, though on the responsiveness side, if you try to go at width 985px, the hero-image is just squished and the layout does not respond to screen-changes. Mobile layout looks great though.

  Some suggestions would be:

  • Avoid using height: 100vh on a large container like the body tag as this limits the element's height based on the remaining screen's height. Instead use min-height: 100vh, this takes full height but lets the element expand if needed.
  • Your aria-label for the logo-link is incorrect. If an image acts as a link like the website-logo, the aria-label should define where the link would take the user like aria-labe="homepage".
  • Website-logo img should be using the website's name as the alt like alt="base apparel". Remember that a website's logo is meaningful so always make sure it uses the proper alt value.
  • Avoid using multiple h1 on a page, use only at least 1 per page so change those into other heading tags.
  • Also on your h1 you should have just use single h1 for the text and just use max-width to make the words wrapped in another row. Adjust the max-width until you are satisfied.
  • Your input tag lacks an associated label tag on it. Since there are visible-label, the label would be a screen-reader only label, meaning it would make user of like sr-only class. The text-content should describe what the input needs like the value on the placeholder.
  • Submitting the form without value gives me 405, it would be great to just let the user know that it is unsuccessful though.
  • Add an aria-hidden="true" on the error-icon so that it will be totally hidden for screen-reader users.
  • Use button type="submit" instead of input.
  • Also, I don't know about other but I prefer only show error after submitting an invalid response and not with every keyup event, so that user will only be notified once.

  Also if you want, have a look at this simple accessible form that I have if you have any queries about this, let me know.

  Aside from those, great job again on this one.

  Marked as helpful

  1

  ---

  

  Ctrl+FJ•810

  @FlorianJourdePosted about 3 years ago

  @pikamart Thanks à lot for your feedback ! I'm sure I'll improve, because of it. I guess my main mistakes comes from form, I didn't used to make them. Also, thanks for you JSFiddle link ! I'll keep it close to me !

  Thanks again, glade you liked it !

  1

  

  Ctrl+FJ•810

  @FlorianJourdePosted about 3 years ago

  @pikamart I'll use your accessible form to resolve this challenge today. Mate, I would be glad to receive your opinion, once I'll have submit my solution !

  Edit: I don't have time at the moment to fix HTML issues since I have to eat something, but you can still have a look to what I did here. Thanks again for you fiddle !

  1