Hi @saketbyte,
I'll start by saying great effort, it looks very similar to the design and it is a tricky project when starting out. I've just completed it myself and learnt a lot by completing it.
I've got a few suggestions regarding best practices ect.
1. You should check your HTML for correct indentation, especially line 25 -29
2. All input fields should have an accompanying <label> (for accessibility) for example
<label for="firstname" class="sr-only">First Name</label>
<input type="text" name="fname" id="firstname" placeholder="First Name" value="">
The <label for=""> attribute should be equal to the id="" of the <input> it is related to.
note the sr-only class on the label - see the css you can use below. This allows you to visually hide the label text for the form but It will still be read by screen reader technology for the visually impaired
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
3. You need to have a closer look at your Javascript as after the form has been submitted with inputs that did not pass the validation the error text such as "First name is required is not removed once a correct First name is entered and submitted
4. Consider Implementing a css reset to ensure that different browsers will render your code in the same way.
This can be done in a reset.css file and used with every website you build.
You can read more about this at Andy Bells CSS Reset
Please mark my answer as helpful if it has helped you in any way
Keep up the great work ! I look forward to seeing more solution submission from you in the future.
Marked as helpful
@saketbyte
Posted
@jacksen30 Thank you so much for such detailed feedback. I am extremely grateful to you. I will look into the possible improvements you mentioned. ✨ Thank you once againnnnn! 😇
@saketbyte
Posted
@jacksen30 hi I worked on the things you said and improved it. Thanks a lot for the suggestions!!