Base Apparel Coming Coon Page

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted over 1 year ago

  Hi

  The HTML needs tweaking in this.

  1. You've put the header within main but it can't go there. Header and main are distinct landmarks, they can't sit within each other. There is no reason to have two logos in this anyway. As it's only a landing page, it's fine for all to be within main and you can use CSS grid to achieve the required layout 2.Logo is important content. It definitely cannot have an empty alt!
  2. There is no reason to wrap every element in a div like the h1 and paragraph. Get out of that habit as soon as possible. Always keep HTML as simple as it can be
  3. The input needs a label. This is inaccessible at the moment
  4. The hidden class should be on validationMessagecontainer__text not it's wrapping div. The wrapping div needs to be present in the DOM (not display none) at all times. It also needs aria-live on it.
  5. The input then needs aria-describedby pointing to the error wrapping div's ID. This is how you programmatically link the error message to its input
  6. The event listener should be on the form listening for a submit, not a click on the button
  7. Never use width: 100vw; That is causing horizontal overflow so a sideways scrollbar appears. You will never want to use that as it will make the element wider than the screen on certain devices. 100vw means "full width of the viewport PLUS the width of the vertical scrollbar"
  8. The image is missing the object-fit property so is becoming skewed/distorted
  9. Because you are using CSS media queries of 1024px for large screens but 1000px in the picture element, it is causing the layout to break at some points as you shrink/enlarge the viewport

  Marked as helpful

  0

  ---

  

  Miguel Evangelista•520

  @MiguelaebPosted over 1 year ago

  @grace-snow Thank u for the feedback, I'll keep it in mind for the next challenges.

  0

  

  T

  Grace•31,090

  @grace-snowPosted over 1 year ago

  @Miguelaeb you need to refactor this before looking at any other challenges

  0

  

  Miguel Evangelista•520

  @MiguelaebPosted over 1 year ago

  @grace-snow I'm on it

  0