Ping Single Column Coming Soon (SASS + JS)

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • This needs to be inside a header element:

  
   <div class="title">
          <img src="images/logo.svg" alt="" class="logo">
          <h1>We are launching <span>soon!</span></h1>
          <p>Subscribe and get notified</p>
        </div>
  

  • This would be inside a main element:

  
  <form>
          <input type="text" id='input' class="email one" placeholder="Your email address...">
          <a href="#" class="btn">Notify Me</a>
        </form>
        <div class="message error"></div>
        
      </div>
  
      <div class="animation-down">
        <img src="images/illustration-dashboard.png" alt="" class="dashboard">
  

  • While the social media icons and copyright would be inside a footer element.

  • Your input needs to have a label attached to it for accessibility and the "button" should be created using the button element not an anchor element.

  • Your JS should listening for a "form submit".

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding!🎄🎁

  Marked as helpful

  1

  ---

  

  Hussain Hussain•410

  @LysitheaDarkKnightPosted almost 2 years ago

  @vcarames Can you elaborate on why the inputneeds to have a label attached to it? I did not apply it because there was no text above or near the input. Is there more to this label that I'm missing out on?

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @LysitheaDarkKnight

  Accessibility. The label would visually hidden, so that only screen readers can pick it up ( I should have mentioned this on previous comment, sorry about that).

  inputs should always have a label even if they are not seen in the design files. Remember, when building components/sites, some of your users will rely on assistive technology to guide them through your site.

  A good way to test your site’s accessibility is by using your computer’s voice over.

  Hope this clears things up.

  Marked as helpful

  0