Intro component with signup form (used SCSS and Vanilla JS) Newbie
Design comparison
Solution retrospective
This is my version of Intro Component with Signup Form (https://www.frontendmentor.io/challenges/intro-component-with-signup-form-5cf91bd49edda32581d28fd1) newbie project. The area of which I'm not unsure is definitely the JavaScript part, so please provide a feedback of pros and cons of my way. Also, I have a quesstion about best practices with sass, should I have made different files for variables and globals for this project, or was it enough to put it all under one main sass file.
Community feedback
- @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 helpful1@DavidPokrajacPosted about 1 year ago@beowulf1958 thanks a lot for your feedback!
0 - @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
. Thearia-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 helpful1 - Everything inside the form should be wrapped inside a
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord