Intro component with signup form (used SCSS and Vanilla JS) Newbie

Community feedback

• 

  P

  beowulf1958•1,450

  @beowulf1958Posted about 1 year ago

  Congratulations on completing this challenge; it looks great. The css is well organized and very readable.

  As to the Sass: I am a total newbie, so take this with a grain of salt. What I have observed is that the more experienced coders put all their sass files (main and partials) in a separate sass folder, which keeps the site more organized. Also, on small projects like this one, it is enough to put it all under one main sass file. However, many coders separate their globals and variables in such a way as to be scalable; they practice in a small project the type of organization they would follow on a larger project. In the end, you follow the system that makes sense to you.

  Marked as helpful

  1

  ---

  

  David Pokrajac•450

  @DavidPokrajacPosted about 1 year ago

  @beowulf1958 thanks a lot for your feedback!

  0
• 

  P. Ricardo•2,370

  @pRicard0Posted about 1 year ago

  Some HTML tips

  • Everything inside the form should be wrapped inside a <fieldset> which will have a <legend> that is visually hidden using CSS. The legend tag is like the label of the form.
  • The error message is invisible but auxiliary devices can still read it. The message must contain aria-hidden="true"
  • The input must contain aria-invalid. It is used to indicate whether the value of an input field or form control is valid or invalid for the user. You should update the value using Javascript. aria-invalid should be true or false.
  • You should use aria-describedby. The aria-describedby attribute lists the ids of the elements that describe the object. It is used to establish a relationship between widgets or groups and the text that describes them. In short, it is used to associate the input with the error message in this case.

  CSS tip

  • You can add a transition to your "input type submit". Like... transition: 200ms;

  Marked as helpful

  1

  ---

  

  David Pokrajac•450

  @DavidPokrajacPosted about 1 year ago

  @pRicard0 thanks a lot for your feedback!

  0