Newsletter sign-up form with success message using CUBE CSS & Sass
Design comparison
Solution retrospective
This was my first time creating a form from scratch. I learned a lot, including how to create and validate forms, basic form managing in JavaScript, and ARIA attributes that can be good to use with forms.
What challenges did you encounter, and how did you overcome them?At first, I tried to create the success message using a simple div and position: absolute. But then I remembered the dialog element. This approach made me write less code due to the functions, included in the dialog element. It also made managing the success message easier.
I learned that I can use aria-describedby to get screen readers to read error messages and that I need to use aria-required for required form fields.
Any suggestions and comments on how I can improve are welcome!
Community feedback
- @fatemzhPosted 3 months ago
Congrats for making it visually identical ! Your code is well-structured with good practices. You could improve it by using <div> over <section> for better clarity. Also to improve accessibility you could use role="alert". This is a simple project with only one page, maybe having a more synthetic css structure would make the code easier to maintain and more efficient.
0@moadavouPosted 3 months ago@fatemzh What do you mean by having a more synthetic CSS structure? And why is
<div>better than<section>?0@fatemzhPosted 3 months ago@moadavou I considered this from the perspective of a colleague who might need to modify the project in the future. The current folder and file structure, while thorough, is quite complex for a simple single-page project. This level of organization might make it more challenging to quickly find and change something, which could be streamlined for easier maintenance. My apologies for the confusion regarding the use of <div> versus <section>. I see now that I got confused with another project code, so my feedback on that wasn't relevant sorry!
0@grace-snowPosted 3 months ago@fatemzh I'm afraid that wouldn't improve accessibility. It would actually make it a little worse because the error and input would no longer be programmatically linked.
An improvement would be changing the aria-live value to "assertive" but not role to "alert".
Marked as helpful0@moadavouPosted 3 months ago@fatemzh I understand your perspective. But my goal with these smaller projects is to practice, not for anyone else to modify. If it were a bigger project the level of organization would be beneficial. I chose to practice organizing my files as if this were a bigger project.
0@fatemzhPosted 3 months ago@moadavou Indeed, it totally makes sense. Where did you find ressources on building that type of more advanced folder structures ? Is the one you did a standard ?
0@fatemzhPosted 3 months ago@grace-snow Oh ok good to know, I was taught differently. There are so many nuances, it gets a bit confusing. Thanks for the clarification 😊. Do you have examples in which it's more suitable to use the "alert" role ?
0@grace-snowPosted 3 months ago@fatemzh I rarely ever use it to be honest but it would be suitable for an error block at the top of a form (one that lists all the errors).
0@moadavouPosted 2 months ago@fatemzh I have taken a lot of inspiration from Kevin Powell and Sass Guidelines. It's a work in progress and I'm trying to get more into Component-based architecture. I don't think is standard. But I think it's a decent structure for larger projects.
0
Please log in to post a comment
Log in with GitHub
Join 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