Coming soon Frontend Challenge

Community feedback

• 

  Venus•1,640

  @VenusYPosted about 2 years ago

  Well done on completing the challenge! You did a great job making the webpage resemble the design.

  From your code, I can see that you implemented the desktop styles first. While for simpler pages like this, it's fine to do it this way, for more complex pages, you might find it easier to add the mobile styles first. For more information, look into 'mobile-first design philosophy'.

  I noticed that you used the <strong> tag to make the text bold in your HTML file. the <strong> tag has semantic meaning and is usually used to indicate that something is important. If your only intention is to make the text bold, it is much better to use the CSS font-weight property.

  To achieve the semi-bold heading:

  .text-md {
    font-weight: 300;
  }
  
  .text-black {
    font-weight: 700;
  }
  

  For accessibility reasons, you should add :hover and :focus styles to the input field and buttons so that the user can see which part of the webpage they're focused on even when they're using a keyboard to navigate.

  To change the submit button's colour on hover/focus:

  input[type="submit"]:hover,
  input[type="submit"]:focus {
    background: var(--pale-blue);
  }
  

  For the error message, I used a <div> tag and placed both the input field and the error message inside it. The error message was then given a class form__error-message--hidden with display: none; on it. Finally, JS was used to toggle this class on and off depending on the validity of the email.

  Great job once again for completing this challenge, and I hope this helped! Feel free to let me know if I've been unclear at any point, and I'll try my best to explain further.

  Marked as helpful

  0

  ---

  

  hakifred•110

  @hakizimana-fredPosted about 2 years ago

  @VenusY Thank you so much for your response!

  0